Comments (5)
@ngocle2497 Hello! This is a really interesting issue. Let me explain it:
In your example, setting a value of a SharedValue
is a asynchronous operation - its value change is scheduled and it takes around 1-2 frames to get the value on both threads. Meanwhile, you change the React state
immediately after it, expecting that the new render (caused by the changed state) will contain the new SharedValue
value - which isn't there because it is scheduled a little bit later.
Such situations can be nicely fixed by usage of react-native-gesture-handler
, which offers handling the gestures reactively and is fully integrated with Reanimated. I have re-written your example using it (keep in mind that your app needs to have a GestureHandlerRootView at its root for the gestures to work - see GH installation guide):
Fixed example code:
Code
import 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;
from react-native-reanimated.
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?
from react-native-reanimated.
@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
from react-native-reanimated.
RPReplay_Final1715636546.mp4
https://github.com/software-mansion/react-native-reanimated/assets/43195241/ddb4518e-547d-495c-a66c-9178c8cb8b36
I also use react navigation native stack
@szydlovsky can u open this issue by my video?
issue 1: Tab alert not active
Issue 2: swipeable cannot closeable
from react-native-reanimated.
@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:
- as I said previously, setting the
SharedValue
value is a scheduled, asynchronous operation - so any renders directly afterwards may not use the changed value. If the value is being changed as a result of some tap - then you can do it inreact-native-gesture-handler
gesture callback, which makes it run on UI thread and execute synchronously. - there is one more, a bit niche way to fix such stuff - you can wrap the value setting in Reanimated's
executeOnUIRuntimeSync
, which, as the name suggests, runs the value changing synchronously on UI thread - there is always a third way - if you would like us to take a peek into the code (assuming a sufficient NDA) you could contact us through our business contact form: https://swmansion.com/contact/projects
from react-native-reanimated.
Related Issues (20)
- debuggerWorker.js:69 TypeError: Cannot convert undefined or null to object HOT 7
- [docs] wrong internal link in docs HOT 2
- IllegalViewOperationException associated with ReanimatedUIManage on production crashlytics HOT 1
- useAnimatedKeyboard gives wrong values when prefersCrossFadeTransitions is turned on. HOT 1
- Overflow not working when using animated style (mobile browser only) HOT 2
- Android: ANR caused in ApplicationNotResponding 0.75.2 HOT 3
- build failled react reanimated 3.15.1 HOT 9
- error compiling on react-native-macos HOT 2
- ReanimatedError: Property 'window' doesn't exist, js engine: reanimated HOT 5
- React Native Reanimated is not compatible with React Native 0.76 HOT 2
- derivedValue nested object cannot be updated synchronously HOT 4
- Error: Unable to resolve module ./layoutReanimation HOT 4
- Failure in fabric expo HOT 6
- all react-native-reanimated version giving error on latest react nativev0.75.2 cli project HOT 4
- Reanimated doesn't compile with React Native macOS 0.75 HOT 11
- Errors when running with bridgeless mode on HOT 2
- Testflight and production crash on iOS devices HOT 10
- Error: Cannot find module 'react-native-reanimated/metro-config' HOT 13
- Shared value update in useEffect not reflected in view in v3 HOT 1
- Android crash on launch, Fatal signal 11 (SIGSEGV), code 1 (SEGV_MAPERR), fault addr 0x30 in tid 24002 (mqt_js), pid 23922 HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-reanimated.