react native Animated.spring doesn't work smoothly

Question

i'am using react native animated API to make a smooth transition from left to right position. this is my initial state

constructor(props) {
        super(props);
        this.state = {
            isDrawerOpened: false,
            left: new Animated.Value(-100)
        };
        this.setDrawer = this.setDrawer.bind(this);
    }

its still working fine when componentDidMount has called

componentDidMount() {
        Animated.spring(this.state.left, {toValue: 200}).start();
    }

But when i'am using event to change the state (also starting animation). The transition become rough (not smooth). This is my event code

setDrawer() {
        this.setState({
            isDrawerOpened: !this.state.isDrawerOpened
        });

        if (this.state.isDrawerOpened) {
            this.setState({
                left: new Animated.Value(200)
            });
            Animated.spring(this.state.left, {toValue: -100, speed: 1000}).start();
        } else {
            this.setState({
                left: new Animated.Value(-100)
            });
            Animated.spring(this.state.left, {toValue: 200, speed: 1000}).start();
        }
    }

can anyone solve this :( , sorry for my bad english

Answer 1

Try going for useNativeDriver: true. Your animations are now run in the JS thread and might be blocked by other stuff going on in your JS code. This will move animations to the UI thread.

See docs for reference.