How to change refresh loader color in React Native? Code Example

Changing Refresh loader color in React Native works differently in both Android and iOS apps. In Android apps, we can show multiple colors in the loader while in iOS, single color is supported.

We already discussed in our previous article, how to create refresh loader using RefreshControl component.

To change color, we need to use colors and tintColor props of <RefreshControl>. Where, colors is an array of color hex codes and is used by Android app. tintColor prop holds a single color and used by iOS app.

Code Example

import React from 'react';
import { RefreshControl, SafeAreaView, ScrollView, StyleSheet, Text } from 'react-native';

const App = () => {
  const [refreshing, setRefreshing] = React.useState(false);

  const onRefresh = () => {
    if(!refreshing) {
      setRefreshing(true);
      setTimeout(() => setRefreshing(false), 8000);
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView
        contentContainerStyle={styles.scrollView}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
            colors={['#FF0000', '#00FF00', '#FFF000']}
            tintColor={'#0000FF'}
          />
        }
      >
        <Text>Pull down to see RefreshControl indicator</Text>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center'
  },
  scrollView: {
    flex: 1,
    backgroundColor: 'pink',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

The output will look like this –

The above image shows how the refresh control component looks like on both iOS and Android apps. The iOS version is at left with blue loader and Android on right with green. In Android you will see multi colored loader but since this is a still image, so only green is displaying.

In our code we set the colors properties at lines 23 and 24.

Live Demo

Conclusion

To change the color of refresh loader, we can use colors and tintColor props of RefreshControl component. In Android apps, we can set multi color loader but in iOS, only one color is supported. Hence, colors prop is an array which accepts list of multiple hex codes.