IjzerenHein / react-navigation-shared-element

React Navigation bindings for react-native-shared-element 💫
https://github.com/IjzerenHein/react-native-shared-element
MIT License
1.27k stars 124 forks source link

Error: React.Children.only expected to receive a single React element child. #204

Closed WrathChaos closed 2 years ago

WrathChaos commented 2 years ago
CleanShot 2021-10-03 at 22 49 51@2x
import * as React from "react";
import { Platform } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { isReadyRef, navigationRef } from "react-navigation-helpers";
import { createSharedElementStackNavigator } from "react-navigation-shared-element";
/**
 * ? Local Imports
 */
import { SCREENS } from "@shared-constants";
// ? Screens
import HomeScreen from "@screens/home/HomeScreen";
import SplashScreen from "@screens/splash/SplashScreen";
import SignUpScreen from "@screens/sign-up/SignUpScreen";

const Stack = createSharedElementStackNavigator();

const Navigation = () => {
  React.useEffect((): any => {
    return () => (isReadyRef.current = false);
  }, []);

  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        isReadyRef.current = true;
      }}
    >
      <Stack.Navigator
        mode="modal"
        screenOptions={{
          headerShown: false,
          cardStyleInterpolator: ({ current: { progress } }) => ({
            cardStyle: {
              opacity: progress,
            },
          }),
        }}
      >
        <Stack.Screen name={SCREENS.SPLASH} component={SplashScreen} />
        <Stack.Screen
          name={SCREENS.HOME}  component={HomeScreen}  />
        <Stack.Screen name={SCREENS.SIGN_UP} component={SignUpScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default Navigation;

I cannot use react-navigation-shared-element on ANDROID. It works great on iOS. On android it throws this error. When I deleted the two Stack.Screen it works with 1 screen but there is no logic for that.

Can you help me?

WrathChaos commented 2 years ago

Complete my bad, I did not wrap the SharedElement component's child.