How to show & hide the circular loader in React Native? Code Example

Use animating props of ActivityIndicator component to show or hide the circular loader in React Native. Set it to true to show the loader and false to hide it.

You can declare a state variable to decide the visibility of loader.

Code Example

import React from "react";
import { ActivityIndicator, StyleSheet, Text, View, Button } from "react-native";

const App = () => {
  const [showLoader, setShowLoader] = React.useState(true)
  return (<View style={[styles.container, styles.horizontal]}>
    <ActivityIndicator animating={showLoader} size="large" />
    <Button style={{flex:2}} title={'show/hide Loader'} onPress={() => setShowLoader(!showLoader)} />
  </View>)
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center"
    
  },
  horizontal: {
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center",
    padding: 10
  }
});

export default App;

In the above example, we set a state variable – showLoader. This is passed to the animating props of ActivityIndicator.

When the button is pressed, the value of showLoader will toggle. Because we are passing the setShowLoader() function with opposite boolean value of showLoader on the press of button.

Note: This will hide the ActivityIndicator but it still is present at it’s position. Meaning, it is taking space there. So visibility is hidden but element is there.

Live Demo

animating props can be used to hide the visibility but element will stay there and will take the space on the screen.

To completely remove the loader component from screen, you can wrap the ActivityIndicator inside boolean condition deriving from showLoader variable. Check the next code –

Display / Remove Circular Loader Code

import React from "react";
import { ActivityIndicator, StyleSheet, Text, View, Button } from "react-native";

const App = () => {
  const [showLoader, setShowLoader] = React.useState(true)
  return (<View style={[styles.container, styles.horizontal]}>
    {showLoader ? <ActivityIndicator animating={true} size="large" /> : null}
    
    <Button style={{flex:2}} title={'show/hide Loader'} onPress={() => setShowLoader(!showLoader)} />
  </View>)
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center"
    
  },
  horizontal: {
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center",
    padding: 10
  }
});

export default App;

Live Demo

Conclusion

To show or hide circular loader in React Native, we can use animating props of <ActivityIndicator> component. This will set the visibility of loader but the element stays there. So it continue to take up space on screen. But we can conditionally add ActivityIndicator component to solve this issue.