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

We can use color props in <ActivityIndicator> component to change color of circular loader in React Native. Any hex color code value is supported in it.

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" color="#ff0000" />
    <ActivityIndicator size="large" color="#00ff00" />
    <ActivityIndicator size="large" color="#0000ff" />
    <ActivityIndicator size="large" color="#ccc000" />
    <ActivityIndicator size="large" color="#400044" />
  </View>
);

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

export default App;

In the above code we have created 5 loaders of colors – #FF0000, #00FF00, #0000FF, #CCC000, #400044. The output will look like this –

Live Demo

Conclusion

We can use color props in ActivityIndicator component to display circular loaders in multiple colors. You can use any hex color code value in it.