How to customize look/feel of React Native ListView's RefreshControl - react-native

Question

React Native's ListView has a built-in pull-to-refresh control called RefreshControl. It's super easy to use.
I'd like to customize the look and feel of the control to use a different visual design, such as using a material design progress indicator.
How can I customize the look of the RefreshControl in React Native?

Answer 1

You can outsmart it by doing:
setting transparent properties to ListView
Adding component with absolute position
Example:
<View style={{height:Dimensions.get('window').height}}>
{/* custom refresh control */}
<View
style={{position:'absolute',
width:Dimensions.get('window').width, height:60,
alignItems:'center', justifyContent:'center'}}>
<Progress.CircleSnail
color={['red', 'green', 'blue']}
duration={700} />
</View>
{/* list view*/}
<ListView
dataSource={this.state.dataSource}
refreshControl={
<RefreshControl
onLayout={e => console.log(e.nativeEvent)}
// all properties must be transparent
tintColor="transparent"
colors={['transparent']}
style={{backgroundColor: 'transparent'}}
refreshing={this.state.refreshing}
onRefresh={() => {
this.setState({refreshing:true});
setTimeout(() => {
this._addRows()
}, 2000);
}}
/>
}
renderRow={(rowData) => <Text>{rowData}</Text>} />
</View>
This is the result:

Answer 2

You can totally do this. It requires some work though.
You can start by writing something like this.
<View style={styles.scrollview}>
<View style={styles.topBar}><Text style={styles.navText}>PTR Animation</Text></View>
<View style={styles.fillParent}>
<Text>Customer indicator goes here...</Text>
</View>
<View style={styles.fillParent}>
<ListView
style={{flex: 1}}
dataSource={this.state.dataSource}
renderRow={(rowData) => <View style={styles.row}><Text style={styles.text}>{rowData}</Text></View>}
ref='PTRListView'
/>
</View>
</View>
When you'll pull to refresh, you should see the text "Custom indicator goes here..."
Following this pattern, you can place your component instead of just a view and a text.
For the credits, thanks to this article for the idea.

Answer 3

I did it using react-native-pull-to-refresh-custom lib
First create custom loader ListRefreshLoader
import React from 'react';
import {StyleSheet, View} from 'react-native';
import colors from '../../assets/colors';
import {wp} from '../../styles/responsiveScreen';
import Circuler from './Circuler';
const ListRefreshLoader = ({refreshing}) => {
return (
<View>
{refreshing ? (
<View style={styles.container}>
<Circuler color={colors.gray} size={wp(6)} />
</View>
) : null}
</View>
);
};
const styles = StyleSheet.create({
container: {
width: wp(15),
height: wp(15),
alignSelf: 'center',
justifyContent: 'center',
alignItems: 'center',
},
});
export default ListRefreshLoader;
Then use following way
import PullToRefresh from 'react-native-pull-to-refresh-custom';
import ListRefreshLoader from '../../components/Loader/ListRefreshLoader';
<PullToRefresh
HeaderComponent={() => <ListRefreshLoader refreshing={refreshing} />}
headerHeight={60}
refreshTriggerHeight={60}
refreshingHoldHeight={60}
refreshing={refreshing}
onRefresh={onRefresh}
style={styles.list}>
<FlatList
data={friendsList}
viewabilityConfig={{
itemVisiblePercentThreshold: 90,
}}
maxToRenderPerBatch={100}
removeClippedSubviews
style={styles.list}
keyExtractor={(item, index) => index.toString()}
showsVerticalScrollIndicator={false}
persistentScrollbar
renderItem={renderItem}
ItemSeparatorComponent={() => {
return <View style={styles.listSeperator} />;
}}
ListEmptyComponent={totalUserFriends === 0 ? renderEmpty() : null}
ListHeaderComponent={
totalUserFriends !== 0 || searchText !== '' ? (
<ListSearch
placeHolder={`${t('Search')}...`}
searchText={searchText}
style={styles.searchStyle}
fontName={'roboto-regular'}
onSearchChange={(text) => setSearchText(text)}
onClearSearch={() => {
setSearchText('');
}}
onEndEditing={() => setSearchText(searchText)}
/>
) : null
}
/>
</PullToRefresh>

Answer 4

I have written custom RefreshControl by merging below 2 methods
viewablityConfig of flatlist/sectionList will help in identifying the top element of the data.
if (viewableItems[0]?.item?.url === firstCategoryUrl) {
updateIsFocusOnTopOfScreen(true);
} else {
updateIsFocusOnTopOfScreen(false);
}
After Identifying user is on top of the screen use panResponder to the flatlist/sectionList -> this is to identify the user is pulling the screen to bottom based on the this.pan.y._value increasing call your custom onRefresh method
const mover = Animated.event([null, { dx: this.pan.x, dy: this.pan.y }]);
onPanResponderMove: (e, gestureState) => {
mover(e, gestureState);
this.customRefreshControl(this.pan.y._value);
},