How to use react-native-animatable package

 How to use react-native-animatable package in android react native app

Hello there, Here you will find the very easy process of implementation of react-native-animatable package. Hope you guys are very well, So let's get started. 

 

 

Step 1: Set up your React Native project Create a new React Native project or navigate to your existing project directory.

Step 2: Install the react-native-animatable package Install the react-native-animatable package by running the following command:

npm install react-native-animatable

Step 3: Import necessary components and functions Import the required components and functions from the react-native-animatable library at the top of your React Native component file.

import React from 'react';
import { View, Text } from 'react-native';
import * as Animatable from 'react-native-animatable';

Step 4: Use the Animatable component for animations Replace the desired component with the Animatable.View component or any other Animatable component provided by the library.

<View style={styles.container}>
  <Animatable.View animation="fadeIn" style={styles.box}>
    {/* Your animated component */}
  </Animatable.View>
</View>

Step 5: Apply animation props Apply the animation props to the Animatable component to define the desired animation effect. For example, you can use the animation prop to specify the animation type, such as "fadeIn", "zoomIn", "bounce", etc.

<Animatable.View 
    animation="fadeIn" 
    duration={1000} 
    delay={500}
    style={styles.box}
>
  {/* Your animated component */}
</Animatable.View>

Step 6: Customize animation props and options Customize the animation props and options according to your requirements. You can adjust the duration (in milliseconds), delay, and other props to control the animation timing and effects.

<Animatable.View animation="fadeIn" duration={1000} delay={500} easing="ease-out" iterationCount="infinite" style={styles.box}>
  {/* Your animated component */}
</Animatable.View>

Step 7: Apply styles and run the app Define styles for your component and run the app to see the animation in action.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 200,
    height: 200,
    backgroundColor: 'red',
  },
});

These steps provide a basic outline for using the react-native-animatable library for animations in React Native. You can explore the extensive range of animation types, props, and options offered by the library to create engaging and dynamic animations in your app.

Remember to import the necessary components, use the Animatable components, apply animation props, customize animation options, and style your components accordingly.

 

Complete Example:

import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import * as Animatable from 'react-native-animatable';

const App = () => {
  const handleAnimation = () => {
    this.animatableRef.fadeOut(); // Trigger the "fadeOut" animation
  };

  return (
    <View style={styles.container}>
      <Animatable.View
        ref={(ref) => (this.animatableRef = ref)}
        animation="fadeIn"
        duration={1000}
        style={styles.box}
      >
        <Text style={styles.text}>Hello, Animatable!</Text>
      </Animatable.View>
      
      <TouchableOpacity onPress={handleAnimation} style={styles.button}>
        <Text style={styles.buttonText}>Fade Out</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 200,
    height: 200,
    backgroundColor: 'red',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: 'white',
    fontSize: 20,
    fontWeight: 'bold',
  },
  button: {
    backgroundColor: 'blue',
    padding: 10,
    marginTop: 20,
  },
  buttonText: {
    color: 'white',
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

export default App;

Thank you

Happy Codding.