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

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

Answer 1

it's works for me!

<BottomTab.Navigator
      screenOptions={{
        tabBarBackground: () => (
          <View
            style={
              Platform.OS === 'ios' && {
                shadowColor: 'gray',
                shadowOffset: { width: 0, height: -1 },
                shadowOpacity: 0.5,
                shadowRadius: 10,
                backgroundColor: 'white',
                height: 100,
                borderRadius: 20,
              }
            }
          />
        ),
      }}