React Native ActivityIndicator Android iOS Example Tutorial

ActivityIndicator is the common circular loading indicator used in both android and iOS devices. This type of loader which is basically used to display a loading dotted moving circle on android and iPhone devices, When user trying to loading something from server. So when the application is retrieving data from server then by that time the indicator ActivityIndicator will show on device screen and when the data finish loading then it will be hidden using states. So in this tutorial we would going to Show and hide an ActivityIndicator on application screen on button click.

Contents in this project React Native ActivityIndicator Example Tutorial :

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. Add AppRegistry , StyleSheet , View , ActivityIndicator  and Button   component in import block.

3. Create constructor in your main class with props and super method. Now declare a state using this.state named as isLoading and set isLoading value as true.

This isLoading state is used to show and hide the ActivityIndicator . When isLoading value is false then ActivityIndicator will be hidden and when the isLoading value is true then ActivityIndicator  will be displayed.

4. Create function named as ShowHideActivityIndicator . This function would change the is isLoading state value on button click.

5. Create custom style css class named as MainContainer .

6. Add View as parent view in render’s return block and Call the MainContainer class into View.

7. Add curly brackets { } in View component, and inside the curly brackets using the ternary operator ? check isLoading state value and display the ActivityIndicator .

8. Add Button component in View and set onPress on button and call ShowHideActivityIndicator function on button click.

9. Complete source code for index.android.js / index.ios.js file.

Screenshot in iOS device :

Screenshot in Android device :

ActivityIndicator

2 Comments

  1. Mr. Professional

    Nice one sir…

Leave a Reply

Your email address will not be published.