Show Hide ActivityIndicator on Button Click in React Native

Hello friends, In today’s tutorial we would learn about ActivityIndicator also known as Progress Indicator’s prop animating. The animating prop is used to show and hide the activity indicator in react native. The animating prop support two values True(To Show ActivityIndicator ) and False (To Hide ActivityIndicator ). So what we are going to do is make 1 Boolean Type of state and update the State value on button click event. Now when State value is True it will display the ActivityIndicator and when State value is False it will hide the ActivityIndicator component from screen. So in this tutoiral we would learn about Show Hide ActivityIndicator on Button Click in React Native.

Contents in this project Show Hide ActivityIndicator on Button Click in React Native :-

1. Open your project’s main App.js file and import useState, useEffect, View, StyleSheet, Button, Text, ActivityIndicator and Platform component.

2. Creating our main component named as App.

3. Creating a State named as visible and State update method setVisible with default value True. This state is used on animating prop to show and hide the Activity Indicator.

4. Creating another State named as text with State update method setText. We would use this state to update the Text component above text while hiding the ActivityIndicator.

5. Creating a function named as letHide(). In this function we would show and hide the ActivityIndicator.

6. Creating return() block, Now we would make 1 ActivityIndicator and Button component. We would call the letHide function on button onPress event.

7. Creating Style.

8. Complete Source Code for App.js File :-

Screenshots:-

Show Hide ActivityIndicator on Button Click in React Native

Leave a Reply

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