How to animate object by pressing button on react native

Here is an example of how to animate an object in React Native by pressing a button:

1.First, import the necessary libraries, including React, View, StyleSheet, Text, Button, Animated.

import React, { useState } from 'react';
import { View, StyleSheet, Text, Button, Animated } from 'react-native';

2.define your app name:

const MyComponent = () => {

3. Create a new Animated.Value object to represent the position or transformation of the object you want to animate. For example, to animate the position of a view along the x-axis, you can create an Animated.Value object like this:

const [animatedValue] = useState(new Animated.Value(0));

4.Define a function to animate the object. For example, to animate the view from its initial position to a position 200 units to the right, you can use the Animated.timing function like this:

const startAnimation = () => {
    Animated.timing(animatedValue, {
      toValue: 200,
      duration: 500,
      useNativeDriver: true,
    }).start();
  };

5. define style for the animation:

const animatedStyle = {
    transform: [
      { translateX: animatedValue },
    ],
  };

6.Use the Animated.View component to wrap the object you want to animate, and bind the animation value to the appropriate style property using the Animated.event and Animated.style functions. For example, to animate the position of a view along the x-axis, you can use the Animated.style function like this:

return (

    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Animated.View style={[animatedStyle, { width: 50, height: 50, backgroundColor: 'blue' }]} />
      <Button title="Animate" onPress={startAnimation} />
    </View>
  );

 

This will apply the animation Value to the translateX style property of the view, causing it to move along the x-axis

Here is the complete code example:

import React, { useState } from 'react';
import { View, StyleSheet, Text, Button, Animated } from 'react-native';

const MyComponent = () => {
  const [animatedValue] = useState(new Animated.Value(0));

  const startAnimation = () => {
    Animated.timing(animatedValue, {
      toValue: 200,
      duration: 500,
      useNativeDriver: true,
    }).start();
  };

  const animatedStyle = {
    transform: [
      { translateX: animatedValue },
    ],
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Animated.View style={[animatedStyle, { width: 50, height: 50, backgroundColor: 'blue' }]} />
      <Button title="Animate" onPress={startAnimation} />
    </View>
  );
};

export default MyComponent;

Animate an object in React Native by pressing a button

This will create a button that, when pressed, animates a red square from its initial position to a position 200 units to the right over the course of 500 milliseconds.