Let’s see how to set up the general styles for an application developed in React Native.
To do this, on the screen where the different screens and routes are established, within the StackNavigator, we will add the screenOptions
.
The screenOptions
is an object that contains the style and layout options for the screens in navigation. These options will be applied to all screens within the StackNavigator
unless specific options are specified for a particular screen.
Below is an example:
return ( <NavigationContainer> <Stack.Navigator // headerMode="none" // Optional comment screenOptions={{ headerStyle: { backgroundColor: "blue", }, headerTitleStyle: { fontWeight: 'bold', color: "white", fontSize: 25, }, cardStyle: { backgroundColor: '#f2f2f2', }, }} initialRouteName="Login"> <Stack.Screen name="Login" component={LoginScreen} /> <Stack.Screen name="Menu" component={MenuScreen} /> </Stack.Navigator> </NavigationContainer> );
headerStyle
: Defines the style of the screen header, such as background and height. In this case,backgroundColor
sets the background color of the header.headerTitleStyle
: Defines the style of the header title text.fontWeight
sets the boldness of the text,color
sets the text color, andfontSize
sets the font size to 25.cardStyle
: Defines the style of the screen card, which is the main area of the screen where the content is displayed.backgroundColor
sets the background color of the card, in this case, a slightly off-white shade (#f2f2f2
).
Hope this helps, Have a great day!
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2023/07/cropped-light_logo-5.png?resize=100%2C100&ssl=1)