React-Native: InteractionsManager not waiting for animations to finish before firing only when useNativeDriver=true

Viewed 27

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.

0 Answers
Related