I recently created a custom spinner icon for my app, and I have implemented it everywhere without too much hassle, but when it comes to the refresh control it’s another story. I am using a <FlatList> on several parts of my app, and inside of the refreshControl prop I previously passed <RefreshControl> from react native. I want to get rid of the default activity indicator and use my custom component instead, so I created a custom refresh control and it works great on iOS, but on android, now my flatlist does not show anything at all.

I’ve tried looking at other stack overflow questions and on GitHub, and all I’ve found is to pass in {...props}, but when I do that, nothing changes. Below is my code:

CustomRefreshControl.tsx

import React from 'react';
import {
  RefreshControl,
  RefreshControlProps,
  StyleSheet,
  View,
} from 'react-native';
import {Preloader} from '_components/common';
import {Colors} from '_styles/variables';

interface CustomRefreshControlProps extends RefreshControlProps {
  refreshing: boolean;
  onRefresh: () => void;
  color?: Colors;
}

const CustomRefreshControl: React.FC<CustomRefreshControlProps> = ({
  refreshing,
  onRefresh,
  color = Colors.oxfordBlue,
  ...props
}) => {
  return (
    <RefreshControl
      refreshing={refreshing}
      onRefresh={onRefresh}
      tintColor="transparent"
      colors={['transparent']}
      style={styles.refreshControl}
      {...props}>
      {refreshing && (
        <View style={styles.preloaderContainer}>
          <Preloader color={color} />
        </View>
      )}
    </RefreshControl>
  );
};

const styles = StyleSheet.create({
  refreshControl: {
    backgroundColor: 'transparent',
  },
  preloaderContainer: {
    margin: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default CustomRefreshControl;

and my flatlist code

<FlatList<IEncounter>
            style={styles.list}
            contentContainerStyle={styles.listContainer}
            data={combinedRecentData || []}
            renderItem={_renderItem}
            keyExtractor={_keyExtractor}
            ListEmptyComponent={_renderEmptyComponent}
            refreshControl={
              <CustomRefreshControl
                onRefresh={refreshRecent}
                refreshing={isRecentRefreshing}
                color={Colors.oxfordBlue}
              />
            }
            ListHeaderComponent={_renderHeaderComponent}
            initialNumToRender={8}
            windowSize={12}
            ListFooterComponent={
              isRecentMoreLoading ? (
                <Preloader list color={Colors.oxfordBlue} />
              ) : null
            }
            onEndReached={readMoreRecent}
            onEndReachedThreshold={0.5}
          />