How to change the size of pull to refresh loader in React Native?

React Native <RefreshControl> component provides size prop which can be used to change the size of loader in pull to refresh.

The possible values of this prop are default and large. It only works in Android 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), 20000);
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView
        contentContainerStyle={styles.scrollView}
        refreshControl={
          <RefreshControl
            refreshing={refreshing}
            onRefresh={onRefresh}
            size={'large'}
          />
        }
      >
        <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 looks like this –

The above image shows the two sizes of refresh loader – the left one is default and right one is large.

In the code we set this value at line 22.

Live Demo

Conclusion

We can change the refreshcontrol loader size for Android app using size prop. Set is to large and a large circular loader will render instead of Android default one.