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

Question

<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?

source code

Answer 1

An option could be to render the components inline:

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