Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Make animated components use different tags for events (#5960)
## Summary
Turns out the usual component tag (used for Layout Animations, Shared
Element Transitions and Animated Styles) won't always work for events if
the component with nested event emitters is made animated. Thus I am
splitting these two into different tag variables.
## Test plan
You can check out the following code (logs in console):
<details><summary>Code</summary>
``` TYPESCRIPT
import React from 'react';
import Animated, { useAnimatedScrollHandler } from 'react-native-reanimated';
import { StyleSheet, View, Text } from 'react-native';
import { FlashList } from '@shopify/flash-list';
const AnimatedFlashList = Animated.createAnimatedComponent(FlashList);
const data = new Array(45);
export default function EmptyApp() {
const scrollHandler = useAnimatedScrollHandler(
{
onBeginDrag: () => {
'worklet';
console.log('ON BEGIN DRAG');
},
onScroll: () => {
'worklet';
console.log('ON SCROLL');
},
onMomentumEnd: () => {
'worklet';
console.log('ON END');
},
},
[]
);
const renderFlashListItem = () => {
return <View style={styles.itemFlash} />;
};
const renderFlatListItem = () => {
return <View style={styles.itemFlat} />;
};
return (
<View style={styles.container}>
<View style={styles.listContainer}>
<Text>Animated FlashList</Text>
<AnimatedFlashList
onScroll={scrollHandler}
renderItem={renderFlashListItem}
data={data}
estimatedItemSize={40}
/>
</View>
<View style={styles.listContainer}>
<Text>Animated FlatList</Text>
<Animated.FlatList
onScroll={scrollHandler}
renderItem={renderFlatListItem}
data={data}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
},
listContainer: {
flex: 1,
flexDirection: 'column',
},
itemFlash: {
width: 20,
height: 20,
backgroundColor: 'red',
margin: 10,
},
itemFlat: {
width: 20,
height: 20,
backgroundColor: 'green',
margin: 10,
},
});
```
</details>
Current tests work on:
- [x] Paper
- [x] Fabric
- [x] Web- Loading branch information
1 parent
7c5500f
commit deb7825