How to change background color of pull to refresh loader in React native?

Changing background color of pull to refresh loader in React Native is possible through progressBackgroundColor prop of RefreshControl component.

This prop only works for Android app because the loader background is only available in it and not in iOS.

The possible values for this prop are –

• 6 digits hex code (#rrggbb) like #ffffff
• 3 digits hex code like (#rgb) like #fab
• 4 digits hex and alpha (#rgba) like #fabf
• 8 digits hex and alpha (#rrggbbaa) like #ffaabbff
• rgb() colors like rgb(255,255,255)
• rgba() colors like rgba(255,255,255,0.8)
• hue-saturation-lightness; hsl() like hsl(180, 50%, 50%)
• hsla() values like hsla(180, 50%, 50%, 1.0)
• W3org CSS colors
• Color int values like 0xffaabbff

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), 20000);
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView
        contentContainerStyle={styles.scrollView}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
            progressBackgroundColor={'#fff000'}
          />
        }
      >
        <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;

Output –

You can see that the left loader background color is white, which is the default color and right side loader’s background color is yellow.

In the code we set the value of progressBackgroundColor at line 22. We set it to yellow and that’s why a black loader on yellow background is rendered.

Live Demo

Conclusion

To change the background color of circular loader of RefreshControl component, you can use progressBackgroundColor prop and set it to any valid color value.