I created a background component with a picture-CodePudding

I created a background component with a picture. I want to use it in Navigator for all screens but I get error Error: A navigator can only contain 'Screen', 'Group' or 'React.Fragment' as its direct children (found 'BackgroundImage'). To render this component in the navigator, pass it in the 'component' prop to 'Screen'.

  return (
<BackgroundImage>
  <Stack.Navigator
    screenOptions={{
      headerStyle: { backgroundColor: Colors.header },
      headerTintColor: 'white',
      contentStyle: { backgroundColor: Colors.primary100 },
    }}
  >
    <Stack.Screen name="Login" component={LoginScreen} />
    <Stack.Screen name="Register" component={RegisterScreen} />
  </Stack.Navigator>
 </BackgroundImage>

); }

My component

 const image = require('../assets/background/home.png');

const BackgroundImage = ({children}) => (
    <ImageBackground source={image} style={styles.image}>
        {children}
    </ImageBackground>
);


const styles = StyleSheet.create({
    container: {
      flex: 1,
      flexDirection: 'column',
    },
    image: {
      flex: 1,

      justifyContent: 'center'
    }
  });

export default BackgroundImage;

I this case is works

function HomeScreeen() {
  return (
    <BackgroundImage>
    <View style={styles.rootContainer}>
      <Image source={logo} />
      <Text style={styles.title}>Test!</Text>
    </View>
    </BackgroundImage>
  );
}

CodePudding user response：

You can't use BackgroundImage component in this case. Try with this:

on Root component,

<BackgroundImage>
  <NavigationContainer> // from '@react-navigation/native';
    <Stack.Navigator
     ...
    />
  </NavigationContainer>
</BackgroundImage>

CodePudding user response：

@superDev1117 I use NavigationContener in this file and I get "Error: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass 'independent={true}' explicitly. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them."

function Navigation() {
  const authCtx = useContext(AuthContex);
  return (
    <NavigationContainer>
      {!authCtx.isAuthenticated && <AuthStack />}
      {authCtx.isAuthenticated && <AuthenticatedStack />}
    </NavigationContainer>