Response-native: disable animation
We use Animated
and react-native-animatable
are starting to notice slowness on some older devices. All of the animations set useNativeDriver
make us think we might have multiple animations.
Is there a way to overwrite the prototype Animated
to turn off the animation entirely? I looked into this and it didn't seem easy.
Another option I'm considering is to keep my fade animations, but set the start value to constructor
before the end value. This approach definitely doesn't show animation, but does it also bypass animation on its own bridge since the value doesn't change?
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} />
)
}
}
source to share
Just create a wrapping component for it and use Animated.View instead
export default const AnimatedViewWrapper = (props) => {
if (/* slow device check */) {
return React.createElement(View, props)
} else {
return React.createElement(Animated.View, props)
}
}
You may need to filter out the details you get because it View
doesn't have many of the details it Animated.View
does. You can get them through View.propTypes. You may only need to do this if __DEV__
true, as propTypes are deprived in production builds
source to share