Search code examples
reactjsreact-nativereact-native-animatable

My Animated component doesn't run smoothly in react native


I am trying to add animation to my react native app. But it doesn't play smoothly on Android and IOS What should i do to solve this problem

I already tried to run animation with Animated component. My react-native version is "0.57.8" And here is my code :

export default class MainPage extends Component{

    constructor(props) {
        super(props)
        this.moveAnimation = new Animated.ValueXY({ x: 0, y: 0})
    }
    _openCardContainer = () => {
        Animated.spring(this.moveAnimation, {
          toValue: {x:0, y: 0},
          speed: 5,
        }).start()
    }
    render() {
        return(
            <Animated.View style={this.moveAnimation.getLayout()}>
              <EditorChoiceContainer/>
            </Animated.View>
        )
    }
}

This code works correctly but it is not smooth and very laggy

Please Help me solve this problem


Solution

  • Animated.spring(this.moveAnimation, {
          toValue: {x:0, y: 0},
          speed: 5,
      useNativeDriver: true, // <-- Add this
        }).start()