-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Android-IOS] [3.11.0] Animation update incorrect when setState after set shared value #6002
Comments
Hey! 👋 The issue doesn't seem to contain a minimal reproduction. Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem? |
@ngocle2497 Hello! This is a really interesting issue. Let me explain it: Fixed example code: Codeimport React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Animated, {
SharedValue,
useAnimatedStyle,
useSharedValue,
runOnJS,
} from 'react-native-reanimated';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
const Item = ({
position,
index,
}: {
position: SharedValue<number>;
index: number;
}) => {
const style = useAnimatedStyle(() => {
return {
backgroundColor: position.value === index ? '#3498db' : 'transparent',
borderBottomColor: position.value === index ? '#3498db' : 'transparent',
};
});
return (
<View style={styles.item}>
<Animated.View style={[StyleSheet.absoluteFillObject, style]} />
<Text>Item: {index}</Text>
</View>
);
};
const App = () => {
const position = useSharedValue(0);
const [selectedIndex, setSelectedIndex] = useState<number>(position.value);
const renderItem = (item: number) => {
const tap = Gesture.Tap().onEnd(() => {
position.value = item;
runOnJS(setSelectedIndex)(item);
});
return (
<GestureDetector gesture={tap}>
<Item position={position} key={item} index={item} />
</GestureDetector>
);
};
useEffect(() => {
// TODO: call api or some effect
}, [selectedIndex]);
return (
<View style={styles.container}>
<View style={styles.rowItem}>{[0, 1, 2, 3, 4, 5].map(renderItem)}</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
rowItem: {
flexDirection: 'row',
columnGap: 4,
width: '100%',
height: 100,
},
item: {
height: 100,
width: 50,
borderBottomWidth: 2,
borderColor: 'transparent',
overflow: 'hidden',
},
});
export default App; |
@szydlovsky thank for explain. I discovered this issue when running the project on production environment. Actually, it's not just an example, the example just describes how to make an error. in my project i have 1 swipeable list. When entering a menu in a swipeable section, I also use a gesture handler (tap gesture) to close the swipeable action after switching screens. And you know, when switching screens, setstate happens very often (turn on loading, update data,...). that is swipeable and not closeable. I will upload a video of my today's production project around today (GMT +7). Hope you can fix this error for me. Thank |
RPReplay_Final1715636546.mp4https://github.com/software-mansion/react-native-reanimated/assets/43195241/ddb4518e-547d-495c-a66c-9178c8cb8b36 |
@ngocle2497 Hi again. Unfortunately, the example video is not enough te re-open the issue. I know that we cannot access the source code, because it is a private company project, but that leaves us with only guessing what could be wrong. You can try making a more complex repro out of it and posting it here - then I will reopen the issue. Other than that, I can give you some tips to check in your code:
|
Description
When i call setState after update reanimated value, animated view update incorrect
Reanimared 3.8.1 work correctly for both android and ios
Case 1: use useAnimatedStyle -> Animated view stuck on multiple view
Case 2: use inline style -> Animated view delay update
Screen.Recording.2024-05-10.at.11.27.24.online-video-cutter.com.mp4
Screen.Recording.2024-05-10.at.11.14.36.online-video-cutter.com.1.mp4
Steps to reproduce
Run your app
Snack or a link to a repository
See my code below
Reanimated version
3.11.0
React Native version
0.73.8
Platforms
Android, iOS
JavaScript runtime
Hermes
Workflow
React Native
Architecture
Paper (Old Architecture)
Build type
Debug app & dev bundle
Device
iOS simulator
Device model
Iphone 15 Pro Max
Acknowledgements
Yes
The text was updated successfully, but these errors were encountered: