CODEWITHSUNDEEP
react-nativereact-navigation
TCS
TCS

Reputation: 779

React Navigation Drawer with SafeAreaView

Trying to use react navigation drawer with safeareaview. By the way I'm using custom drawer.

My drawer works like below (red one is, drawer. And blue one is rest from safeareaview, and bottom white field too).

I want drawer to override all safearea fields. (it must overrides, top blue and bottom white areas)

enter image description here

Here's my codes;

My App.js:

 <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <SafeAreaView style={{ flex: 0, backgroundColor: '#3b7a99' }} />
        <SafeAreaView style={[Layout.fill, { backgroundColor: '#fff' }]}>
          <NavigationContainer ref={navigationRef}>
            <StatusBar barStyle="light-content" backgroundColor="#3b7a99" />
            <ApplicationNavigator />
          </NavigationContainer>
        </SafeAreaView>
      </PersistGate>
    </Provider>

My navigator:

import React, { useEffect, useState } from 'react'
import { createDrawerNavigator } from '@react-navigation/drawer'
import { DashboardNavigator, OrderNavigator, TireNavigator } from '@/Navigators'
import { useSelector } from 'react-redux'

import DrawerContent from './DrawerContent'

const Drawer = createDrawerNavigator()

let MainNavigator

// @refresh reset
const ApplicationNavigator = () => {
  const [isApplicationLoaded, setIsApplicationLoaded] = useState(false)
  const applicationIsLoading = useSelector((state) => state.startup.loading)

  useEffect(() => {
    if (MainNavigator == null && !applicationIsLoading) {
      MainNavigator = require('@/Navigators/Main').default
      setIsApplicationLoaded(true)
    }
  }, [applicationIsLoading])

  return (
    <Drawer.Navigator
      drawerStyle={{ width: '100%' }}
      drawerContent={(props) => <DrawerContent {...props} />}
    >
      <Drawer.Screen name="Dashboard" component={DashboardNavigator} />
      <Drawer.Screen name="Order" component={OrderNavigator} />
      <Drawer.Screen name="Tire" component={TireNavigator} />
    </Drawer.Navigator>
  )
}

export default ApplicationNavigator

Upvotes: 0

Views: 2017

Answers (1)

satya164
satya164

Reputation: 10145

A child cannot override paddings applied by a parent component.

You shouldn't wrap your whole app in SafeAreaView, instead, wrap the specific content inside your screens when applicable.

More info https://reactnavigation.org/docs/handling-safe-area

Upvotes: 3

Related Questions