react-native

mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00

Files

T

Guilherme Iscaro df50eee8e1 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

2019-06-28 01:29:53 -07:00

ActionSheetIOS

Migrate "Libraries" from Haste to standard path-based requires (sans vendor & renderers) (#24749 )

2019-05-08 08:48:59 -07:00

Alert

Re-land "[RN] TM: attempt to integrate with internal codegen infra""

2019-06-11 17:11:58 -07:00

Animated

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

2019-06-28 01:29:53 -07:00

AppState

Feature to listen on window focus events (#25039 )