0

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,
          },
        ],
      }}
    >
Tristan
  • 1
  • 1
  • 2
  • Have you tried it without tabBarShowLabel: false in the style object? That doesn't look like it's supposed to be there and it might be messing up the rest of the styles. – Abe May 10 '22 at 04:07

1 Answers1

1

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

savkevip
  • 43
  • 6
  • 1
    Embarrassing, I've been trying so long and this worked! There's something odd going on with the styling on BottomTab – maiko Nov 15 '22 at 08:04