react-native: disable animations

user_5822695 0
Viewed 2491

We are using Animated and react-native-animatable quite heavily and starting to notice slowness on some old devices. All animations set useNativeDriver which makes us believe that we may have a few too many animations.

Is there a way to overwrite the Animated prototype to completely disable animations? I looked into this and it didn't seem simple.

Another option I'm considering is to leave my fade animations in but set the initial value in the constructor to the final value. This approach definitely doesn't show any animations but would it also bypass the animation in the native bridge as the value isn't changing?

class Item extends Component {
  constructor(props) {
    super(props);
    this.state = {
      opacity: 1 // Notice how this is set to 1
    }
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({opacity: 1})
    }, 1000)
  }


  render() {
    return (
      <Animatable.View style={{opacity}} easing='ease-in' transition='opacity' duration={500} useNativeDriver={true} />
    )
  }

}
react-native animation
1 Answers

Just create a wrapping component for it and use that instead of Animated.View

export default const AnimatedViewWrapper = (props) => {
   if (/* slow device check */) {
      return React.createElement(View, props)
   } else {
      return React.createElement(Animated.View, props)
   }
}

You might need to filter the props you receive because View does not have many of the props that Animated.View has. You can get them through View.propTypes. You might need to do this only if __DEV__ is true as propTypes are stripped out in production builds

Hoffmann_34850
Related