[new architecture] onScrollEndDrag missing event property #42533

mccraveiro · 2024-01-21T15:20:28Z

Description

On new architecture the onScrollEndDrag event is missing the velocity property

Steps to reproduce

Create a Flatlist and log the onScrollEndDrag event
Activate the new architecture
Check the Flatlist event again

React Native Version

0.73.2

Affected Platforms

Runtime - iOS

Areas

Fabric - The New Renderer

Output of `npx react-native info`

info Fetching system and libraries information...
System:
  OS: macOS 13.3.1
  CPU: (8) arm64 Apple M1
  Memory: 271.30 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.15.0
    path: ~/.nvm/versions/node/v18.15.0/bin/node
  Yarn:
    version: 1.22.19
    path: ~/.nvm/versions/node/v18.15.0/bin/yarn
  npm:
    version: 9.5.0
    path: ~/.nvm/versions/node/v18.15.0/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.12.0
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 22.4
      - iOS 16.4
      - macOS 13.3
      - tvOS 16.4
      - watchOS 9.4
  Android SDK: Not Found
IDEs:
  Android Studio: 2021.2 AI-212.5712.43.2112.8609683
  Xcode:
    version: 14.3/14E222b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 11.0.18
    path: /usr/bin/javac
  Ruby:
    version: 2.7.7
    path: /opt/homebrew/opt/[email protected]/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.2
    wanted: 0.73.2
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

Log on old architecture:

{"event": {"contentInset": {"bottom": 0, "left": 0, "right": 0, "top": 0}, "contentOffset": {"x": 0, "y": 176.33333333333334}, "contentSize": {"height": 8491, "width": 393}, "layoutMeasurement": {"height": 754.3333333333333, "width": 393}, "targetContentOffset": {"x": 0, "y": 368.3333333333333}, "velocity": {"x": 0, "y": 0.3943370795642751}, "zoomScale": 1}}

Log on new architecture:

{"event": {"contentInset": {"bottom": 0, "left": 0, "right": 0, "top": 0}, "contentOffset": {"x": 0, "y": 193.66666666666666}, "contentSize": {"height": 8101.33349609375, "width": 393}, "layoutMeasurement": {"height": 754.3333333333333, "width": 393}, "target": 76, "zoomScale": 1}}

Reproducer

missing (I'll create later)

Screenshots and Videos

No response

The text was updated successfully, but these errors were encountered:

github-actions · 2024-01-21T15:20:42Z

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

cipolleschi · 2024-01-24T11:56:50Z

Hi @mccraveiro, thanks for opening the issue, but this does not reproduce.
I tried with RNTester, adding the events and they work.

I also tried in a new app from 0.73 and the events work fine with both ScrollView and FlatList.

OldArch	New Arch	New Arch Bridgeless

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import {
  SafeAreaView,
  StatusBar,
  Text,
  FlatList,
  ScrollView,
  useColorScheme,
  StyleSheet,
  Button,
} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';

type Props = {
  setOnScrollEndDragInvoked: (value: boolean) => void;
};

function ScrollViewExample({
  setOnScrollEndDragInvoked,
}: Props): React.JSX.Element {
  return (
    <ScrollView
      onScrollEndDrag={() => {
        setOnScrollEndDragInvoked(true);
      }}
      onScrollBeginDrag={() => {
        setOnScrollEndDragInvoked(false);
      }}>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
    </ScrollView>
  );
}

function FlatListExample({
  setOnScrollEndDragInvoked,
}: Props): React.JSX.Element {
  const items = [
    {id: 1, content: 'Item 1'},
    {id: 2, content: 'Item 2'},
    {id: 3, content: 'Item 3'},
    {id: 4, content: 'Item 4'},
    {id: 5, content: 'Item 5'},
    {id: 6, content: 'Item 6'},
    {id: 7, content: 'Item 7'},
    {id: 8, content: 'Item 8'},
    {id: 9, content: 'Item 9'},
    {id: 10, content: 'Item 10'},
    {id: 11, content: 'Item 11'},
    {id: 12, content: 'Item 12'},
    {id: 13, content: 'Item 13'},
    {id: 14, content: 'Item 14'},
    {id: 15, content: 'Item 15'},
    {id: 16, content: 'Item 16'},
    {id: 17, content: 'Item 17'},
    {id: 18, content: 'Item 18'},
    {id: 19, content: 'Item 19'},
    {id: 20, content: 'Item 20'},
    {id: 21, content: 'Item 21'},
    {id: 22, content: 'Item 22'},
    {id: 23, content: 'Item 23'},
    {id: 24, content: 'Item 24'},
    {id: 25, content: 'Item 25'},
    {id: 26, content: 'Item 26'},
    {id: 27, content: 'Item 27'},
    {id: 28, content: 'Item 28'},
    {id: 29, content: 'Item 29'},
  ];
  return (
    <FlatList
      onScrollEndDrag={() => {
        setOnScrollEndDragInvoked(true);
      }}
      onScrollBeginDrag={() => {
        setOnScrollEndDragInvoked(false);
      }}
      data={items}
      renderItem={({item}) => {
        return (
          <Text style={styles.text} key={item.id}>
            {item.content}
          </Text>
        );
      }}
    />
  );
}

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  const [onScrollEndDragInvoked, setOnScrollEndDragInvoked] =
    React.useState(false);
  const [useFlatList, setUseFlatlist] = React.useState(false);

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <Text style={styles.title}>
        Is onScrollEndDrag invoked: {onScrollEndDragInvoked ? 'YES' : 'NO'}
      </Text>
      <Button
        onPress={() => {
          setUseFlatlist(!useFlatList);
          setOnScrollEndDragInvoked(false);
        }}
        title={useFlatList ? 'Use ScrollView' : 'Use FlatList'}
      />
      {useFlatList ? (
        <FlatListExample
          setOnScrollEndDragInvoked={setOnScrollEndDragInvoked}
        />
      ) : (
        <ScrollViewExample
          setOnScrollEndDragInvoked={setOnScrollEndDragInvoked}
        />
      )}
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  text: {
    fontSize: 25,
    textAlign: 'center',
  },
  title: {
    fontSize: 20,
    textAlign: 'center',
    color: '#FA0',
  },
});

export default App;

LoKiLyn · 2024-12-12T12:43:39Z

Any update on this issue? I'd like to use velocity to figure out whether onMomentumScrollEnd will be triggered.

LoKiLyn · 2024-12-12T12:45:12Z

Hi @mccraveiro, thanks for opening the issue, but this does not reproduce. I tried with RNTester, adding the events and they work.

I also tried in a new app from 0.73 and the events work fine with both ScrollView and FlatList.

OldArch New Arch New Arch Bridgeless

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import {
  SafeAreaView,
  StatusBar,
  Text,
  FlatList,
  ScrollView,
  useColorScheme,
  StyleSheet,
  Button,
} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';

type Props = {
  setOnScrollEndDragInvoked: (value: boolean) => void;
};

function ScrollViewExample({
  setOnScrollEndDragInvoked,
}: Props): React.JSX.Element {
  return (
    <ScrollView
      onScrollEndDrag={() => {
        setOnScrollEndDragInvoked(true);
      }}
      onScrollBeginDrag={() => {
        setOnScrollEndDragInvoked(false);
      }}>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
      <Text style={styles.text}>Something</Text>
    </ScrollView>
  );
}

function FlatListExample({
  setOnScrollEndDragInvoked,
}: Props): React.JSX.Element {
  const items = [
    {id: 1, content: 'Item 1'},
    {id: 2, content: 'Item 2'},
    {id: 3, content: 'Item 3'},
    {id: 4, content: 'Item 4'},
    {id: 5, content: 'Item 5'},
    {id: 6, content: 'Item 6'},
    {id: 7, content: 'Item 7'},
    {id: 8, content: 'Item 8'},
    {id: 9, content: 'Item 9'},
    {id: 10, content: 'Item 10'},
    {id: 11, content: 'Item 11'},
    {id: 12, content: 'Item 12'},
    {id: 13, content: 'Item 13'},
    {id: 14, content: 'Item 14'},
    {id: 15, content: 'Item 15'},
    {id: 16, content: 'Item 16'},
    {id: 17, content: 'Item 17'},
    {id: 18, content: 'Item 18'},
    {id: 19, content: 'Item 19'},
    {id: 20, content: 'Item 20'},
    {id: 21, content: 'Item 21'},
    {id: 22, content: 'Item 22'},
    {id: 23, content: 'Item 23'},
    {id: 24, content: 'Item 24'},
    {id: 25, content: 'Item 25'},
    {id: 26, content: 'Item 26'},
    {id: 27, content: 'Item 27'},
    {id: 28, content: 'Item 28'},
    {id: 29, content: 'Item 29'},
  ];
  return (
    <FlatList
      onScrollEndDrag={() => {
        setOnScrollEndDragInvoked(true);
      }}
      onScrollBeginDrag={() => {
        setOnScrollEndDragInvoked(false);
      }}
      data={items}
      renderItem={({item}) => {
        return (
          <Text style={styles.text} key={item.id}>
            {item.content}
          </Text>
        );
      }}
    />
  );
}

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  const [onScrollEndDragInvoked, setOnScrollEndDragInvoked] =
    React.useState(false);
  const [useFlatList, setUseFlatlist] = React.useState(false);

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <Text style={styles.title}>
        Is onScrollEndDrag invoked: {onScrollEndDragInvoked ? 'YES' : 'NO'}
      </Text>
      <Button
        onPress={() => {
          setUseFlatlist(!useFlatList);
          setOnScrollEndDragInvoked(false);
        }}
        title={useFlatList ? 'Use ScrollView' : 'Use FlatList'}
      />
      {useFlatList ? (
        <FlatListExample
          setOnScrollEndDragInvoked={setOnScrollEndDragInvoked}
        />
      ) : (
        <ScrollViewExample
          setOnScrollEndDragInvoked={setOnScrollEndDragInvoked}
        />
      )}
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  text: {
    fontSize: 25,
    textAlign: 'center',
  },
  title: {
    fontSize: 20,
    textAlign: 'center',
    color: '#FA0',
  },
});

export default App;

it is invoked. but the callback param event.nativeEvent, is missing velocity parameter :(

zhongwuzw · 2024-12-18T10:45:23Z

May fix it in #48319

mccraveiro added Needs: Triage 🔍 Type: New Architecture Issues and PRs related to new architecture (Fabric/Turbo Modules) labels Jan 21, 2024

github-actions bot added Needs: Author Feedback Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. labels Jan 21, 2024

cipolleschi closed this as completed Jan 24, 2024

cortinico added Resolution: Answered When the issue is resolved with a simple answer and removed Needs: Triage 🔍 Needs: Author Feedback Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. labels Jan 24, 2024

cipolleschi reopened this Dec 17, 2024

cipolleschi added Type: New Architecture Issues and PRs related to new architecture (Fabric/Turbo Modules) and removed Type: New Architecture Issues and PRs related to new architecture (Fabric/Turbo Modules) labels Dec 17, 2024

zhongwuzw mentioned this issue Dec 18, 2024

[iOS] Fabric: Added ScrollEndDragEvent for scrollEndDrag event #48319

Closed

migueldaipre added Resolution: PR Submitted A pull request with a fix has been provided. and removed Resolution: Answered When the issue is resolved with a simple answer labels Dec 18, 2024

facebook-github-bot closed this as completed in a3dfc49 Jan 6, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[new architecture] onScrollEndDrag missing event property #42533

[new architecture] onScrollEndDrag missing event property #42533

mccraveiro commented Jan 21, 2024 •

edited

Loading

github-actions bot commented Jan 21, 2024

cipolleschi commented Jan 24, 2024

LoKiLyn commented Dec 12, 2024

LoKiLyn commented Dec 12, 2024

zhongwuzw commented Dec 18, 2024

[new architecture] onScrollEndDrag missing event property #42533

[new architecture] onScrollEndDrag missing event property #42533

Comments

mccraveiro commented Jan 21, 2024 • edited Loading

Description

Steps to reproduce

React Native Version

Affected Platforms

Areas

Output of npx react-native info

Stacktrace or Logs

Reproducer

Screenshots and Videos

github-actions bot commented Jan 21, 2024

cipolleschi commented Jan 24, 2024

LoKiLyn commented Dec 12, 2024

LoKiLyn commented Dec 12, 2024

zhongwuzw commented Dec 18, 2024

mccraveiro commented Jan 21, 2024 •

edited

Loading

Output of `npx react-native info`