How to add outside box shadow in react navigation bottom tabs? - react-navigation

Question

I would like to add a outside box shadow in react-native-navigation.
The desired effect should look like this:
Currently when I apply styles the outside box shadow does not change:
import React, { FunctionComponent } from 'react'
import NavigatorProps from './NavigatorBottomTabs.type'
import { Screen } from '../../Module/Navigation/Navigation.type'
import Route from '../../Module/Navigation/Navigation.route'
import { ANY } from '../../Type/Type'
import TabBar from './NavigatorBottomTabs.TabBar'
const RenderScreen = (Tab: ANY) => (screen: Screen) =>
<Tab.Screen key={screen.name} {...screen} />
const NavigatorBottomTabs: FunctionComponent<NavigatorProps> = (props) => {
const Tab = props.Tab
return (
<>
<Tab.Navigator
tabBar={TabBar}
initialRouteName={Route.RootDabshboardProfileRouter}
tabBarOptions={{
borderWidth: 1,
borderColor: 'red',
marginTop: 10,
style: {
borderTopWidth: 0,
elevation: 8,
backgroundColor: '#d9d9d9',
shadowColor: '#000000',
shadowOpacity: 0.8,
shadowRadius: 2,
shadowOffset: {
height: 1,
width: 1
}
}
}}
screenOptions={{
tabBarStyle: {
elevation: 8,
borderTopWidth: 0,
backgroundColor: '#d9d9d9',
shadowColor: '#000000',
shadowOpacity: 0.8,
shadowRadius: 2,
shadowOffset: {
height: 1,
width: 1
}
}
}}
>
{props.screens.map(RenderScreen(Tab))}
</Tab.Navigator>
</>
)
}
export default NavigatorBottomTabs