How to use dynamic Stack.Screen in React Native?

I have navigation defined in App.js like below

  <NavigationContainer>
    <Stack.Navigator>
      <StackScreenCard
        name="HomeScreen"
        componentName="HomeScreen"
        title="Country City Information"
      />

      <Stack.Screen name="CountriesGrid" component={CountriesGrid} />
    </Stack.Navigator>
  </NavigationContainer>

Imported StackScreenCard using below code in App.js

import { createNativeStackNavigator } from "@react-navigation/native-stack";
import StackScreenCard from "./components/ui/StackScreenCard";

StackScreenCard.js code is below

import { createNativeStackNavigator } from "@react-navigation/native-stack";

const StackScreenCard = ({ name, componentName, title }) => {
  const Stack = createNativeStackNavigator();

  return (
    <Stack.Screen
      name={name}
      component={componentName}
      options={{
        title: { title },
        headerTintColor: "white",
        headerTitleAlign: "center",
      }}
    />
  );
};

export default StackScreenCard;

It is giving an error message

> Error: A navigator can only contain 'Screen', 'Group' or
> 'React.Fragment' as its direct children (found 'StackScreenCard' for
> the screen 'HomeScreen'). To render this component in the navigator,
> pass it in the 'component' prop to 'Screen'.

If I remove StackScreenCard call from App.js then screens are working fine. Is it not possible to use dynamic Stack.Screen ? Basically I want to create it like a separate component so that I can can write the css once there and call that component multiple times for different screens.

The <Stack.Screen /> component needs to directly render inside its parent components which are stack.navigator and navigatorContainer. Therefore make a seperate component and render it inside the screen instead of rendering a component which returns a screen

Instead of making a component and rendering inside the stack.navigator which returns a Stack.Screen component ,you can just render a dynamic component and name it inside the screen and by this you can create a separate component and do anything you want be it the styling ,pass data etc.You can even make nested navigations inside this component. In this case say e.g Home. Now this Home component can return anything.

in your App.js

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

function App(){
return(
 <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="ScreenCard" component={ScreenCard}/>
          <Stack.Screen name="CountriesGrid" component={CountriesGrid} />
        </Stack.Navigator>
      </NavigationContainer>
)

}

<!-- end snippet -->

In your Component,ScreenCard

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import {View,Text} from react Native
const ScreenCard = () => {
  
  return (
    <View> 
       <Text> Screen card </Text>
   </View>
  );
};

export default StackScreenCard;

<!-- end snippet -->

You can change this screen component as you want

If you want to pass props to this component you can make another component which will return this particular component with props, Let me show you

In App.js

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    function App(){

    function StackScreenCard(){
    return <ScreenCard data={dataExample} color={colorExample} />
    }

    return(
     <NavigationContainer>
            <Stack.Navigator>
              <Stack.Screen name="ScreenCard" component ={StackScreenCard}/>
              <Stack.Screen name="CountriesGrid" component={CountriesGrid} />
            </Stack.Navigator>
          </NavigationContainer>
    )

    }

<!-- end snippet -->

Now you can pass the props as you like to this component and change it dynamically. There are other ways also. Feel free to try.