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

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.