React Native TranslateY Position Animation Android iOS Tutorial

TranslateY animation property style is used to move views in vertical Axis. Here if you enter animation toValue in + Plus then it will move views top to bottom. If we would pass toValue in – Minus then it will move view from bottom to top again. So in this tutorial we would move object view from top to bottom using TranslateY Position Animation Android iOS Tutorial.

Contents in this project TranslateY Position Animation Android iOS Tutorial:

1. Import StyleSheet, View, TouchableWithoutFeedback and Animated component in your project’s App.js file.

2. Create our main export default class named as App. This is our main layout class.

3. Create constructor() in your App class. Here we would Create a State named as animation using Animated.value(0). We would use this animation variable to set its initial value to Zero. So when app start it will not start the animation.

4. Create a function named as startAnimation() in App class. We would call this function TouchableWithoutFeedback component onPress event.

  • toValue : Set the moving value.
  • duration : To set the time of animation in milliseconds.

5. Create a constant named as transformStyle in render’s block. We would define translateY value here. Using this we would define Style value.

6. Create a TouchableWithoutFeedback component in render’s return block with Animated.View component.

7. Creating style.

8. Complete Source Code for App.js file class.

Screenshots:

React Native TranslateY Position Animation Android iOS Tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *