I’m doing an app on android using react-native and I have a problem using touche input within my FlatList after removing and adding element to the FlatList.
How the problem happens :
- I add one element in my data array and it adds a Button to the FlatList.
- I can interact with the Button as expected.
- I reset the data array to [].
- It removes the Button from the FlatList.
- I add another element in my data array and it adds a Button to the FlatList
- (PROBLEM start here) even tho the Button appears in the FlatList, I can’t interact with it (I’ve tried other touchable elements like Pressable, TextInput or just using an onPress on an element and I get the same behavior)
- If I add another element to the data array, it will add a new working Button (i.e. first Button not working but second Button working)
- If I delete n Button and start adding n + m Button again, Then the first n would not work but the m-th last would work.
I reduced the problem to the following small code :
import React, {useState} from 'react';
import {Button, FlatList, View} from 'react-native';
export default function Test() {
const [data, setData] = useState([]);
function addData() {
setData(prev => [...prev, {key: new Date().getTime(), text: 'some text'}]);
}
function deleteAllData() {
setData([]);
}
return (
<View
style={{
flex: 1,
}}>
<Button title={'ADD'} onPress={() => addData()} />
<Button title={'DEL'} onPress={() => deleteAllData()} />
<FlatList
data={data}
renderItem={({item, index}) => {
return (
<Button
key={item.key}
title={`${item.key}`}
onPress={() => console.log('Clic!')}
/>
);
}}
/>
</View>
);
}
I think I’m missing something obvious but it’s driving me crazy^^ Any help would be appreciated !
I’m using react-native 0.66.0 and react 17.0.2 testing on my physical android device.