How to add shadow in @react-navigation/bottom-tabs?

Question

i am trying to apply shadow on react-native bottom tab but i am unable to do that, how can we add shadow on react native bottom tab?

my tab bar style.

   tabBarOptions={{  
      style: {
        // flex:1,
        position: 'absolute',
        backgroundColor:
        themeColorcontext.themeColor == 'light' ? '#fff' : '#222',
        borderTopLeftRadius: vpWidth*0.085,
        borderTopRightRadius: vpWidth*0.085,
        height: vpHeight*0.15,
        shadowColor: themeColorcontext.themeColor == 'light' ? 'rgba(0,0,0,0.5)' : 'rgba(255,255,255,0.5)',
        shadowOffset: { width: 0, height: 6 },
        shadowOpacity: 1,
        shadowRadius: 6,  
        elevation: 10,
        // flexWrap:'wrap', 
        borderTopColor:themeColorcontext.themeColor == 'light' ? '#fff' : '#222',
        borderTopWidth:1,
        borderWidth:1,
        borderColor:themeColorcontext.themeColor == 'light' ? '#fff' : '#222',
        // width:20
      },
    }}

Answer 1

you could try setting the "tabBarBackground" property of the screenOptions attribute. The tabBarBackground accepts a function that would return a Node so you can pass in a custom element with applied styling. Example:

<AppTab.Navigator screenOptions={{ 
    headerShown: false,
    tabBarBackground: () => 
      { /* You can customize and play around with the shadows */ }
      (<View style={{
        shadowOffset: { width: 1, height: 1}, 
        shadowColor: 'gray', 
        shadowRadius: 1 }}
      />) 
}}>
  <AppTab.Screen name="Screen1" component={MyScreen}/>
</AppTab.Navigator>

Answer 2

tabBarStyle: {
    shadowOffset: {
        width: 0,
        height: 12,
    },
    shadowOpacity: 0.58,
    shadowRadius: 16.0,
    elevation: 24,
    borderTopLeftRadius: 21,
    borderTopRightRadius: 21,
    backgroundColor: '#fff',
    position: 'absolute',
    bottom: 0,
    padding: 10,
    width: '100%',
    height: 84,
    zIndex: 0,
},

You can not assign any shadow styles for Tab navigator, idk why. Just set the tab into absolute position, and all styles will be available)

On android it's not excellent, but acceptable.