EDIT: Changed the title to something more understandable. Also: I'm already using the extraData property, but somehow things don't reset properly.
I have a search window and the input is used for a simple API call. The results of that are rendered in a Flatlist (picture 1). That works fine so far. But when I update my search query the results in the list are not clickable anymore. For the longest time I had no idea what was happening, but looking at it in Flipper it seems there are some kind of leftover duplicates in the ViewGroup (picture 2).
As an explanation: There are only four actual items in the list. The ones that are not unfoldable are somewhat of a shallow copy of their proper counterpart. It's like they lay on top of the real items and I have no idea how to get rid of them. Each time I search there would be four new items added.
The code for the list looks as follows:
<View style={styles.container}><TextInput autoFocus={true} style={styles.textInputField} onChangeText={input => { onChangeText(input); }} keyboardAppearance="dark" value={searchString} /><View style={styles.albumList}><FlatList data={searchResults} keyExtractor={item => item.id} extraData={searchString} renderItem={({item}) => (<SearchResultsItem item={item} navigation={navigation} /> )} /></View></View>;I'm not sure if I should post more information since this is already getting pretty lengthy. But if anyone has any idea on how to tackle this I'd be super grateful and if more information is needed, please let me know :)