How to add a title under pull to refresh loader in React Native for iOS app?

iOS supports displaying title under pull to refresh loader. This functionality is not available in Android app.

To add a title under refresh loader in React Native, we are provided with title prop in RefreshControl component.

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'}
          />
        }
      >
        <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 from image that a title “Title for refresh loader” is showing under loader animation.

In our code we are setting the title prop in line 22.

Live Demo

Conclusion

RefreshControl component provides title prop to display a title under loader animation. This functionality works with iOS app only.