Description
I've noticed a strange problem with FlatList and LayoutAnimation on Android only (no issue on iOS). If I have a FlatList with rows A,B,C and I remove A and C at the same time with a LayoutAnimation applied, row B disappears as well. Then, if A and C are added back to the list, an error is triggered that says
index=2 count=1
addInArray
ReactViewGroup.java:483
In my app, I have a FlatList being populated by a realm.io database. The data is filtered by a TextInput component matching the title of the realm object. When I apply a LayoutAnimation to the list, something goes wrong on android.
Reproduction Steps and Sample Code
I can't post this on sketch because there's no FlatList yet, but here's the offending component. It takes a prop input containing a string, which is passed from a simple TextInput. the variable results is then filled with realm Objects with titles that match the given input.
for example, if I type in 'Item', I might get a list that looks like this:
If I then add '002', the list should look like this:
- Item002
Instead, all the items disappear, and when I press backspace I get the error mentioned above.
Here's the code for the component:
class SearchResults extends Component {
componentWillReceiveProps (nextProps) {
if (nextProps.input !== '' && this.props.input !== '') {
LayoutAnimation.easeInEaseOut()
}
render () {
let {input} = this.props
let results = realm.objects('MyObject')
.filtered('title CONTAINS[c] $0', input)
.sorted('updatedAt', true)
return (
<FlatList
{...this.props}
data={results}
renderItem={({item, index}) => <SearchResult item={item} key={index} size={48} />}
keyExtractor={item => item.id}
/>
)
}
}
Solution
This only happens on Android when LayoutAnimation is applied, and appears to be a problem in the ReactViewGroup.java file. As far as I can tell, the error above is thrown because the list should have one item, but the last item has been removed mistakenly.
Additional Information
- React Native version:0.43.0-rc.1
- Platform: works on iOS, not on Android
- Development Operating System: Linux for android, MacOS for iOS
Description
I've noticed a strange problem with FlatList and LayoutAnimation on Android only (no issue on iOS). If I have a FlatList with rows A,B,C and I remove A and C at the same time with a LayoutAnimation applied, row B disappears as well. Then, if A and C are added back to the list, an error is triggered that says
In my app, I have a FlatList being populated by a realm.io database. The data is filtered by a TextInput component matching the title of the realm object. When I apply a LayoutAnimation to the list, something goes wrong on android.
Reproduction Steps and Sample Code
I can't post this on sketch because there's no FlatList yet, but here's the offending component. It takes a prop
inputcontaining a string, which is passed from a simple TextInput. the variableresultsis then filled with realm Objects with titles that match the given input.for example, if I type in 'Item', I might get a list that looks like this:
If I then add '002', the list should look like this:
Instead, all the items disappear, and when I press backspace I get the error mentioned above.
Here's the code for the component:
Solution
This only happens on Android when LayoutAnimation is applied, and appears to be a problem in the
ReactViewGroup.javafile. As far as I can tell, the error above is thrown because the list should have one item, but the last item has been removed mistakenly.Additional Information