A navigator can only contain 'Screen', 'Group' or 'React.Fragment' as its direct children

[KingAmo]

https://stackoverflow.com/questions/67584461/a-navigator-can-only-contain-screen-group-or-react-fragment-as-its-direct/67584664#67584664

<Stack.Navigator>
  {
    isLogin ? <ComponentA /> :  <ComponentB />
  }
</Stack.Navigator>


const ComponentA = () => (
 arrA.map( v => <Stack.Screen name={v.name} component={v.component} />)
)

const ComponentB = () => (
 arrB.map( v => <Stack.Screen name={v.name} component={v.component} />)
)

i want use some hooks in componentA and componentB, so i have to use them as function component, any help please?

[andresemartinez]

I have a similar situation with the BottomTabNavigator. Three of my 5 tabs use the tabBarBadge, so I have three different states that I would like con constrain to each tab.

Current configuration (simplified)

const Tab = createBottomTabNavigator<TabBarNavigatorParamList>();

export function TabNavigator() {
    const state1 = useState1()
    const state2 = useState2()

    return (
        <Tab.Navigator>
            <Tab.Screen
                name="Tab1"
                component={Tab1}
                options={{tabBarBadge: state1}}
           />
          <Tab.Screen
                name="Tab2"
                component={Tab2}
                options={{tabBarBadge: state2}}
           />
  
          // [...]

    </Tab.Navigator>
  );
}

What I would like to do (simplified)

const Tab = createBottomTabNavigator<TabBarNavigatorParamList>();

export function TabNavigator() {

    return (
        <Tab.Navigator>
            <Tab1 />
            <Tab2 />
            // [...]
    </Tab.Navigator>
  );
}

function Tab1() {
    const state1 = useState1()

    return (
          <Tab.Screen
                name="Tab1"
                component={Tab1}
                options={{tabBarBadge: state1}}
           />
    );
}

function Tab2() {
    const state2 = useState2()

    return (
          <Tab.Screen
                name="Tab2"
                component={Tab2}
                options={{tabBarBadge: state2}}
           />
    );
}

Also it makes it more readable when you have many screens on a NativeStackNavigator with a lot of configuration on each one.

[adamhari]

Why aren't you hooking into the state and managing the screen options in the screen components themselves via navigation.setOptions?

[andresemartinez]

To be honest, I didn't know it was a option. I'm not sure if I like it or not, I think it would be cleaner to be able to change the badge directly where it's drawn, It makes it easier to find or not accidentally break by someone who is not that familiar with the code, but I would have to play a little with it to be sure

[raajnadar]

React Navigation 7 supports a layout prop for the screen component that can be used to add a wrapper (such as a context provider) for the screen component.

https://reactnavigation.org/docs/7.x/screen/#layout

Reference - #11977 (comment)