React Native Animated Placeholder – Android iOS Example

Hello Guys, I’m back with a new tutorial in react native. In today’s tutorial we would learn about something new in react native. My friend ‘Pankaj Sood’ have just released a new amazing Animated Placeholder library for react native developers on NPM as well as on GitHub. As we all have seen placeholder is used to show when user loads data from server. In between data loading time, placeholders are used to show some loading screen to get user attention. So in this tutorial we would learn about React Native Animated Placeholder Android iOS Example. Using the React Native Animated Placeholder we can show placeholder for Images also.

The animated material style placeholder is based on 4 different libraries. So we have to install all of them as well.

  1. react-native-reanimated
  2. react-native-linear-gradient
  3. react-native-redash
  4. react-native-gesture-handler

Animated Placehole supports two type of animation:

  1. Shine Overlay Animation
  2. Fade in Animation

Live Screenshot of App:

React Native Animated Placeholder

Contents in this project React Native Animated Placeholder – Android iOS Example:

1. The first step is to download and install React Native Animated Placeholder package in your react native project. So open your react native project Root directory in Command Prompt or Terminal and execute below command.

Screenshots:

Screenshot after done installation:

2. Now we need to install react-native-reanimated NPM package in our current project. So execute below command in your react native project Root directory.

Screenshot:

Screenshot after done installation:

3. Next step is to install react-native-linear-gradient library in our react native project. Follow the same step as we did in above step and execute below command.

Screenshot:

Screenshot after done installation:

4. Now we have to install react-native-redash NPM package.

Screenshot:

Screenshot after done installation:

5. Now we have to install react-native-gesture-handler package as well.

Screenshot:

Screenshot after done installation:

6. In the final step we have to sync our Android Gradlew. So we have to clean previously generated Gradlew fine. To clean gradlew open your react native project Root director and execute below command.

Screenshot:

Screenshot after cleaning Gradlew :

7. Now your project is ready to start coding. But make sure you use the cd command to navigate again your react native project Root directory. Or you can simply close the Terminal and open again in Root Dir.

8. Open your project’s main App.js file and import StyleSheet, View, Text and Dimensions component.

9. Import AnimatedPlaceholder from react-native-animated-placeholder package in your project.

10. Creating a Constant named as width. We would use Dimensions API here to get the screen width and set the placeholder according to screen width.

11. Creating our main export default functional component named as App. Here we would make our All type of Animated Placeholder. We would use different styling option to customize it in different shapes.

Supported Props:

  1. itemStyle: Used to set Style for Animated item.
  2. duration: Used to set animation duration.
  3. primaryColor: Used to set primary color of animation.
  4. secondaryColor: Used to set secondary color of animation.
  5. animationType: ‘overlay‘ and  ‘fade‘ animation type.

12. Creating Style.

13. Complete Source Code for App.js file class:

Screenshot:

React Native Animated Placeholder

Leave a Reply

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