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.
- react-native-reanimated
- react-native-linear-gradient
- react-native-redash
- react-native-gesture-handler
Animated Placehole supports two type of animation:
- Shine Overlay Animation
- Fade in Animation
Live Screenshot of App:
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.
|
1 |
npm install react-native-animated-placeholder --save |
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.
|
1 |
npm install react-native-reanimated --save |
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.
|
1 |
npm install react-native-linear-gradient --save |
Screenshot:
Screenshot after done installation:
4. Now we have to install react-native-redash NPM package.
|
1 |
npm install react-native-redash --save |
Screenshot:
Screenshot after done installation:
5. Now we have to install react-native-gesture-handler package as well.
|
1 |
npm install react-native-gesture-handler --save |
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.
|
1 |
cd android && gradlew clean |
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.
|
1 2 3 |
import React from 'react'; import { StyleSheet, View, Text, Dimensions } from 'react-native'; |
9. Import AnimatedPlaceholder from react-native-animated-placeholder package in your project.
|
1 |
import AnimatedPlaceholder from 'react-native-animated-placeholder'; |
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.
|
1 |
const { width } = Dimensions.get('window'); |
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:
- itemStyle: Used to set Style for Animated item.
- duration: Used to set animation duration.
- primaryColor: Used to set primary color of animation.
- secondaryColor: Used to set secondary color of animation.
- animationType: ‘overlay‘ and ‘fade‘ animation type.
|
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
export default function App() { return ( <View style={styles.MainContainer}> <Text style={styles.title}>Shine Overlay Animation</Text> <AnimatedPlaceholder itemStyle={styles.imagePlaceholder} /> <AnimatedPlaceholder itemStyle={styles.titlePlaceholder} /> <View style={styles.detailsContainer}> <AnimatedPlaceholder itemStyle={styles.authorImagePlaceholder} /> <AnimatedPlaceholder itemStyle={[ styles.infoPlaceholder, styles.otherStyle ]} /> <AnimatedPlaceholder itemStyle={styles.infoPlaceholder} /> </View> <Text style={styles.title}>Fade Animation</Text> <AnimatedPlaceholder itemStyle={styles.imagePlaceholder} animationType='fade' /> <AnimatedPlaceholder itemStyle={styles.titlePlaceholder} animationType='fade' /> <View style={styles.detailsContainer}> <AnimatedPlaceholder itemStyle={styles.authorImagePlaceholder} animationType='fade' /> <AnimatedPlaceholder itemStyle={[ styles.infoPlaceholder, styles.otherStyle ]} animationType='fade' /> <AnimatedPlaceholder itemStyle={styles.infoPlaceholder} animationType='fade' /> </View> </View> ) }; |
12. Creating Style.
|
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: width * 5 / 100 }, title: { fontWeight: 'bold', fontSize: 24, alignSelf: 'stretch', textAlign: 'left', marginVertical: width * 3 / 100 }, imagePlaceholder: { width: '100%', height: width * 40 / 100, // Height backgroundColor: '#E0E0E0', overflow: 'hidden', marginBottom: width * 3 / 100 }, titlePlaceholder: { width: '100%', height: width * 9 / 100, backgroundColor: '#E0E0E0', overflow: 'hidden' }, detailsContainer: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: width * 3 / 100 }, authorImagePlaceholder: { height: width * 9 / 100, width: width * 9 / 100, borderRadius: width * 5 / 100, overflow: 'hidden', backgroundColor: '#E0E0E0' }, infoPlaceholder: { flex: 1, height: width * 9 / 100, backgroundColor: '#E0E0E0', overflow: 'hidden' }, otherStyle: { marginHorizontal: width * 2.5 / 100 } }); |
13. Complete Source Code for App.js file class:
|
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
import React from 'react'; import { StyleSheet, View, Text, Dimensions } from 'react-native'; import AnimatedPlaceholder from 'react-native-animated-placeholder'; const { width } = Dimensions.get('window'); export default function App() { return ( <View style={styles.MainContainer}> <Text style={styles.title}>Shine Overlay Animation</Text> <AnimatedPlaceholder itemStyle={styles.imagePlaceholder} /> <AnimatedPlaceholder itemStyle={styles.titlePlaceholder} /> <View style={styles.detailsContainer}> <AnimatedPlaceholder itemStyle={styles.authorImagePlaceholder} /> <AnimatedPlaceholder itemStyle={[ styles.infoPlaceholder, styles.otherStyle ]} /> <AnimatedPlaceholder itemStyle={styles.infoPlaceholder} /> </View> <Text style={styles.title}>Fade Animation</Text> <AnimatedPlaceholder itemStyle={styles.imagePlaceholder} animationType='fade' /> <AnimatedPlaceholder itemStyle={styles.titlePlaceholder} animationType='fade' /> <View style={styles.detailsContainer}> <AnimatedPlaceholder itemStyle={styles.authorImagePlaceholder} animationType='fade' /> <AnimatedPlaceholder itemStyle={[ styles.infoPlaceholder, styles.otherStyle ]} animationType='fade' /> <AnimatedPlaceholder itemStyle={styles.infoPlaceholder} animationType='fade' /> </View> </View> ) }; const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: width * 5 / 100 }, title: { fontWeight: 'bold', fontSize: 24, alignSelf: 'stretch', textAlign: 'left', marginVertical: width * 3 / 100 }, imagePlaceholder: { width: '100%', height: width * 40 / 100, // Height backgroundColor: '#E0E0E0', overflow: 'hidden', marginBottom: width * 3 / 100 }, titlePlaceholder: { width: '100%', height: width * 9 / 100, backgroundColor: '#E0E0E0', overflow: 'hidden' }, detailsContainer: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: width * 3 / 100 }, authorImagePlaceholder: { height: width * 9 / 100, width: width * 9 / 100, borderRadius: width * 5 / 100, overflow: 'hidden', backgroundColor: '#E0E0E0' }, infoPlaceholder: { flex: 1, height: width * 9 / 100, backgroundColor: '#E0E0E0', overflow: 'hidden' }, otherStyle: { marginHorizontal: width * 2.5 / 100 } }); |
Screenshot:
