Can some help me with this issue. On press not working in Flatlist render function. here my code. i checked other screens touch case working fine but when i try it in Flatlist it's not working
render(){
return (
<View style={styles.container} >
<FlatList
data={this.state.categories}
numColumns={2}
keyExtractor={item => item.id}
renderItem={item => this.renderItem(item)}
/>
</View>
);
}
renderItem = ({item,index}) => {
return (
<TouchableOpacity onPress={() => this.moveToLocation(item.id)} style={styles.items}>
<Image source={{uri:item.img}}
resizeMode="center"
style={styles.itemsimg} />
<Text style={{textAlign:'center',fontSize:20, }} onPress={() => this.moveToLocation(item.id)}>{item.name}</Text>
</TouchableOpacity>
);
}
You need to wrap your row element (inside your renderItem method) inside tag. TouchableWithoutFeedback takes onPress as it's prop where you can provide onPress event.
For TouchableWithoutFeedback refer
https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html
if onPress is not workingin the flatlist's render method try using onTouchStart method of the components if they have in the flatList's render method.
Related
I am trying to achieve pagination for infinite scrolling in react native. When loading, I want to render the loading spinner at the bottom of the Flat list component. (Note: I'm using Expo for this app)
const renderFooter = () => {
if (!category.loading) return null;
return (
<View style={spinnerStyles.container}>
<ActivityIndicator animating size="large" color="#0000ff" />
</View>
);
};
return (
<View style={styles.container}>
<FlatList
columnWrapperStyle={{ justifyContent: "space-between" }}
numColumns={2}
data={category.data}
renderItem={categoryItem}
keyExtractor={(item) => item._id + item.sub_category}
onEndReachedThreshold={0}
listFooterComponent={renderFooter}
onEndReached={() => loadMore()}
/>
</View>
);
The loading spinner not correctly working with the flat list footer.
Has anyone run into this issue before, or does anyone have a solution?
Sorry, it's my simple syntax error. It's actually ListFooterComponent not listFooterComponent. Now it's working fine, Thank you.
Instead of calling the refrence, call the function. It should look something like this.
ListFooterComponent={renderFooter()}
I am trying to to data using Flatlist inside a Modal. But sometimes (Not always) data is not displayed at all. Just empty screen. I am using expo client for test. Below is my code. This render() method is actually in a custom component. So, Modal is inside a custom component. I am not sure Modal has to cause any issue here.
// sometime flatlist does not work when inside a modal
render(){
return (
<View>
{ this.props.visible && this.renderChildModal()}
{ this.props.visible &&
<Modal
animationType="slide"
transparent={false}
visible={true}
onRequestClose={() => {
//Alert.alert('Modal has been closed.');
}}>
<View>
<View style={this.styles.buttonContainer}>
<TouchableOpacity style={this.styles.button}
onPress={this.props.onDone}>
<Text style={styles.labelButton}>Done</Text>
</TouchableOpacity>
</View>
<FlatList
data={this.state.items}
extraData ={this.state}
renderItem={({ item }) => (
<CheckBox
title={item.name}
checked={item.checked}
onPress={()=>this.onSelect(item.id-1)}
/>
)}
keyExtractor={item => item.id.toString()}
/>
</View>
</Modal>
}
</View>
)
}
It was not a problem with Modal. I was calling component named MultiSelect in screen as below,
<MultiSelect
items={specialities}
selectedItems={profile.specialities}
onItemSelected={this.onSelectedSpecialitiesChange}
visible={this.state.specialitiesModalVisible}
onDone={this.specialityMultiSelectDone}
>
</MultiSelect>
Sometime specialities is empty as it is retrieved from server asynchronously.
So, I changed my code as below,
{specialities.length>0 &&
<MultiSelect
items={specialities}
selectedItems={profile.specialities}
onItemSelected={this.onSelectedSpecialitiesChange}
visible={this.state.specialitiesModalVisible}
onDone={this.specialityMultiSelectDone}
>
</MultiSelect> }
That solves the issue.
I was using...
<FlatList
data={this.state.dataSource}
renderItem={({item}) => <Text>{item.username} {item.name}</Text>}
keyExtractor={({id}, index) => id}
/>
...to render two texts in React Native but now I've got an uri in my json...
How do I render the image in an IM style (thumbnail, username and name)?
Add a renderItem method and then put everything you need in there. Once you make the renderItem method you can throw it into your FlatList.
renderItem({ item }) {
return (
<View>
<Image
source={{uri: item.uri}}
/>
<Text>
{item.username}
</Text>
<Text>
{item.name}
</Text>
</View>
);
}
Then use the method inside the FlatList (the .bind makes sure it stays in the right context)
<FlatList
data={this.state.dataSource}
renderItem={this.renderItem.bind(this)}
keyExtractor={({id}, index) => id}
/>
You can build a component that takes your fields as its props, containing multiple Texts and an Image using your uri as the source. Style this like you would any other component, and then pass that component into renderItem.
You can embed the component immediately to the renderItem like this if the flatlist item is not complicated ( has a lot of component )
<FlatList
data={this.state.dataSource}
renderItem={({item}) => {
<View>
<Image source={{uri: item.uri.image}}/>
<Text>{item.userName}</Text>
<Text>{item.name}</Text>
</View>
}}
keyExtractor={(i) => i.toString()}
/>
My container is a scrollview and inside it is a flatlist, which load data from server.
The flatlist:
<VirtualizedList
ListEmptyComponent={<NoData />}
data={data}
getItem={(items, index) => items.get(index)}
getItemCount={(items) => items.size}
keyExtractor={(item, index) => String(index)}
renderItem={this._renderItem}
refreshControl={
<RefreshControl
refreshing={loading}
onRefresh={this._onRefresh.bind(this)}
/>
}
onEndReached={this.handleLoadMore}
onEndReachedThreshold={0.1}
onMomentumScrollBegin={() => {
Log('onMomentumScrollBegin fired!')
this.onEndReachedCalledDuringMomentum = false;
}}
/>
which handleLoadMore is:
handleLoadMore = () => {
Log('handleLoadMore fired!');
if (!this.onEndReachedCalledDuringMomentum) {
// fetch data..
this.onEndReachedCalledDuringMomentum = true;
}
}
The problem is the handleLoadMore never called and the onMomentumScrollBegin also never called.
How to solve this?
Actually you don't need to use Content or ScrollView as FlatList has both ListFooterComponent and ListHeaderComponent
In case you really need to use FlatList inside ScrollView, then add style and content contentContainerStyle to your ScrollView or if you use native-base, inside the Content
<ScrollView
...
style={{flex: 1}}
contentContainerStyle={{flex: 1}}
...
/>
Then if you want to use header component out of FlatList loop. Then use ListHeaderComponent={() => <SomeHeader /> inside Flatlist.
If I enclose the flatlist in a View then my onEndReached triggers infinitely if I remove the enclosing View onEndReached is not triggered at all.
render() {
return (
<Root>
<Container>
<Content>
<View>
{this.state.listView && (
<FlatList
data={this.state.variants}
keyExtractor={this._keyExtractor}
onEndReachedThreshold={0.5}
onEndReached={({ distanceFromEnd }) => {
console.log(
"on end reached ",
distanceFromEnd
);
this.loadMore();
}}
numColumns={1}
renderItem={({ item, index }) => (
<CatalogRow
item={item}
in_wishlist={this.state.in_wishlist}
toggleWishlist={() =>
this.toggleWishlist(item.title)
}
listView={this.state.listView}
/>
)}
/>
)}
</View>
</Content>
</Container>
</Root>
);
}
And my distanceFromEnd takes values like 0 , 960,1200 when it is trigerred. What does it indicate?
I'm using react-native 0.47.2
I have same problem with react-native 0.50.3
<Flatlist> must not be used in a <ScrollView> if you want to use onEndReached because Flatlist can not found the height.
Use a <View> instead
It was because of the enclosing <Content> tag. Sometimes embedding react-native tags with native-base tags causes such issues. I replaced the content and container tag with View tags and now it works fine.
I have same problem with RN 0.52
That look like because Flatlist can not found the heigh. So he can not find the end of list.
Fix by wrap your flatlist by a View with flex=1
<View style={{flex: 1}} > <Flatlist /> <View>
I would use it like this:
handleMore = () => {
// fetch more here
};
<FlatList
onEndReached={this.handleMore}
/>