How to change color of title under refresh loader in React Native?

In the previous article we saw how we can add title under refresh loader. In this article we will see how we can change it’s color.

Since title can be added in iOS only so color change functionality is specific to iOS apps only.

RefreshControl component provides titleColor prop which accepts all the react native color formats.

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}
            title={'Title For Refresh Loader'}
            titleColor={'#FF0000'}
          />
        }
      >
        <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 –

In the image the color of title under refresh loader is red.

We are setting the titleColor prop as #FF0000 in line 23 of our code.

Live Demo

Conclusion

By using titleColor prop of RefreshControl component, we can change the color of title under loader.