Fix attaching a scroll event if the scrollable component is not the root view #3988
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
tomekzaw
changed the title
piaskowyk
approved these changes
Jan 21, 2023
tomekzaw
added a commit
that referenced
this pull request
Apr 21, 2023
## Summary Fixes #4376. Analogous to #3988. Solution: copy the code from `createAnimatedComponent.tsx` to `useAnimatedRef.ts` https://github.com/software-mansion/react-native-reanimated/blob/87fb9c6a1fb6b8c839b65b90ad16f574f45a1294/src/createAnimatedComponent.tsx#L289-L291 Example: <details> <summary>App.tsx</summary> ```tsx import Animated, { runOnUI, scrollTo, useAnimatedRef, } from 'react-native-reanimated'; import {Button, StyleSheet, Switch, Text, View} from 'react-native'; import {FlashList} from '@shopify/flash-list'; import React from 'react'; declare const _WORKLET: boolean; const AnimatedFlashList = Animated.createAnimatedComponent(FlashList); interface Item { label: string; } const DATA: Item[] = [...Array(100)].map((_, i) => ({label: String(i)})); function getRandomOffset() { 'worklet'; return Math.random() * 2000; } export default function ScrollToExample() { const [animated, setAnimated] = React.useState(true); const aref = useAnimatedRef<FlashList<Item>>(); const scrollFromJS = () => { console.log(_WORKLET); aref.current?.scrollToOffset({offset: getRandomOffset(), animated}); }; const scrollFromUI = () => { runOnUI(() => { 'worklet'; console.log(_WORKLET); scrollTo(aref, 0, getRandomOffset(), animated); })(); }; return ( <> <View style={styles.buttons}> <Switch value={animated} onValueChange={setAnimated} style={styles.switch} /> <Button onPress={scrollFromJS} title="Scroll from JS" /> <Button onPress={scrollFromUI} title="Scroll from UI" /> </View> <AnimatedFlashList // @ts-ignore createAnimatedComponent seems to break generic types ref={aref} data={DATA} // @ts-ignore createAnimatedComponent seems to break generic types renderItem={({item}: {item: Item}) => ( <Text key={item.label} style={styles.text}> {item.label} </Text> )} estimatedItemSize={200} /> </> ); } const styles = StyleSheet.create({ switch: { marginBottom: 10, }, buttons: { marginTop: 80, marginBottom: 40, alignItems: 'center', }, text: { fontSize: 50, textAlign: 'center', }, }); ``` </details> Before: <img src="https://user-images.githubusercontent.com/20516055/233323545-427cc3d4-4479-4b02-a24b-5a3039fb3105.png" width="300" /> Android: https://user-images.githubusercontent.com/20516055/233322746-637fa2a9-0e93-40ac-baa8-c3c3d2449867.mp4 iOS: https://user-images.githubusercontent.com/20516055/233322714-20c03ade-1f15-4d76-8a5e-b4b59ebe8a73.mp4 ## Test plan 1. Install FlashList in Example app with `yarn add @shopify/flash-list && cd ios && pod install` 2. Paste the attached code snippet into App.tsx > **Warning** > It looks like animated refs don't update properly on render. In this case, pressing "Scroll from UI" button after a fast refresh does nothing. Please reload the <kbd>r</kbd> to reload the app and check again.
fluiddot
pushed a commit
to wordpress-mobile/react-native-reanimated
that referenced
this pull request
Jun 5, 2023
…oot view (software-mansion#3988) <!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please follow the template so that the reviewers can easily understand what the code changes affect. --> ## Summary Fixes software-mansion#3873 `getScrollableNode()` works not only on FlashLists, but also on RN scrollable components (ScrollView, Flatlist). It's brought back from [there](software-mansion@5829e95#diff-fdad18d3281131f92aa76c0969f84d27f2314251842763fedbc756df07b1eab7L234) ## Test plan <!-- Provide a minimal but complete code snippet that can be used to test out this change along with instructions how to run it and a description of the expected behavior. --> - tested on the repro from the issue (https://github.com/diogoquintas/reanimated-scroll-issue) - tested on several examples from the example app (examples related to scroll events and events in general for example chat heads) - tested on FlashList
fluiddot
pushed a commit
to wordpress-mobile/react-native-reanimated
that referenced
this pull request
Jun 5, 2023
## Summary Fixes software-mansion#4376. Analogous to software-mansion#3988. Solution: copy the code from `createAnimatedComponent.tsx` to `useAnimatedRef.ts` https://github.com/software-mansion/react-native-reanimated/blob/87fb9c6a1fb6b8c839b65b90ad16f574f45a1294/src/createAnimatedComponent.tsx#L289-L291 Example: <details> <summary>App.tsx</summary> ```tsx import Animated, { runOnUI, scrollTo, useAnimatedRef, } from 'react-native-reanimated'; import {Button, StyleSheet, Switch, Text, View} from 'react-native'; import {FlashList} from '@shopify/flash-list'; import React from 'react'; declare const _WORKLET: boolean; const AnimatedFlashList = Animated.createAnimatedComponent(FlashList); interface Item { label: string; } const DATA: Item[] = [...Array(100)].map((_, i) => ({label: String(i)})); function getRandomOffset() { 'worklet'; return Math.random() * 2000; } export default function ScrollToExample() { const [animated, setAnimated] = React.useState(true); const aref = useAnimatedRef<FlashList<Item>>(); const scrollFromJS = () => { console.log(_WORKLET); aref.current?.scrollToOffset({offset: getRandomOffset(), animated}); }; const scrollFromUI = () => { runOnUI(() => { 'worklet'; console.log(_WORKLET); scrollTo(aref, 0, getRandomOffset(), animated); })(); }; return ( <> <View style={styles.buttons}> <Switch value={animated} onValueChange={setAnimated} style={styles.switch} /> <Button onPress={scrollFromJS} title="Scroll from JS" /> <Button onPress={scrollFromUI} title="Scroll from UI" /> </View> <AnimatedFlashList // @ts-ignore createAnimatedComponent seems to break generic types ref={aref} data={DATA} // @ts-ignore createAnimatedComponent seems to break generic types renderItem={({item}: {item: Item}) => ( <Text key={item.label} style={styles.text}> {item.label} </Text> )} estimatedItemSize={200} /> </> ); } const styles = StyleSheet.create({ switch: { marginBottom: 10, }, buttons: { marginTop: 80, marginBottom: 40, alignItems: 'center', }, text: { fontSize: 50, textAlign: 'center', }, }); ``` </details> Before: <img src="https://user-images.githubusercontent.com/20516055/233323545-427cc3d4-4479-4b02-a24b-5a3039fb3105.png" width="300" /> Android: https://user-images.githubusercontent.com/20516055/233322746-637fa2a9-0e93-40ac-baa8-c3c3d2449867.mp4 iOS: https://user-images.githubusercontent.com/20516055/233322714-20c03ade-1f15-4d76-8a5e-b4b59ebe8a73.mp4 ## Test plan 1. Install FlashList in Example app with `yarn add @shopify/flash-list && cd ios && pod install` 2. Paste the attached code snippet into App.tsx > **Warning** > It looks like animated refs don't update properly on render. In this case, pressing "Scroll from UI" button after a fast refresh does nothing. Please reload the <kbd>r</kbd> to reload the app and check again.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Fixes #3873
getScrollableNode()works not only on FlashLists, but also on RN scrollable components (ScrollView, Flatlist). It's brought back from thereTest plan