Set collapse property before starting an animation that uses the nati…

…ve 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: #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

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}
         />
       );
     }