2

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

Mahdi
  • 1,355
  • 1
  • 12
  • 28

1 Answers1

5
Animated.spring(this.moveAnimation, {
      toValue: {x:0, y: 0},
      speed: 5,
  useNativeDriver: true, // <-- Add this
    }).start()
Redmen Ishab
  • 2,199
  • 18
  • 22
  • I tried this way before but i got this error : `Unhandled JS Exception: Error: Style property 'left' is not supported by native animated module` – Mahdi Feb 04 '19 at 18:46
  • 2
    Hey the solution to your question for slow animation is to use native driver. and in response to the error you are getting is fixed by using translateX and translateY instead of left and top. Hope it helps – Redmen Ishab Feb 04 '19 at 19:00