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
      },
    }}

Please add your `react-navigation` version to the question. – Rohit Aggarwal Sep 27 '21 at 13:07 — Rohit Aggarwal, Sep 27 '21 at 13:07

score 1 · Answer 1 · answered Jan 16 '22 at 06:59

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.

Coming from Flutter I find this quite inconvenient. Proper cross-platform shadow handling in RN is quite fiddly anyway, I'd assume this is the reason. — onetdev, Jun 12 '22 at 13:41

score -1 · Answer 2 · answered Dec 16 '21 at 01:13

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>

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

2 Answers2