Example of React Native Paper ActivityIndicator Chapter

Hello friends, As you all know from now on we are trying our best to cover one of the most popular react native package React Native Paper. We have post a tutorial regarding it’s installation earlier. Now in today’s tutorial we would learn about ActivityIndicator component of react native paper. We would make a simple example with all of their props and show and hide the ActivityIndicator on button click. The button we would use is also from react native paper. So in this tutorial we would learn about Example of React Native Paper ActivityIndicator Chapter – 2.

Contents in this project Example of React Native Paper ActivityIndicator Chapter – 2 :-

1. If you are new to react native paper, Then before going further you have to install the React Native Paper package in your react native project.

2. Open your project’s main App.js file and import useState, StyleSheet, SafeAreaView from react native and ActivityIndicator, Button, Provider as PaperProvider from react-native-paper package.

<br />
import React, { useState } from ‘react’;</p>
<p>import { ActivityIndicator, Button, Provider as PaperProvider } from ‘react-native-paper’;</p>
<p>import { StyleSheet, SafeAreaView } from ‘react-native’;

import React, { useState } from ‘react’;

import { ActivityIndicator, Button, Provider as PaperProvider } from ‘react-native-paper’;

import { StyleSheet, SafeAreaView } from ‘react-native’;

3. Creating our Main component.

<br />
export default function Main() {</p>
<p>}

export default function Main() {

}

4. Creating 2 States named as show with State update method setShow and text State with State update method setText. We would use the show state to show and hide the ActivityIndicator and text State to change the Button above text.

<br />
  const [show, setShow] = useState(true);</p>
<p>  const [text, setText] = useState(‘Hide ActivityIndicator’);

const [show, setShow] = useState(true);

const [text, setText] = useState(‘Hide ActivityIndicator’);

5. Creating a function named as let_show_hide(). We would use this function to Toggle show and hide functionality.

<br />
  const let_show_hide = () => {</p>
<p>    if (show === true) {<br />
      setShow(false);<br />
      setText(‘Show ActivityIndicator’)<br />
    } else {<br />
      setShow(true);<br />
      setText(‘Hide ActivityIndicator’)<br />
    }<br />
  }

const let_show_hide = () => {

if (show === true) {

setShow(false);

setText(‘Show ActivityIndicator’)

} else {

setShow(true);

setText(‘Hide ActivityIndicator’)

}

6. Creating return() block, Now here we would make 3 Sizes ActivityIndicator.

Props :-

animating : Support Boolean value, Used to show and hide the Activity Indicator.
color : Support all type of color format.
size : Support 3 size formats. small, large and given number format.
hidesWhenStopped : Hide the activity indicator when it is not animating.
style : Used to apply custom styling. Support all the View component style prop.

<br />
<ActivityIndicator<br />
          animating={show}<br />
          color={‘red’}<br />
          size={‘small’}<br />
          hidesWhenStopped={true}<br />
          style={{ marginBottom: 30 }} /></p>
<p>        <ActivityIndicator<br />
          animating={show}<br />
          color={‘green’}<br />
          size={‘large’}<br />
          hidesWhenStopped={true}<br />
          style={{ marginBottom: 30 }} /></p>
<p>        <ActivityIndicator<br />
          animating={show}<br />
          color={‘purple’}<br />
          size={40}<br />
          hidesWhenStopped={true}<br />
          style={{ marginBottom: 30 }} />

<ActivityIndicator

animating={show}

color={‘red’}

size={‘small’}

hidesWhenStopped={true}

style={{ marginBottom: 30 }} />

<ActivityIndicator

animating={show}

color={‘green’}

size={‘large’}

hidesWhenStopped={true}

style={{ marginBottom: 30 }} />

<ActivityIndicator

animating={show}

color={‘purple’}

size={40}

hidesWhenStopped={true}

style={{ marginBottom: 30 }} />

7. Creating a Button and call the let_show_hide method on button onPress event.

<br />
       <Button<br />
          mode=”contained”<br />
          style={styles.buttonStyle}<br />
          onPress={let_show_hide}><br />
          {text}<br />
        </Button>

<Button

mode=“contained”

style={styles.buttonStyle}

onPress={let_show_hide}>

{text}

</Button>

8. Creating Style.

<br />
const styles = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    flex: 1,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’,<br />
  },</p>
<p>  buttonStyle: {<br />
    width: 300,<br />
    height: 45,<br />
    alignItems: ‘center’,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’,<br />
  },</p>
<p>});

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: ‘center’,

alignItems: ‘center’,

buttonStyle: {

width: 300,

height: 45,

alignItems: ‘center’,

justifyContent: ‘center’,

alignItems: ‘center’,

});

9. Complete Source Code for App.js file :-

<br />
import React, { useState } from ‘react’;</p>
<p>import { ActivityIndicator, Button, Provider as PaperProvider } from ‘react-native-paper’;</p>
<p>import { StyleSheet, SafeAreaView } from ‘react-native’;</p>
<p>export default function Main() {</p>
<p>  const [show, setShow] = useState(true);</p>
<p>  const [text, setText] = useState(‘Hide ActivityIndicator’);</p>
<p>  const let_show_hide = () => {</p>
<p>    if (show === true) {<br />
      setShow(false);<br />
      setText(‘Show ActivityIndicator’)<br />
    } else {<br />
      setShow(true);<br />
      setText(‘Hide ActivityIndicator’)<br />
    }<br />
  }</p>
<p>  return (<br />
    <PaperProvider></p>
<p>      <SafeAreaView style={styles.MainContainer}></p>
<p>        <ActivityIndicator<br />
          animating={show}<br />
          color={‘red’}<br />
          size={‘small’}<br />
          hidesWhenStopped={true}<br />
          style={{ marginBottom: 30 }} /></p>
<p>        <ActivityIndicator<br />
          animating={show}<br />
          color={‘green’}<br />
          size={‘large’}<br />
          hidesWhenStopped={true}<br />
          style={{ marginBottom: 30 }} /></p>
<p>        <ActivityIndicator<br />
          animating={show}<br />
          color={‘purple’}<br />
          size={40}<br />
          hidesWhenStopped={true}<br />
          style={{ marginBottom: 30 }} /></p>
<p>        <Button<br />
          mode=”contained”<br />
          style={styles.buttonStyle}<br />
          onPress={let_show_hide}><br />
          {text}<br />
        </Button></p>
<p>      </SafeAreaView></p>
<p>    </PaperProvider><br />
  );<br />
}</p>
<p>const styles = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    flex: 1,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’,<br />
  },</p>
<p>  buttonStyle: {<br />
    width: 300,<br />
    height: 45,<br />
    alignItems: ‘center’,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’,<br />
  },</p>
<p>});

import React, { useState } from ‘react’;

import { ActivityIndicator, Button, Provider as PaperProvider } from ‘react-native-paper’;

import { StyleSheet, SafeAreaView } from ‘react-native’;

export default function Main() {

const [show, setShow] = useState(true);

const [text, setText] = useState(‘Hide ActivityIndicator’);

const let_show_hide = () => {

if (show === true) {

setShow(false);

setText(‘Show ActivityIndicator’)

} else {

setShow(true);

setText(‘Hide ActivityIndicator’)

}

return (

<ActivityIndicator

animating={show}

color={‘red’}

size={‘small’}

hidesWhenStopped={true}

style={{ marginBottom: 30 }} />

<ActivityIndicator

animating={show}

color={‘green’}

size={‘large’}

hidesWhenStopped={true}

style={{ marginBottom: 30 }} />

<ActivityIndicator

animating={show}

color={‘purple’}

size={40}

hidesWhenStopped={true}

style={{ marginBottom: 30 }} />

<Button

mode=“contained”

style={styles.buttonStyle}

onPress={let_show_hide}>

{text}

</Button>

</SafeAreaView>

</PaperProvider>

);

}

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: ‘center’,

alignItems: ‘center’,

buttonStyle: {

width: 300,

height: 45,

alignItems: ‘center’,

justifyContent: ‘center’,

alignItems: ‘center’,

});

Screenshots :-

Example of React Native Paper ActivityIndicator Chapter – 2

Contents in this project Example of React Native Paper ActivityIndicator Chapter – 2 :-

Also Read :

Recent Posts

Search Here