React-native StackScreen. How to use same styling for all those StackScreen?

How to make this all Stack Screen having just 1 styling, because all of them are having a same style. As you can see. Options Props having a headerStyle, headerTitleStyle, headerLeft, headerTitleAlign have a same value.

This is my file App.js

const MainNavigator = () => { 
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="MainScreen">

                    <Stack.Screen
                        name="MagicScreen"
                        component={MagicScreen}
                        options={{
                            title: 'Magic',
                            headerStyle: {
                                backgroundColor: '#0074C4',
                            },
                            headerTitleStyle: {
                                color: 'white',
                                fontSize: 24
                            },
                            headerLeft: null,
                            headerTitleAlign: 'center',
                        }}
                    />

                    <Stack.Screen
                        name="FightingStyleScreen"
                        component={FightingStyleScreen}
                        options={{
                            title: 'Fighting Style',
                            headerStyle: {
                                backgroundColor: '#0074C4',
                            },
                            headerTitleStyle: {
                                color: 'white',
                                fontSize: 24
                            },
                            headerLeft: null,
                            headerTitleAlign: 'center',
                        }}
                    />

                    <Stack.Screen
                        name="WeaponScreen"
                        component={WeaponScreen}
                        options={{
                            title: 'Weapons',
                            headerStyle: {
                                backgroundColor: '#0074C4',
                            },
                            headerTitleStyle: {
                                color: 'white',
                                fontSize: 24
                            },
                            headerLeft: null,
                            headerTitleAlign: 'center',
                        }}
                     />


            </Stack.Navigator>
        </NavigationContainer>
    )
};

I tried to find the example code on google. But still don’t find the example :")

>Solution :

Just pass the screenOptions prop to the Stack.Navigator component. It defines the default options for each screen in a stack. Something like this will work:

<Stack.Navigator 
    initialRouteName="MainScreen"
    screenOptions={{
       headerStyle: {
           backgroundColor: '#0074C4',
       },
       headerTitleStyle: {
           color: 'white',
           fontSize: 24
       },
       headerLeft: null,
       headerTitleAlign: 'center',
   }}
>

You can then change the title for each of the screens separately.