React-Native Bottom Tab Navigator Not Applying Stylesheet

Question

Hi I am having issues with the styling not appearing on the bottom tab navigator.

For some reason when I got to apply the styling from a stylesheet I have created it won't apply itself to the tab. The styling that is within the tab itself works, just not the external style sheet I am trying to apply.

I believe this must be an issue with the tab styling and stylesheet styling as I am guessing the tab styling is overwriting the normal stylesheet.

Wondering if there is still a way to overcome this or what I am missing.

Below is my full file for my navigation. At the bottom of my file is the stylesheet I am trying to use.

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { StyleSheet, View } from "react-native";
import Home from "../screens/Home";
import Profile from "../screens/Profile";
import GameZone from "../screens/GameZone";
import LearningZone from "../screens/LearningZone";

const Tab = createBottomTabNavigator();

const Tabs = () => {
  return (
      <Tab.Navigator
      screenOptions={{
        tabBarShowLabel: false,
        tabBar: false,
        tabBarStyle: [
          {
            tabBarShowLabel: false,
            position: "absolute",
            bottom: 25,
            left: 30,
            right: 30,
            elevation: 0,
            backgroundColor: "#16006d",
            borderRadius: 15,
            height: 90,
          },
        ],
      }}
    >
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Profile" component={Profile} />
      <Tab.Screen name="GameZone" component={GameZone} />
      <Tab.Screen name="LearningZone" component={LearningZone} />
    </Tab.Navigator>
  );
};

export default Tabs;

const styles = StyleSheet.create({
  shadow: {
    shadowColor: "#ffe45d",
    shadowOffset: {
      width: 0,
      height: 10,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.5,
    elevation: 5,
  },
});

I have tried implementing it as a normal style sheet like so...

 ... <Tab.Navigator style={styles.shadow}... 

This is not working and I am not sure why, any help would be appreciated!

I have also tried placing it after height in the tabBarStyle like so:

...
<Tab.Navigator style={styles.shadow}
      screenOptions={{
        tabBarShowLabel: false,
        tabBar: false,
        tabBarStyle: [
          {
            tabBarShowLabel: false,
            position: "absolute",
            bottom: 25,
            left: 30,
            right: 30,
            elevation: 0,
            backgroundColor: "#16006d",
            borderRadius: 15,
            height: 90,
            ... styles.shadow,
          },
        ],
      }}
    >

Answer 1

Wrapp your <Tab.Navigator style={styles.shadow}... in View and add style to View that worked for me.