Change ActivityIndicator color in React Native Android iOS Tutorial

ActivityIndicator in react native similar as ProgressBar in android is used to show a round Loading Indicator while loading JSON from background. ActivityIndicator can be modified in size and color, now developers can modify the style of ActivityIndicator and change its size and color. So in this tutorial we would going to create react native app to Change ActivityIndicator color in React Native Android iOS app example tutorial.

Live Screenshot in Android device:

Contents in this project Change ActivityIndicator color in React Native Android iOS Tutorial:

1. Import Platform, StyleSheet, View and ActivityIndicator component in your project.

<br />
import React, { Component } from ‘react’;</p>
<p>import { Platform, StyleSheet, View, ActivityIndicator} from ‘react-native’;

import React, { Component } from ‘react’;

import { Platform, StyleSheet, View, ActivityIndicator} from ‘react-native’;

2. We are creating 6 different ActivityIndicator in render’s return block with prop size=’ ‘ and color=’ ‘.

size=’ ‘ : Is used to change the ActivityIndicator size. Available options is small and large.

color=’ ‘ : Is used to change color or background color of ActivityIndicator .

<br />
render()<br />
    {<br />
        return(</p>
<p>            <View style = { styles.MainContainer }></p>
<p>                <ActivityIndicator size=”large” color=”#F44336″ /></p>
<p>                <ActivityIndicator size=”small” color=”#E91E63″ /></p>
<p>                <ActivityIndicator size=”large” color=”#00BCD4″ /></p>
<p>                <ActivityIndicator size=”small” color=”#009688″ /></p>
<p>                <ActivityIndicator size=”large” color=”#4CAF50″ /></p>
<p>                <ActivityIndicator size=”small” color=”#FF9800″ /></p>
<p>            </View></p>
<p>        );<br />
    }

render()

{

return(

</View>

);

}

3. Create Style.

<br />
const styles = StyleSheet.create(<br />
{<br />
    MainContainer:<br />
    {<br />
        flex: 1,<br />
        justifyContent: ‘center’,<br />
        alignItems: ‘center’,<br />
        paddingTop: ( Platform.OS === ‘ios’ ) ? 20 : 0,<br />
        flexDirection: ‘row’,<br />
        justifyContent: ‘space-around’,<br />
    }<br />
});

const styles = StyleSheet.create(

{

MainContainer:

{

flex: 1,

justifyContent: ‘center’,

alignItems: ‘center’,

paddingTop: ( Platform.OS === ‘ios’ ) ? 20 : 0,

flexDirection: ‘row’,

justifyContent: ‘space-around’,

}

});

4. Complete source code for App.js File :

<br />
import React, { Component } from ‘react’;</p>
<p>import { Platform, StyleSheet, View, ActivityIndicator} from ‘react-native’;</p>
<p>export default class Myapp extends Component<{}><br />
{</p>
<p>    render()<br />
    {<br />
        return(</p>
<p>            <View style = { styles.MainContainer }></p>
<p>                <ActivityIndicator size=”large” color=”#F44336″ /></p>
<p>                <ActivityIndicator size=”small” color=”#E91E63″ /></p>
<p>                <ActivityIndicator size=”large” color=”#00BCD4″ /></p>
<p>                <ActivityIndicator size=”small” color=”#009688″ /></p>
<p>                <ActivityIndicator size=”large” color=”#4CAF50″ /></p>
<p>                <ActivityIndicator size=”small” color=”#FF9800″ /></p>
<p>            </View></p>
<p>        );<br />
    }<br />
}</p>
<p>const styles = StyleSheet.create(<br />
{<br />
    MainContainer:<br />
    {<br />
        flex: 1,<br />
        justifyContent: ‘center’,<br />
        alignItems: ‘center’,<br />
        paddingTop: ( Platform.OS === ‘ios’ ) ? 20 : 0,<br />
        flexDirection: ‘row’,<br />
        justifyContent: ‘space-around’,<br />
    }<br />
});