Android: Error while updating property 'endNode' of a view managed by: RNSharedElementTransition

I got the following error on Android:

The error was thrown after I played around a little bit, so it only appears sometimes. Don’t know an exact way on how to reproduce this…

In my project I have a lot of navigation and animation going on, including many shared elements, this doesn’t seem to be the cause for this issue though, as it also happened after I stripped my code down to a minimum just so I can test it.

package.json

"react-native": "0.62.2",
"react-native-shared-element": "^0.7.0",
"react-navigation-shared-element": "^5.0.0-alpha1",
"@react-navigation/native": "^5.1.6",
"@react-navigation/stack": "^5.2.13",
"@react-navigation/bottom-tabs": "^5.2.7",

I’m not sure if this is react-native-shared-element or react-navigation-shared-element related…

[kdo1234]

I have the same issue on Android 30. Wrapping each SharedElement and each child of the SharedElement with a <View collapsable={false}> seemed to resolve the issue in the debug apk, but not in the release apk. I thought the issue might be related to the new detachInactiveScreens logic in React Navigation and react-native-screens, so I tried with detachInactiveScreens={false} and detachInactiveScreens={false} as well as calling enableScreens() from react-native-screens. This didn’t resolve the issue. I also tried versions of React Navigation and react-native-screens from before detachInactiveScreens was introduced and that didn’t resolve the issue.

Latest versions used: “@react-navigation/bottom-tabs”: “5.11.2”, “@react-navigation/compat”: “5.3.10”, “@react-navigation/material-top-tabs”: “5.3.10”, “@react-navigation/native”: “5.8.10”, “@react-navigation/stack”: “5.12.8”, “react-native-tab-view”: “2.15.2”, “react-native-screens”: “2.16.1”, “react-native-shared-element”: “0.7.0”, “react-navigation-shared-element”: “5.0.0-alpha1”,

Versions from from detachInactiveScreens was introduced: “@react-navigation/bottom-tabs”: “5.11.2”, “@react-navigation/compat”: “5.3.10”, “@react-navigation/material-top-tabs”: “5.3.10”, “@react-navigation/native”: “5.8.10”, “@react-navigation/stack”: “5.10.0”, “react-native-tab-view”: “2.15.2”, “react-native-screens”: “2.13.0”, “react-native-shared-element”: “0.7.0”, “react-navigation-shared-element”: “5.0.0-alpha1”,

[factorycreacom]

I had the same problem and solved it as follows.

if you used flatlist

NOT WORK:

const RenderItem = (item,index) => {
return <View><Text>{item}</Text></View>;
}
<FlatList
...
renderItem={(item,index) => <RenderItem item={item} index={index} />} />

WORK:

const RenderItem = (item,index) => {
return <View><Text>{item}</Text></View>;
}
<FlatList
...
renderItem={(item,index) => RenderItem(index,item)} />