How to change size of circular loader in React Native? Code Example

To change the size of circular loader in React native, you need to provide size props in ActivityIndicator component. The valid values are – large & small.

Code Example

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

const App = () => (
  <View style={[styles.container, styles.horizontal]}>
    <ActivityIndicator size="large" />
  </View>
);

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

Live Demo

Conclusion

We can use size props on ActivityIndicator to change the size of circular loader.