From df50eee8e14b51bfcea9bc90e68a2cb46e68db82 Mon Sep 17 00:00:00 2001
From: Guilherme Iscaro <cabelitostos@gmail.com>
Date: Fri, 28 Jun 2019 01:22:17 -0700
Subject: [PATCH] Set collapse property before starting an animation that uses
 the native driver (#25361)

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: https://github.com/facebook/react-native/pull/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 https://github.com/facebook/react-native/issues/25318

Differential Revision: D15983822

Pulled By: cpojer

fbshipit-source-id: 1d790fbddc3103a2e34e114db956fa1fb465c1c9
---
 Libraries/Animated/src/createAnimatedComponent.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/Libraries/Animated/src/createAnimatedComponent.js b/Libraries/Animated/src/createAnimatedComponent.js
index d31a12976da..4aa1c6014d7 100644
--- 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}
         />
       );
     }