Set collapse property before starting an animation that uses the native driver (#25361)

cabelitos · facebook-github-bot · commit df50eee8e14b · 2019-06-28T01:29:53.000-07:00
Summary: Depending on the style props of an Animated.View it may be optimised away by the NativeViewHierarchyOptimizer, which will make the animation to fail, because the native view is virtual (it does not exists in the native view hierarchy). Although the createAnimatedComponent already sets the collapsable property based on the this._propsAnimated.__isNative flag, it won't work on all cases, since the __isNative flag is only set when one starts the animation. Which won't cause a re-render to occuor, thus not setting the collapsable property to false. In order to prevent this issue the HOC will just set the collapsable property to false. ## Changelog [Javascript] [Fixed] - Properly set collapsable to false before starting a nativeDriver animation Pull Request resolved: #25361 Test Plan: ### **Without this patch:** Run the following App on an Android device without this patch and click start. Outcome: The animation **will not** make the text invisible. ### **With this patch:** Run the following App on an Android device with this patch and click start. Outcome: The animation **will** make the text invisible. ```javascript import React, { Component, ReactNode } from 'react'; import { View, Text, TouchableOpacity, Animated, StyleSheet, Easing } from 'react-native'; interface Props { } const Constants = { animation: { duration: 500, }, }; const text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed orci erat. Suspendisse feugiat elit gravida elit consequat ultrices. Sed sollicitudin ullamcorper molestie. Mauris a diam neque. Vivamus in lectus.'; class App extends Component<Props> { anim: any; constructor(props: Props) { super(props); this.anim = new Animated.Value(0); } handleStartPress = () => { this.anim.setValue(0); console.log('start'); Animated.timing(this.anim, { duration: Constants.animation.duration, toValue: 1, easing: Easing.linear(), useNativeDriver: true, }).start(); }; render(): ReactNode { return ( <View style={styles.container}> <Animated.View style={{ opacity: this.anim.interpolate({ inputRange: [0, 1], outputRange: [1, 0], }), }}> <Text>{text}</Text> </Animated.View> <TouchableOpacity style={styles.startButton} onPress={this.handleStartPress}> <Text style={styles.startButtonText}>START</Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ container: { alignItems: 'center', backgroundColor: 'white', flex: 1, }, description: { marginTop: 20, paddingHorizontal: 10, }, startButton: { alignItems: 'center', aspectRatio: 1, backgroundColor: 'yellow', borderRadius: 100, height: 50, justifyContent: 'center', }, startButtonText: { fontSize: 10, fontWeight: 'bold', }, }); export default App; ``` Closes #25318 Differential Revision: D15983822 Pulled By: cpojer fbshipit-source-id: 1d790fbddc3103a2e34e114db956fa1fb465c1c9
diff --git a/Libraries/Animated/src/createAnimatedComponent.js b/Libraries/Animated/src/createAnimatedComponent.js
@@ -156,9 +156,7 @@ function createAnimatedComponent(Component: any, defaultProps: any): any {
           // have to make sure the view doesn't get optimized away because it cannot
           // go through the NativeViewHierarchyManager since it operates on the shadow
           // thread.
-          collapsable={
-            this._propsAnimated.__isNative ? false : props.collapsable
-          }
+          collapsable={false}
         />
       );
     }
