Loader in react native

How to add loading indicator in react native

In any app one component is very important which is loading indicator. When we are fetching data for our mobile application then user waits for it, if we don’t show this loading then user might think that app is not working.

for this example when app is opening then we show loader at top which is indicating that app is loading.

ActivityIndicator in React Native

First and most popular method is to use the fundamental loader of react native. Which is the most easy way to do it. You just have to import activity indicator from react native and provide important props.

 import { ActivityIndicator } from 'react-native' 

For using this you just need to add some props like size and color.

<ActivityIndicator size="large" color="red"/>

This is so simple just one line and you are good to go.

Props for activity Indicator

  1. Size – we have 2 possible options ‘small’ and ‘large’
  2. Color – This define the color of loader.
  3. Animating – When we want to condition the loader, show or hide.

Leave a Reply

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