Trying to remove view index above number count error

Question

What does it mean? This happens when I update the list of duplicate views, e.g.

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

displayed inside the scroll.

this error appears when I modify an array from a child scene. scene1 is where ScrollView with an array of job representations sence2 is where I delete the task and should update scene1 when I delete the task

Answer 1

In my case, I used LayoutAnimation for my ScrollView. Inside is a map of objects. When an item is removed from the list, this happens. Do not use LayoutAnimation works fine.

Answer 2

This happens when you invoke a layout animation when it is already in progress. iOS will display a warning while Android will explode with this error. You can use this simple template to fix it when you use LayoutAnimation from the same component.

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

Answer 3

This happens when a component has only x number of children, but you are trying to remove a child with an index greater than x. Like an index exception outside the exception that is common with arrays. It can cause a lot of frustration, because often times the child you are trying to remove DOES INFACT EXIST. But it may happen that you use a third-party component that expects only a certain number of children.

For me, this happened when I added an extra child to airView bnb MapView. I fixed the problem by making this element a child of this grandfather (it was absolutely positioned, so it did not affect the style).

Answer 4

This can happen if you use some native components, where some ViewManager returns a LayoutShadowNode in createShadowNodeInstance ViewGroupManager or something that extends the ReactShadowNode in createShadowNodeInstance ViewManager on Android, and RCTShadowView in the shadowView RCTViewManager on iOS. But it returns null / nil for another View in another ViewManager.

Then, if you combine the children of both types in the same parent, and any of the elements without shadowViews / Nodes is preceded by a changing number of elements that have shadowViews / Nodes, then the indices will not match, and RCTUIManager on iOS and NativeViewHierarchyManager on Android will suppress and create these exceptions.

I recently resolved a similar issue inact-native-svg by forcing all ViewManager to return values, not null / null. https://github.com/facebook/react-native/issues/23350

So try updating response-native-svg to v9.2.4 and the problem can be resolved. Or try moving IonIcons to the end of your children.

Answer 5

In my case, I deleted an item in a virtualized list. I used redundancy to manage the list data and updated the list with new data. However, the component for the item that was deleted caused this error.

I solved this problem by adding a boolean state property for this component of the element, for example "hideItem". My element was a class component, but the setState hook could also be used for a functional component. I set this to true after uninstall. The record is correctly hidden with the layout animation, and when the page refreshed, it no longer displayed the deleted item. Consequently, the error disappeared on Android without the need to use LayoutAnimation.

Answer 6

Obviously, this mistake can show its ugly face in various conditions. After hours of debugging, I found that my main reason is the key support being passed to a component that doesn't need it. I'm still not sure why this caused a crash, however I suspect that this is because the component accepts the key as a unique way to identify the view, but also used the componentWillReceiveProps(props: *) life cycle method, which updated the state of the component.