I'm having this issue on React-native 0.70 and 0.65, Android specifically. I can't work out if it's an issue with my setup or a bug in React and I can't find any other posts about it anywhere even though it's a pretty noticeable issue.
When using InteractionManager.runAfterInteractions() to delay tasks until an animation has finished, everything works as expected if useNativeDriver: false but if it is set to true the callback is run immediately after the animation is started.
It should be reproducible with the following code:
import React, { useRef } from "react";
import { Animated, Text, View, StyleSheet, Button, InteractionManager } from "react-native";
const App = () => {
const fadeAnim = useRef(new Animated.Value(0)).current;
const fadeIn = () => {
console.log('Starting fade in')
Animated.timing(fadeAnim, {
toValue: 1,
duration: 10000,
useNativeDriver: true // <--- InteractionManager.runAfterInteractions only works when set to false.
}).start();
const task = InteractionManager.runAfterInteractions(() =>
{
console.log('This should run after the animation has finished fading.')
})
};
return (
<View style={styles.container}>
<Animated.View
style={[
styles.fadingContainer,
{
opacity: fadeAnim
}
]}
>
<Text style={styles.fadingText}>Fading View!</Text>
</Animated.View>
<View style={styles.buttonRow}>
<Button title="Fade In View" onPress={fadeIn} />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center"
},
fadingContainer: {
padding: 20,
backgroundColor: "powderblue"
},
fadingText: {
fontSize: 28
},
buttonRow: {
flexBasis: 100,
justifyContent: "space-evenly",
marginVertical: 16
}
});
export default App;
I would appreciate any advice or if anyone could tell me if they encounter the same issue or not (indicating it's a problem with my setup). Thanks.