How do I change the RefreshControl's loading indicator?

Question

I have a FlatList that uses a standard RefreshControl, like so:

<FlatList 
    data={items}
    refreshControl={<RefreshControl refreshing={loading} onRefresh={this.refresh} />}
    renderItem={({ item, index }) => (<ListItem item={item} />)}
/>

This renders the native refresh indicator when doing a pull-to-refresh action. My questions are as follows:

1. Can I change the icon/image that the RefreshControl uses to a custom one that matches my app's design better?
2. Is there a way to just create a replacement RefreshControl that works on both Android and iOS?

I found this example of a customized pull-to-refresh, which is what a of other questions/answers here reference, but that solution does not work on Android (at least not per my testing).

Answer 1

you can use tintColor prop of RefreshControl to choose colour of your choice for loading indicator

 <FlatList 
    data={items}
    refreshControl={<RefreshControl refreshing={loading} onRefresh={this.refresh}
    tintColor={'red'} //your color string
    />}
    renderItem={({ item, index }) => (<ListItem item={item} />)}
/>