Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

react-native

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?

like image 863
emmby Avatar asked Jul 07 '16 23:07

emmby


People also ask

Which prop is used to set whether RefreshControl is refreshing or not?

RefreshControl Props onRefresh: This is a function that gets executed when refresh starts. This function should usually set refreshing to true when it starts and false once it completes. progressViewOffset: the top offset of the progress view. color [Android Only]: controls the color of the refresh indicator.

How do you add pull down refresh in react native?

Setup Pull to Refresh Pull to Refresh functionality is implemented using RefreshControl component in React Native. RefreshControl is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at scrollY: 0 , swiping down triggers an onRefresh event.

How do I refresh the current page in react native?

This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at scrollY: 0 , swiping down triggers an onRefresh event.


1 Answers

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:

sample result

like image 155
Rizki Sunaryo Avatar answered Oct 20 '22 16:10

Rizki Sunaryo