Set color of refresh indicator in FlatList

[ragnorc]

With RefreshControl the color of the refresh indicator and some other props could be set. Is this still possible with FlatList?

[PARAGJYOTI]

Flatlist is just a higher component based on Virtualizedlist . Look at the source code here https://github.com/facebook/react-native/blob/master/Libraries/Lists/FlatList.js

So , in order to change the refreshControl color , set the property in the source code or add your own props to it . Run react-native start again to see the changes .

[PARAGJYOTI]

Sorry , you have to pass the props into Scrollview Component in VirtualizedList class . See https://github.com/facebook/react-native/blob/master/Libraries/Lists/VirtualizedList.js

[MattyK14]

Would be useful if this was a part of the React-Native codebase.

EDIT: @ragnorc @PARAGJYOTI Seems you can pass your own RefreshControl to the FlatList and use the props that way.

Sample:

<FlatList
  data={this.props.rooms}
  renderItem={this._renderItem}
  keyExtractor={(item) => item.id}
  //ItemSeparatorComponent={this._renderSeparator}
  // onRefresh={this.onRefreshList.bind(this)}
  // refreshing={this.state.isRefreshing}
  refreshControl={
     <RefreshControl
         refreshing={this.state.isRefreshing}
         onRefresh={this.onRefreshList.bind(this)}
         title="Pull to refresh"
         tintColor="#fff"
         titleColor="#fff"
      />
   }
/>

Documentation: https://facebook.github.io/react-native/docs/refreshcontrol.html

[Jacse]

@MattyK14 does that still work? Can't find it documented anywhere, seems like RefreshControl provided by VirtualizedList takes precedence over passed props.

[MattyK14]

@Jacse I'm not on 0.46 yet, but as of 0.45.1 it still works.

[inifaisal]

just add colors props on RefreshControl
<RefreshControl refreshing={this.state.isRefreshing} onRefresh={this.onRefreshList.bind(this)} title="Pull to refresh" tintColor="#fff" titleColor="#fff" colors={["red", "green", "blue"]} />