Trying to remove a view index above child count error

Question

What does this mean? This happens when I update a list of iterated views something like

<View style={{ flexDirection: 'row', padding: 20, backgroundColor: '#fff' }}>
  <Ionicons name={jobIcon} color={theme.iconColor} size={30} />
  <Text>{jobService}</Text>
  <Text>{jobDate}</Text>
</View>

mapped inside a scrollview.

this error pops up when I modify the array from child scene. scene1 - is where the ScrollView with job list array of views sence2 - is where I delete a job and should update scene1 when I do remove a job

Answer 1

If you want the LayoutAnimation to work with ScrollView, replace

LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)

with

        LayoutAnimation.configureNext({
                             duration: 300,
                             create: 
                             {
                                type: LayoutAnimation.Types.easeInEaseOut,
                                property: LayoutAnimation.Properties.opacity,
                             },
                             update: 
                             {
                                type: LayoutAnimation.Types.easeInEaseOut,
                             }
                            });

This works on both Android and iOS without any crashes.

Answer 2

In my case I was using LayoutAnimation for my ScrollView. Inside it a map of Items. When an Item is removed from the list this happens. Not using LayoutAnimation seems to be working fine.

Answer 3

It's happening when you call layout animation when it already in process. iOS will show an warning while Android will explode with this error. You can use this easy pattern to fix it when you're using LayoutAnimation from same component.

layoutAnimation()  {
  if (!this.layoutAnimationActive) {
    this.layoutAnimationActive = true;
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInOut, () => { this.layoutAnimationActive = false; });
  }
}

Answer 4

This happens when a component only has x amount of children, but you are trying to remove a child with index greater than x. Like an index out of bounds exception that is common with arrays. Can cause lots of frustration because often times the child you are trying to remove DOES INFACT EXIST. But might be happening because you are using a third party component that only expects a certain amount of children.

For me, it happened when I put an extra child into air-bnb MapView. I fixed the issue by making this element the child of it's grandparent (it was absolutely positioned so it didn't affect styling).

Answer 5

I encountered this issue when creating a react-native application using Expo.

This error was often getting raised when I was rendering new Markers onto a Map (which was rendered via a MapView component).

What fixed the issue for me was to add a key prop to the Marker component e.g.

 <Marker coordinate={coordinate} key={`${coordinate.latitude}_${coordinate.longitude}`} />

Hope this helps anyone who also encounters this issue when dealing with MapView and Marker components!