React Native Animated Placeholder

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.

<br />
npm install react-native-animated-placeholder –save

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.

<br />
npm install react-native-reanimated –save

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.

<br />
npm install react-native-linear-gradient –save

1	npm install react–native–linear–gradient —save

Screenshot:

Screenshot after done installation:

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

<br />
npm install react-native-redash –save

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.

<br />
npm install react-native-gesture-handler –save

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.

<br />
cd android && gradlew clean

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.

<br />
import React from ‘react’;</p>
<p>import { StyleSheet, View, Text, Dimensions } from ‘react-native’;

import React from ‘react’;

import { StyleSheet, View, Text, Dimensions } from ‘react-native’;

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

<br />
import AnimatedPlaceholder from ‘react-native-animated-placeholder’;

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.

<br />
const { width } = Dimensions.get(‘window’);

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.

<br />
export default function App() {<br />
    return (<br />
        <View style={styles.MainContainer}><br />
            <Text style={styles.title}>Shine Overlay Animation</Text><br />
            <AnimatedPlaceholder<br />
                itemStyle={styles.imagePlaceholder}<br />
            /></p>
<p>            <AnimatedPlaceholder<br />
                itemStyle={styles.titlePlaceholder}<br />
            /></p>
<p>            <View style={styles.detailsContainer}><br />
                <AnimatedPlaceholder<br />
                    itemStyle={styles.authorImagePlaceholder}<br />
                /></p>
<p>                <AnimatedPlaceholder<br />
                    itemStyle={[<br />
                        styles.infoPlaceholder,<br />
                        styles.otherStyle<br />
                    ]}<br />
                /></p>
<p>                <AnimatedPlaceholder<br />
                    itemStyle={styles.infoPlaceholder}<br />
                /><br />
            </View></p>
<p>            <Text style={styles.title}>Fade Animation</Text><br />
            <AnimatedPlaceholder<br />
                itemStyle={styles.imagePlaceholder}<br />
                animationType=’fade’<br />
            /></p>
<p>            <AnimatedPlaceholder<br />
                itemStyle={styles.titlePlaceholder}<br />
                animationType=’fade’<br />
            /></p>
<p>            <View style={styles.detailsContainer}><br />
                <AnimatedPlaceholder<br />
                    itemStyle={styles.authorImagePlaceholder}<br />
                    animationType=’fade’<br />
                /></p>
<p>                <AnimatedPlaceholder<br />
                    itemStyle={[<br />
                        styles.infoPlaceholder,<br />
                        styles.otherStyle<br />
                    ]}<br />
                    animationType=’fade’<br />
                /></p>
<p>                <AnimatedPlaceholder<br />
                    itemStyle={styles.infoPlaceholder}<br />
                    animationType=’fade’<br />
                /><br />
            </View><br />
        </View><br />
    )<br />
};

export default function App() {

return (

<Text style={styles.title}>Shine Overlay Animation</Text>

<AnimatedPlaceholder

itemStyle={styles.imagePlaceholder}

<AnimatedPlaceholder

itemStyle={styles.titlePlaceholder}

<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’

<AnimatedPlaceholder

itemStyle={styles.authorImagePlaceholder}

animationType=‘fade’

<AnimatedPlaceholder

itemStyle={[

styles.infoPlaceholder,

styles.otherStyle

]}

animationType=‘fade’

<AnimatedPlaceholder

itemStyle={styles.infoPlaceholder}

animationType=‘fade’

</View>

)

};

12. Creating Style.

<br />
const styles = StyleSheet.create({<br />
    MainContainer: {<br />
        flex: 1,<br />
        justifyContent: ‘center’,<br />
        alignItems: ‘center’,<br />
        paddingHorizontal: width * 5 / 100<br />
    },</p>
<p>    title: {<br />
        fontWeight: ‘bold’,<br />
        fontSize: 24,<br />
        alignSelf: ‘stretch’,<br />
        textAlign: ‘left’,<br />
        marginVertical: width * 3 / 100<br />
    },</p>
<p>    imagePlaceholder: {<br />
        width: ‘100%’,<br />
        height: width * 40 / 100, // Height<br />
        backgroundColor: ‘#E0E0E0’,<br />
        overflow: ‘hidden’,<br />
        marginBottom: width * 3 / 100<br />
    },</p>
<p>    titlePlaceholder: {<br />
        width: ‘100%’,<br />
        height: width * 9 / 100,<br />
        backgroundColor: ‘#E0E0E0’,<br />
        overflow: ‘hidden’<br />
    },</p>
<p>    detailsContainer: {<br />
        flexDirection: ‘row’,<br />
        justifyContent: ‘space-between’,<br />
        alignItems: ‘center’,<br />
        paddingVertical: width * 3 / 100<br />
    },</p>
<p>    authorImagePlaceholder: {<br />
        height: width * 9 / 100,<br />
        width: width * 9 / 100,<br />
        borderRadius: width * 5 / 100,<br />
        overflow: ‘hidden’,<br />
        backgroundColor: ‘#E0E0E0’<br />
    },</p>
<p>    infoPlaceholder: {<br />
        flex: 1,<br />
        height: width * 9 / 100,<br />
        backgroundColor: ‘#E0E0E0’,<br />
        overflow: ‘hidden’<br />
    },</p>
<p>    otherStyle: {<br />
        marginHorizontal: width * 2.5 / 100<br />
    }<br />
});

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:

<br />
import React from ‘react’;</p>
<p>import { StyleSheet, View, Text, Dimensions } from ‘react-native’;</p>
<p>import AnimatedPlaceholder from ‘react-native-animated-placeholder’;</p>
<p>const { width } = Dimensions.get(‘window’);</p>
<p>export default function App() {<br />
    return (<br />
        <View style={styles.MainContainer}><br />
            <Text style={styles.title}>Shine Overlay Animation</Text><br />
            <AnimatedPlaceholder<br />
                itemStyle={styles.imagePlaceholder}<br />
            /></p>
<p>            <AnimatedPlaceholder<br />
                itemStyle={styles.titlePlaceholder}<br />
            /></p>
<p>            <View style={styles.detailsContainer}><br />
                <AnimatedPlaceholder<br />
                    itemStyle={styles.authorImagePlaceholder}<br />
                /></p>
<p>                <AnimatedPlaceholder<br />
                    itemStyle={[<br />
                        styles.infoPlaceholder,<br />
                        styles.otherStyle<br />
                    ]}<br />
                /></p>
<p>                <AnimatedPlaceholder<br />
                    itemStyle={styles.infoPlaceholder}<br />
                /><br />
            </View></p>
<p>            <Text style={styles.title}>Fade Animation</Text><br />
            <AnimatedPlaceholder<br />
                itemStyle={styles.imagePlaceholder}<br />
                animationType=’fade’<br />
            /></p>
<p>            <AnimatedPlaceholder<br />
                itemStyle={styles.titlePlaceholder}<br />
                animationType=’fade’<br />
            /></p>
<p>            <View style={styles.detailsContainer}><br />
                <AnimatedPlaceholder<br />
                    itemStyle={styles.authorImagePlaceholder}<br />
                    animationType=’fade’<br />
                /></p>
<p>                <AnimatedPlaceholder<br />
                    itemStyle={[<br />
                        styles.infoPlaceholder,<br />
                        styles.otherStyle<br />
                    ]}<br />
                    animationType=’fade’<br />
                /></p>
<p>                <AnimatedPlaceholder<br />
                    itemStyle={styles.infoPlaceholder}<br />
                    animationType=’fade’<br />
                /><br />
            </View><br />
        </View><br />
    )<br />
};</p>
<p>const styles = StyleSheet.create({<br />
    MainContainer: {<br />
        flex: 1,<br />
        justifyContent: ‘center’,<br />
        alignItems: ‘center’,<br />
        paddingHorizontal: width * 5 / 100<br />
    },</p>
<p>    title: {<br />
        fontWeight: ‘bold’,<br />
        fontSize: 24,<br />
        alignSelf: ‘stretch’,<br />
        textAlign: ‘left’,<br />
        marginVertical: width * 3 / 100<br />
    },</p>
<p>    imagePlaceholder: {<br />
        width: ‘100%’,<br />
        height: width * 40 / 100, // Height<br />
        backgroundColor: ‘#E0E0E0’,<br />
        overflow: ‘hidden’,<br />
        marginBottom: width * 3 / 100<br />
    },</p>
<p>    titlePlaceholder: {<br />
        width: ‘100%’,<br />
        height: width * 9 / 100,<br />
        backgroundColor: ‘#E0E0E0’,<br />
        overflow: ‘hidden’<br />
    },</p>
<p>    detailsContainer: {<br />
        flexDirection: ‘row’,<br />
        justifyContent: ‘space-between’,<br />
        alignItems: ‘center’,<br />
        paddingVertical: width * 3 / 100<br />
    },</p>
<p>    authorImagePlaceholder: {<br />
        height: width * 9 / 100,<br />
        width: width * 9 / 100,<br />
        borderRadius: width * 5 / 100,<br />
        overflow: ‘hidden’,<br />
        backgroundColor: ‘#E0E0E0’<br />
    },</p>
<p>    infoPlaceholder: {<br />
        flex: 1,<br />
        height: width * 9 / 100,<br />
        backgroundColor: ‘#E0E0E0’,<br />
        overflow: ‘hidden’<br />
    },</p>
<p>    otherStyle: {<br />
        marginHorizontal: width * 2.5 / 100<br />
    }<br />
});

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 (

<Text style={styles.title}>Shine Overlay Animation</Text>

<AnimatedPlaceholder

itemStyle={styles.imagePlaceholder}

<AnimatedPlaceholder

itemStyle={styles.titlePlaceholder}

<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’

<AnimatedPlaceholder

itemStyle={styles.authorImagePlaceholder}

animationType=‘fade’

<AnimatedPlaceholder

itemStyle={[

styles.infoPlaceholder,

styles.otherStyle

]}

animationType=‘fade’

<AnimatedPlaceholder

itemStyle={styles.infoPlaceholder}

animationType=‘fade’

</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:

React Native Animated Placeholder – Android iOS Example

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

Also Read :

Recent Posts

Search Here