CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
vincentsty
vincentsty

Reputation: 3221

React navigation override drawer safeareaview

How could i override/customized the default SafeAreaView provided with react-navigation/react-navigation-drawer.

Source: https://reactnavigation.org/docs/en/handling-iphonex.html

I try to override by enclosing <SafeAreaView></SafeAreaView> as follow in the component/view but it ends up having duplicate SafeAreaView UI instead. Meaning that it append another SafeAreaView instead of overriding the default built in SafeAreaView of react-navigation.

<SafeAreaView
  style={{flex: 1}}
  forceInset={{ bottom: 'never' }}>
  ...
</SafeAreaView>

Upvotes: 0

Views: 747

Answers (1)

Hend El-Sahli
Hend El-Sahli

Reputation: 6732

You would need to create a custom contentComponent for your drawer:

const DrawerNavigatorConfig = {
  contentComponent: props => <Menu {...props} />
};
createDrawerNavigator(RouteConfigs, DrawerNavigatorConfig);

You would need to implement that Menu component... which could be like:

const Menu = () => {
  return (
    <SafeAreaView
        forceInset={{ top: 'always', bottom: 'never' }}
         style={{flex: 1}}
    >
        ...
    </SafeAreaView>
  );
};

Upvotes: 1

Related Questions