I'm trying to render a FlatList from json fetched from an api, but I keep getting this error:
Warning: Each child in an array or iterator should have a unique "key" prop.
Check the render method of `VirtualizedList`.
Relevant code:
<FlatList
data={this.props.tunes}
keyExtractor={(item, index) => item.id}
renderItem={({item}) => {
<Item
key={item.id}
title={item.title}
composer={item.composer}
year={item.year}
/>
}}
/>
I'm sure there is a simple fix for this, but after a few days of trying different things I haven't found it. Thanks for your help!
Looks like you need to change key to id as you write item.id in keyExtractor and be sure you have id and it's different for each component:
<FlatList
data={this.props.tunes}
keyExtractor={(item, index) => item.id}
renderItem={({item}) => {
<Item
id={item.id} //instead of key
title={item.title}
composer={item.composer}
year={item.year}
/>
}}
/>
Or if you don't have unique key use keyExtractor={(item, index) => index}
Related
I'm using react-native FlatList to render out a punch on elements the data of which comes from an external API.
I want to prevent the user from picking the same item twice. So the way I'm going about this it hiding the item after they pick it.
If, let's say, I have a state picked like so
const [ picked, setPicked ] = useState(false);
changing it will of course hide all the elements.
<FlatList
{/*some other props*/}
data={allCards}
renderItem={(card: ListRenderItemInfo<CardsProps>) => (
<TouchableOpacity
style={[ styles.holder, { display: picked ? "none" : "flex" } ]}
onPress={() => handleChoice(parseInt(card.item.id))}
>
<Card
{/*some card props*/}
/>
</TouchableOpacity>
)}
/>
How can I go about changing the state for only one element inside the FlatList??
Is there a better approach you would recommend to do the same job?
try it like this, it will work,
<FlatList
{/*some other props*/}
data={allCards}
renderItem={(card: ListRenderItemInfo<CardsProps>) => picked ? (
<TouchableOpacity
style={[ styles.holder, ]}
onPress={() => handleChoice(parseInt(card.item.id))}
>
<Card
{/*some card props*/}
/>
</TouchableOpacity>
): undefined}
/>
The easiest way to do this is if you create an object with all the ids and while inserting it you can check it whether it's in that list or not
it'll cost u O(1) time to check.
<FlatList
{/*some other props*/}
data={allCards}
renderItem={(card: ListRenderItemInfo<CardsProps>) => picked ? (
<TouchableOpacity
style={[ styles.holder, ]}
onPress={() => handleChoice(parseInt(card.item.id))}
>
<Card
{/*some card props*/}
/>
</TouchableOpacity>
): undefined}
/>
const map=new Map();
const handleChoice=(id)=>{
if(Map.get(id)===undefined){
Map.set(id,true)
//add the element to ur list where u need it to
}
}
I already researched similar questions on the topic, so please don't be in a hurry to close this question.
I have a search screen, where I type a search term and I fetch listed results. Once fetched, I want to tap on any one of them and navigate to that page details object. My initial first tap is never been detected, but my second is. My component:
return (
<View>
<TextInput
value={query}
placeholder="Type Here..."
onChangeText={(search) => setQuery(search)}
/>
{fetching ? (
<Spinner
visible={fetching}
textContent={'Fetching data...'}
textStyle={{ fontSize: 14 }}
/>
) : null}
{items ? (
<ScrollView keyboardShouldPersistTaps={true}>
<FlatList
numColumns={1}
horizontal={false}
data={items}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<TouchableOpacity
onPress={() =>
navigation.navigate('Item Details', { id: item.id })
}>
<ItemDisplay item={item} keyboardShouldPersistTaps="always" />
</TouchableOpacity>
)}
/>
</ScrollView>
) : null}
</View>
);
My ItemDisplay is just a row of item's photo and item's id. Nothing fancy.
As suggested on the similar questions, I do use <ScrollView keyboardShouldPersistTaps={true}> and <ItemDisplay item={item} keyboardShouldPersistTaps="always" /> However it doesn't help m, I still need to tap twice. Any ideas on how do I fix this? I am testing it on android, if that matters.
I also tried <ScrollView keyboardDismissMode="on-drag" keyboardShouldPersistTaps={"always"} > but this doesnt help as well.
If I understood your problem correctly, you are facing an issue clicking an item when the Keyboard is present.
If so you can simply pass keyboardShouldPersistTaps as always to your FlatList and then the children of the list will receive taps when an item is pressed.
Also, you shouldn't be using a ScrollView to wrap your Flatlist, if they are both having the same orientation, numColumns isn't required as you have passed it as 1
You can read more about keyboardShouldPersistTaps at https://reactnative.dev/docs/0.64/scrollview#keyboardshouldpersisttaps
Take a look at this Live Snack to see it in action.
I can't limit the number of rendering per batch in Flatlist.
here is the code:
<FlatList
horizontal
showsHorizontalScrollIndicator={false}
initialNumToRender={5}
windowSize={5}
data={twitch.data}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) => (
{Data}
)}/>
By default it loads 20 items.
Here's my code to generate a paging scrollview in React-native:
<ScrollView
horizontal
pagingEnabled
onScrollEndDrag={this.handlePagerScroll}
scrollsToTop={false}
scrollEventThrottle={100}
removeClippedSubviews={false}
automaticallyAdjustContentInsets={false}
directionalLockEnabled
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
>
{ renderPageHere() }
</ScrollView>
The code above is working.
Function this.handlePagerScroll which attached to onScrollEndDrag event is working too. The problem is that I can't determine which page that's currently active, since onScrollEndDrag has no event paremeter
I think to use simple math using value in x or y to no avail since I have no idea how to obtain them
Does anyone familiar with my problem and can offer me any solution?
Thank you
I have made a horizontal paging view using FlatList and identifying visible item in FlatList is fairly easy like this.
<FlatList
horizontal={true}
pagingEnabled
removeClippedSubviews={false}
data={listData}
onViewableItemsChanged={data => { this.viewableItem(data) }} renderItem={this.renderRow}
keyExtractor={(item, index) => item.id}
/>
UPDATE
As per issue posted on GitHub and also mentioned by #DennyHiu
you can use
viewabilityConfig={this.viewabilityConfig}
like this
this.viewabilityConfig = {
itemVisiblePercentThreshold: 50,
minimumViewTime: 1,
};
<FlatList
key={this.state.key}
onViewableItemsChanged={this.handleViewableItemsChanged}
viewabilityConfig={this.viewabilityConfig}
data={this.state.timeline}
renderItem={({item}) => {}}
/>
I am using checkbox from react-native-element
When i check the box it dose not display checked
how can i display it ?
here is my code
<View>
<FlatList data={all_national_number}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) =>
<CheckBox
title={item}
uncheckedIcon={<Image source={require('../../assets/unchecked.png')} />}
checkedIcon={<Image source={require('../../assets/checked.jpg')} />}
onPress={() => this._onSelect(item)}>
</CheckBox>
}>
</FlatList>
</View>
It is not showing because you are missing a property called checked which should be either true or false. So, ideally your method this._onSelect(item)} should contain logic to alter the checked status.
Something on the lines of
onSelect = (item) => {
this.setState({ isChecked: true})
}
and in your checkbox, you need to add one more prop that is checked={this.state.isChecked}
Hope it helps :)
You need to add the checked property on the checkbox
<CheckBox
title='Click Here'
checked={this.state.checked}
/>