Example of React Native Paper ActivityIndicator Chapter – 2

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.

3. Creating our Main component.

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.

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

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

Props :-

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

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

8. Creating Style.

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

Screenshots :-

Example of React Native Paper ActivityIndicator Chapter - 2

Leave a Reply

Your email address will not be published.