React native Question posted in
The official React Native documentation can be found here.

How to change the color of the line which seperates the bottom tab and the content of my screen? React Native Tab navigator

I have a react native app and want to change the color of the seperator from my bottom tab navigator.
Also can I set the background color somehow to transparent. Right now I set it to the same color as my background.

I want to change the white seperator line

export default function App() {
  let [fontsLoaded] = useFonts({
    'Inter-Light': require('./assets/fonts/Inter-Light.ttf'),
    'Inter-Regular': require('./assets/fonts/Inter-Regular.ttf'),
    'Inter-Medium': require('./assets/fonts/Inter-Medium.ttf'),
    'Inter-SemiBold': require('./assets/fonts/Inter-SemiBold.ttf'),
    'Inter-Bold': require('./assets/fonts/Inter-Bold.ttf'),
    // Weitere Schriftarten hier registrieren
  });

  if (!fontsLoaded) {
    return <Text>Error While Loading fonts</Text>;
  }
  
  return (
    <ThemeProvider>
      <NavigationContainer>
        <Tab.Navigator
          screenOptions={({ route }) => ({
            headerShown: false,
            tabBarStyle: { backgroundColor: route.name === 'Home' ? useTheme().theme.colors.background : 'YOUR_TAB_BAR_BACKGROUND_COLOR'},
            tabBarActiveTintColor: route.name === 'Home' ? useTheme().theme.colors.blue : 'YOUR_INACTIVE_TAB_COLOR',
            tabBarInactiveTintColor: 'white', 
            tabBarShowLabel: false, // Um die Tab Labels auszublenden
            //tabBarIndicatorStyle: { backgroundColor: 'black' }, // Hier kannst du die Farbe des Strichs unter dem aktiven Tab ändern
            tabBarSeparatorStyle: { backgroundColor: 'green' }, // Hier kannst du die Farbe des Trennstrichs oben an der Tab-Bar ändern
          })}
        >
          <Tab.Screen name="Home" component={HomeScreen} />
          <Tab.Screen name="Details" component={DetailScreen} />
        </Tab.Navigator>
      </NavigationContainer>
    </ThemeProvider>
  );
}

I tried with

tabBarSeparatorStyle: { backgroundColor: 'green' }

but this doesnt work

Tags:

2

Answers


  1. 0

    While there’s no direct prop for setting the tab bar background entirely transparent, you can achieve a similar effect with a combination of styles:

    screenOptions={({ route }) => ({
    headerShown: false,
    tabBarStyle: {
    backgroundColor: 'transparent', // Set transparent background
    borderTopWidth: 0, // Remove default top border
    position: 'absolute', // Optional for more control
   },
 // ... other styles
})}
    Login or Signup to reply.
  2. 0

    borderTopColor on the tabBarStyle worked for me. Note that borderColor did not work, probably because the tabBar has borderTopColor set and that takes priority over borderColor. Same applies to borderWidth vs borderTopWidth.

    <Navigator
     ...
      screenOptions={props => ({
        ...
        tabBarStyle: {
          backgroundColor: theme.colors.background.primary,
          borderTopColor: theme.colors.border.primary,
        }
      })}>
...
</Navigator>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search