I am working on pulling flatlist and refresh with the header. When it es 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 }
}
ponentDidMount() {
return fetch('.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>
I am working on pulling flatlist and refresh with the header. When it es 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 }
}
ponentDidMount() {
return fetch('https://reactnativecode.000webhostapp./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>
- 1 add refreshControl in your ScrollView like refreshControl={ <RefreshControl refreshing={this.state.refreshing} onRefresh={this._onRefresh} /> } – Hrishi Commented Feb 7, 2019 at 13:30
- For anyone out there that might have done my mistake, notice "refreshControl" property - it needs to have a lower case "r" – vali Commented Jan 23, 2021 at 13:10
4 Answers
Reset to default 6Cause you use FlatList into ScrollView then you should define refreshing for ScrollView ,like this :
<ScrollView
refreshControl={
<RefreshControl
refreshing={this.state.isFetching}
onRefresh={this.handleRefresh}
/>
}
>
<FlatList ... />
</ScrollView>
don't forget import RefreshControl :
import { RefreshControl } from 'react-native';
Worked. Add enabled={true}
refreshControl={
<RefreshControl
enabled={true}
refreshing={refreshing}
onRefresh={onRefresh}
/>
}** Sample code representing pull to refresh in flatlist. Modify accordingly**
import React, { Component } from 'react'
import { Text,FlatList,Dimensions,Image,TouchableHighlight } from 'react-native'
export default class Home extends Component {
constructor(props)
{
super(props);
this.state = {
data : [],
gender : "",
isFetching: false,
}
}
ponentWillMount()
{
this.searchRandomUser()
}
onRefresh() {
this.setState({ isFetching: true }, function() { this.searchRandomUser() });
}
searchRandomUser = async () =>
{
const RandomAPI = await fetch('https://randomuser.me/api/?results=20')
const APIValue = await RandomAPI.json();
const APIResults = APIValue.results
console.log(APIResults[0].email);
this.setState({
data:APIResults,
isFetching: false
})
}
render() {
return (
<View style = {styles.container}>
<TouchableHighlight
onPressOut = {this.searchRandomUser}
style = {{width:deviceWidth - 32, height:45,backgroundColor: 'green',justifyContent:"center",alignContent:"center"}}>
<Text style = {{fontSize:22,color: 'white',fontWeight: 'bold',textAlign:"center"}}>Reload Data</Text>
</TouchableHighlight>
<FlatList
data={this.state.data}
onRefresh={() => this.onRefresh()}
refreshing={this.state.isFetching}
keyExtractor = { (item, index) => index.toString() }
renderItem={({item}) =>
<View style = {styles.ContainerView}>
<View>
<Image
source={{uri : item.picture.large}}
style = {{height:100,width:100,borderRadius: 50,marginLeft: 4}}
resizeMode='contain'
/>
</View>
<View style = {{flexDirection: 'column',marginLeft:16,marginRight: 16,flexWrap:'wrap',alignSelf:"center",width: deviceWidth-160}}>
<Text>Email Id : {item.email}</Text>
<Text>Full Name : {this.state.gender} {item.name.first} {item.name.last}</Text>
<Text>Date of birth : {item.dob.age}</Text>
<Text>Phone number : {item.phone}</Text>
</View>
</View>
}
/>
</View>
)
}
}
const deviceWidth = Dimensions.get('window').width
const deviceHeight = Dimensions.get('window').height
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
marginTop:22
},
ContainerView:
{
// backgroundColor:'grey',
marginBottom:20,
paddingVertical:10,
backgroundColor: '#F5F5F5',
borderBottomWidth:0.5,
borderBottomColor:'grey',
width: deviceWidth-40,
marginLeft:20,
marginRight:20,
marginTop:20,
flexDirection:'row'
}
});
Please check the below code and Implement like this.
import React, { Component } from 'react';
import { FlatList, ListView, Text, TouchableOpacity, View, ScrollView, RefreshControl, StatusBar } from 'react-native';
export default class Sample extends Component {
constructor(props) {
super(props)
this.state = {
refreshing: false,
}
}
_onRefresh = () => {
this.setState({refreshing: true});
}
render() {
return (
<View>
<FlatList
data={this.props.dataSource}
extraData={this.props.dataSource}
renderItem={this._renderItem}
keyExtractor ={this._keyExtractor}
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this._onRefresh}
/>
}
/>
</View>
)
}
}