skip to Main Content

I want to change the colour above the drawer navigator which is white right now to red. Is there any default setting for iOS where all the screen which we navigate will be always on the colour which we set?

drawer nvaigator screenshot with above white space making it look ugly

import React from 'react';
import { View, Text, StyleSheet, Image, StatusBar } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList } from '@react-navigation/drawer';
import { createStackNavigator } from '@react-navigation/stack';

import LoginScreen from './Screens/LoginScreen';
import HomeScreen from './Screens/HomeScreen';
import GalleryScreen from './Screens/GalleryScreen';
import ImageDetail from './Screens/ImageDetail';
import DetailScreen from './Screens/DetailScreen';
import Navbar from './Screens/Navbar';
import NotificationScreen from './Screens/NotificationScreen';
import NewNotification from './Screens/NewNotification';
import NewGalleryScreen from './Screens/NewGalleryScreen';
import DetailsScreen from './Screens/DetailsScreen';

// Create a Drawer Navigator
const Drawer = createDrawerNavigator();

// Create a Stack Navigator for Login flow
const Stack = createStackNavigator();

// Custom Drawer Content Component
const CustomDrawerContent = (props) => (
  <DrawerContentScrollView {...props}>
    <View style={styles.header}>
        source={{ uri: '' }}
      <Text style={}>John Doe</Text>
      <Text style={}>[email protected]</Text>
      <Text style={}>Test App School 2</Text>
    <DrawerItemList {...props} />

// Drawer Navigator containing main screens
const HomeDrawerNavigator = () => (
    drawerContent={(props) => <CustomDrawerContent {...props} />}
    <Drawer.Screen name="GalleryScreen" component={GalleryScreen} />
    <Drawer.Screen name="Navbar" component={Navbar} />
    <Drawer.Screen name="NotificationScreen" component={NotificationScreen} />
    <Drawer.Screen name="nNotification" component={HomeScreen} />
    <Drawer.Screen name="Notification" component={NewNotification} />
    <Drawer.Screen name="NewGalleryScreen" component={NewGalleryScreen} />

// Main App Component
const App = () => {
  return (
      <StatusBar backgroundColor="#fff" barStyle="light-content" translucent={true} />
            headerStyle: {
              backgroundColor: '#C8102E', // Red color for the header
            headerTintColor: '#fff', // White color for the header text
          <Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
          <Stack.Screen name="Home" component={HomeDrawerNavigator} options={{ headerShown: false }} />
          <Stack.Screen name="GalleryScreen" component={GalleryScreen} options={{ headerShown: false }} />
          <Stack.Screen name="ImageDetails" component={ImageDetail} options={{ headerShown: false }} />
          <Stack.Screen name="DetailScreen" component={DetailScreen} options={{ headerShown: false }} />
          <Stack.Screen name="NewGalleryScreen" component={NewGalleryScreen} options={{ headerShown: false }} />
              headerShown: true,
              headerStyle: {
                backgroundColor: '#C8102E',
              headerTintColor: '#fff',

// Styles for Custom Drawer Content
const styles = StyleSheet.create({
  header: {
    backgroundColor: '#C8102E',
    padding: 20,
    paddingTop: 40,
  logo: {
    width: 50,
    height: 50,
    marginBottom: 10,
  name: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold',
  email: {
    color: 'white',
    fontSize: 14,
  school: {
    color: 'white',
    fontSize: 14,
  drawerItems: {
    flex: 1,
    backgroundColor: '#fff',
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',

export default App;

I tried to make the drawer navigator with a static info and colour red for the upper part of the drawer navigator but that white gap I want to change that colour to red



  1. Add padding to the DrawerContentScrollView to fill the space properly and set the background color of the drawer content container.

    Add contentContainerStyle to DrawerContentScrollView:
    <DrawerContentScrollView {…props} contentContainerStyle={styles.drawerContainer}/>

    Update drawerContainer style:
    const styles = StyleSheet.create({
    drawerContainer: {
    flex: 1,
    backgroundColor: ‘#C8102E’,


    Update StatusBar background color:

    Login or Signup to reply.
  2. Use drawerStyle to style the drawer component. Something like this:

        drawerStyle: {
          backgroundColor: 'red',
      drawerContent={(props) => <CustomDrawerContent {...props} />}>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top