React Native add Screens dynamically

Question

I want to add screens dynamically from a changeable array.

This works:

but this doesn't work: It says: Error: Couldn't find any screens for the navigator. Have you defined any screens as its children?

How can I fix the second to be more "dynamic"?

Answer 1

you can change your components to list of objects.

then loop inside the item by their key and value.

const components = [
 {
   name: "Home",
   element: HomeScreen
 },
 {
   name: "Details",
   element: DetailsScreen
 }
];

const renderScreen = () => {
  let result = null;

  if (components) {
    result = components.map((item, i) => {
       return <Stack.Screen name={item.name} element={item.element} />
    });
  }

  return result;
}

return(
  {renderScreen()}
)

Answer 2

将element => { <Stack... /> }改为element => { return <Stack... /> }或element => ( <Stack... /> )