Shared Element Crashing on Android. React Navigationn V5.

[vic2tee4u]

Once I try to Navigate to my detail screen I get the following error. Error React.Children only expected to receive a single React element child Transition works well on IOS.

I'm passing sharedElementsConfig on my HomeStack.screen and when I comment that out, it works on android but transition won't show.

const sharedElementsConfig = (route: any) => {
    const { item } = route.params;
    if (Platform.OS !== 'android') {
        return [
            {
                id: `item.${item._id}.backdrop`,
                // animation: 'fade-out',
                // resize: 'none',
            },
            {
                id: `item.${item._id}.meta`,
                animation: 'fade',
                resize: 'none',
            },
            {
                id: `item.${item._id}.image`,
                otherId: `item.${item._id}.image`,
                // animation: 'move',
                resize: 'auto',
            },
        ];
    }
    return null;
};

    <HomeStack.Navigator
        headerMode="none"
        mode="modal"
        screenOptions={{
            gestureEnabled: false,
        }}>
        <HomeStack.Screen name="Feed" component={Home} options={options} />
        <HomeStack.Screen name="MovieDetails" component={MovieDetails} options={options} />
        <HomeStack.Screen name="Reviews" component={Reviews} options={options} />
        <HomeStack.Screen name="Biography" component={Biography} options={options} />
        <HomeStack.Screen name="MoviecategoryList" component={MovieCategoriesList} options={options} />
        <HomeStack.Screen
            name="MovieDetailPreview"
            component={MovieDetailPreviewScreen}
            options={options}
            sharedElementsConfig={(route) => sharedElementsConfig(route)}
        />
    </HomeStack.Navigator>

Stats: react-native : 0.63.4 "react-native-shared-element": "^0.7.0", "react-navigation-shared-element": "5.0.0-alpha1",

I'm currently by-passing android to get the app to run, any solution will be appreciated.

[vic2tee4u]

sharedElementsConfig ought to be sharedElements. So closing.

[vic2tee4u]

After restarting my metro bundler, I ran into the same issue again. it seems that sharedElementsConfig is the right tag but it breaks on android.

[ella33]

Hello @vic2tee4u, I was having the same issue only on Android, but what fixed the error for me was to double check that I have the correct shared elements on the screen that I am navigating to - were the crash was happening.

So, I was navigating from a login screen to a forgot password screen and I was having:

1. a wrong id on a shared element and
2. I was missing a shared element completely in the forgot password screen, both of these were configured in the sharedElementsConfig object on the forgot password screen which was crashing when navigating to, only on Android, on iOS I had no issues even with this misconfiguration.

After fixing these, there was no crash. Hope this will help you! Take care!

[vic2tee4u]

Hey @ella33 I'm taking a closer look at the configuration, thus far, I havent seen anything missing yet. But I'll do a clean sweep just to be sure.

[guistrutzki]

I passed by so many problems including this issue on Android. On iPhone, it works perfectly, so I decided to bypass the integration for android.

I did this solution in my sharedElementsConfig

sharedElementsConfig={route => {
    if (Platform.OS === 'android') {
      return [];
    }
    return [route.params.card.slug];
}}

[lucasvieceli]

in mine I noticed that an animation was happening this problem

before it was like this:

 return (
    <SharedElement id="cartbar">
        <Animated.View style={[styles.container, style, styleCartBar]}>

                     .....

        </Animated.View>
    </SharedElement>
    );

adjusted:

 return (
        <Animated.View style={[styles.container, style, styleCartBar]}>
            <SharedElement id="cartbar">
               .....
            </SharedElement>
        </Animated.View>
    );

[evanjmg]

Same here getting endNode errors like so Fatal Exception: com.facebook.react.bridge.JSApplicationIllegalArgumentException Error while updating property 'endNode' of a view managed by: RNSharedElementTransition

com.facebook.react.uimanager.NativeViewHierarchyManager.resolveView (NativeViewHierarchyManager.java:103)
com.ijzerenhein.sharedelement.RNSharedElementTransitionManager.setViewItem (RNSharedElementTransitionManager.java:79)
com.ijzerenhein.sharedelement.RNSharedElementTransitionManager.setEndNode (RNSharedElementTransitionManager.java:92)

[IjzerenHein]

Related to: https://github.com/IjzerenHein/react-native-shared-element/issues/33

[IjzerenHein]

It's unclear what this exception on Android is happening. If you can create a test-case in one of the example apps I can investigate it. This user pointed out that is might be related to reanimated2: https://github.com/IjzerenHein/react-native-shared-element/issues/33#issuecomment-903748373