How to set custom border radius and zIndex in react-navigation for screen in a drawer navigator?

Question

I am using react-navigation v 6.1 for drawer navigation, I am trying to implement the following:

Currently this is what I was able to achieve:

How can I set border radius for the stack or routes that has been navigated by the user?

I tried to set the sceneContainerStyle border radius on screenOptions for <Drawer.Navigator> but seems that there is actually another child view inside the scene view.

Answer 1

After a lot of trials I found a hack since I was using nested navigator it appeared that navigator had a child view which wraps the current screen view, first I set theme for:

import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
import AppGlobalNavigator from './navigation'

const navigatorTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: 'rgba(0, 0, 0, 0)',
  },
};


const App = () => )
 <NavigationContainer theme={navigatorTheme}>
    <AppGlobalNavigator/>
 </NavigationContainer
)

Then I got a transparent screen views, I wrapped each component with view which has backgroundColor set to white color as as set borderRadius before passing them to navigator screen <Stack.Screen>.

Result: