General Options and Styling Configuration for a React Native App

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, and fontSize 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!

DevCodeLight