Hello friends, We’re back again with one of the most popular NPM package of react native. In today’s tutorial we would learn about React Native Animatable NPM package of react native. This package contains almost a hundred animation types for your components. You can apply all these animation on any component like Text, Image and Buttons and Views also. So today we would simply learn about How we can install React Native Animatable package in our react native project and apply a simple Text bouncing animation. You can learn more about HERE about this package. So let’s get started  .

Live Screenshot :-

Contents in this project React Native Animatable – Text Bouncing Animation Example :-

1. To install the React Native Animatable NPM package we have to open our current RN project root directory in CMD in windows and Terminal in MAC and execute below command.

1	npm install react-native-animatable --save

React Native Animatable – Text Bouncing Animation Example 

Hello friends, We’re back again with one of the most popular NPM package of react native. In today’s tutorial we would learn about React Native Animatable NPM package of react native. This package contains almost a hundred animation types for your components. You can apply all these animation on any component like Text, Image and Buttons and Views also. So today we would simply learn about How we can install React Native Animatable package in our react native project and apply a simple Text bouncing animation. You can learn more about HERE about this package. So let’s get started  .

Live Screenshot :-

Contents in this project React Native Animatable – Text Bouncing Animation Example :-

1. To install the React Native Animatable NPM package we have to open our current RN project root directory in CMD in windows and Terminal in MAC and execute below command.

1	npm install react-native-animatable --save

2. Now after done installing we don’t have to execute any step. All we have to do is start coding for the app. So open your project’s main App.js file and import StyleSheet and SafeAreaView component.

1 2 3

import React from 'react';   import { StyleSheet, SafeAreaView } from 'react-native';

3. Importing Animatable component from ‘react-native-animatable’.

1	import * as Animatable from 'react-native-animatable';

4. Creating our main App component.

1 2 3 4 5

export default function App() {       }

5. Creating return() block, Now here we would make <Animatable.Text /> component. This component will allow us to apply different-different type of animation on Text.

1 2 3 4 5 6 7

<Animatable.Text         animation="slideInDown"         iterationCount="infinite"         direction="alternate"         style={styleSheet.text}>         Text Up Down With Animation       </Animatable.Text>

6. Creating Style.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

const styleSheet = StyleSheet.create({   MainContainer: {     flex: 1,     justifyContent: 'center',     alignItems: 'center'   },     text: {     fontSize: 24,     fontWeight: 'bold',     color: 'red'   }   });

7. Complete source code for App.js File :-

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

import React from 'react';   import { StyleSheet, SafeAreaView } from 'react-native';   import * as Animatable from 'react-native-animatable';   export default function App() {     return (     <SafeAreaView style={styleSheet.MainContainer}>         <Animatable.Text         animation="slideInDown"         iterationCount="infinite"         direction="alternate"         style={styleSheet.text}>         Text Up Down With Animation       </Animatable.Text>       </SafeAreaView>   ); }   const styleSheet = StyleSheet.create({   MainContainer: {     flex: 1,     justifyContent: 'center',     alignItems: 'center'   },     text: {     fontSize: 24,     fontWeight: 'bold',     color: 'red'   }   });

Live Screenshot :-