Make Effective UI With React-Animation

Animations are very important to bind the user to the application. Numerous developers like me always want to make an adaptable interface so that users can spend more time. Animation endorses us to provide a richer and better user interface which helps us to bring more users.

If you are looking forward to adding animations to your project you are at the right place to start.

Let’s start diving into it.

Animated API

React Native presents Animated API to inject animation within the application. The Animated API allows us to create attractive animation with more traits to provide interactive animation decently.

Animated API supports two value :

1. Animated.ValueXY() : Take’s vector value to animate.
2. Animated.Value() : Take’s single value to animate.

Animated.ValueXY :

We are going with a completely simple case to move the target on the screen. To move the target on the screen we required various values in the sets of X and Y (Initial and Final Values).

In the first place, we have to provide the initial value to place the target in the perfect spot. From that point onward, we have to add another set of values that indicates at which point we have to place the target at the final stage. Once you perform the start()method of animation object the target starts moving from initial values to final values.

Let’s understand with an example :

1. First, import and create an object of animated property.

import {Animated} from ‘react-native’
const [squarePosition, setSquarePosition] = useState(new  Animated.ValueXY(0, 0));

Define the initial position of view.

2. Wrap the view with <Animated.View>.

<Animated.View style={{
   left: squarePosition.x,
   top: squarePosition.y }}>
     <View style={styles.square}>
        <Text onPress={() => startAnimation()}>Hit Me</Text>
     </View>
</Animated.View>

In Javascript, the CSS and HTML code handle the animation. In react-native, the style property of the animated view is handling the animation in native.

You can also use <Animated.View style={squarePosition.getLayout()}> instead of setting the left and top of the animated view.

3. Creating an object and start the animation.

const startAnimation = () => {
  Animated.spring(squarePosition, {toValue: {x: 0, y: 0}}).start();
 }

We are using the spring method to animate the view. It will take two values, The first is an object on which we have to operate and the second one is an object with all the SpringAnimationConfig. Start and Stop are two methods to start and stop the animation.

Moving Animation

Animated.Value :

As we see in the above example the Animated.ValueXY works with a set of values. But what if we need to change only one attribute. Don’t hesitate yourself because the react-native provides another API to accomplish it.

We are going with a completely simple case to change the opacity of the target. How about we take a situation, we have to hide the target view after some time of period. For that, we have to take an object and change the value concerning the target opacity and time.

Let’s understand with an example :

1. You have to create the object of animation property.

import {Animated} from ‘react-native’
 const [opacity, setOpacity] = useState(new Animated.Value(1));

2. Wrap the view with <Animated.View>.

<>
  <Animated.View style={{opacity: opacity}}>
    <View style={styles.square}/>
  </Animated.View>
 
  {startAnimation()}
</>

3. Creating an object and start the animation.

const startAnimation = () => {
    Animated.timing(opacity, {
      toValue: 0,
      duration: 2000,
    }).start();
};

Hide/Show Animation

I keep exploring new things in react-native. By the time keep learning!