I am working on pulling flatlist and refresh with the header. When it comes to execution, the spinner does not show up. Please tell me what do I have to fix. Do we need to use Refresh Control?
Environment
react-native-cli: 2.0.1
react-native: 0.52.0
node : v8.9.4
class ListSwipe extends Component {
constructor(props) {
super(props);
this.state = { keywords: "", isLoading: true , results:[] , oldresults:[] , isFetching: false }
}
componentDidMount() {
return fetch('https://reactnativecode.000webhostapp.com/FruitsList.php')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
isFetching: false ,
results: responseJson,
oldresults: responseJson
},...
makeRemoteRequest() {
....
}
handleRefresh = () => {
this.setState({ isFetching: true }, function() {
this.makeRemoteRequest()
});
}
....
<ScrollView style={styles.scroll}>
<Text> Keywords : {this.state.keywords} </Text>
{this.state.loading ? (
<Spinner />
) : <FlatList
extraData={this.state}
data={this.state.results}
keyExtractor={(item, index) => item.id}
renderItem={( {item} ) => {
return <ListItem>
<Text>{item.fruit_name}</Text>
</ListItem>
}}
refreshing = {this.state.isFetching}
onRefresh ={this.handleRefresh}
onRefresh={() => this.onRefresh()}
/> }
</ScrollView>
Worked. Add enabled={true}
refreshControl={
<RefreshControl
enabled={true}
refreshing={refreshing}
onRefresh={onRefresh}
/>
}