So i'm really new to react native and mobile dev, i wanted to change the background color of a bottom tab bar navigation and i can't seem to figure how to do it, since i started with a react native project with navigation ( option in the expo init phase ), how stuff is written is different from what i've seen on the net i know i need to add

      tabBarOptions: {
        style: { backgroundColor: 'orange'}
      }

but to be honest idk where exactly , if someone could help it would be much appreciated !! here's my code :

import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';

import TabBarIcon from '../ponents/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';


const config = Platform.select({
  web: { headerMode: 'screen' },
  default: {},
});

const HomeStack = createStackNavigator(
  {
    Home: HomeScreen,
  },{
    defaultNavigationOptions: {
      headerTintColor: '#444',
      headerStyle: {
        backgroundColor: 'pink'
      }
    }
  },
  config
);

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused, tintColor }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-information-circle${focused ? '' : '-outline'}`
          : 'md-information-circle'
      }
      color= {"#cd077dr"}
    />
  ), style: {
    backgroundColor: 'pink'
  }
};

HomeStack.path = '';

const LinksStack = createStackNavigator(
  {
    Links: LinksScreen,
  },{
    defaultNavigationOptions: {
      headerTintColor: '#444',
      headerStyle: {
        backgroundColor: 'pink'
      }
    }
  },
  config
);

LinksStack.navigationOptions = {
  tabBarLabel: 'Links',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'} />
  )
};

LinksStack.path = '';

const SettingsStack = createStackNavigator(
  {
    Settings: SettingsScreen,
  },{
    defaultNavigationOptions: {
      headerTintColor: '#444',
      headerStyle: {
        backgroundColor: 'pink'
      },
      tabBarOptions: {
        style: { backgroundColor: 'orange'}
      }
    }
  },
  config
);

SettingsStack.navigationOptions = {
  tabBarLabel: 'Settings',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'} />
  ),
};

SettingsStack.path = '';


const tabNavigator = createBottomTabNavigator({
  HomeStack,
  LinksStack,
  SettingsStack,
});

tabNavigator.path = '';

export default tabNavigator;

So i'm really new to react native and mobile dev, i wanted to change the background color of a bottom tab bar navigation and i can't seem to figure how to do it, since i started with a react native project with navigation ( option in the expo init phase ), how stuff is written is different from what i've seen on the net i know i need to add

      tabBarOptions: {
        style: { backgroundColor: 'orange'}
      }

but to be honest idk where exactly , if someone could help it would be much appreciated !! here's my code :

import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';

import TabBarIcon from '../ponents/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import LinksScreen from '../screens/LinksScreen';
import SettingsScreen from '../screens/SettingsScreen';


const config = Platform.select({
  web: { headerMode: 'screen' },
  default: {},
});

const HomeStack = createStackNavigator(
  {
    Home: HomeScreen,
  },{
    defaultNavigationOptions: {
      headerTintColor: '#444',
      headerStyle: {
        backgroundColor: 'pink'
      }
    }
  },
  config
);

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused, tintColor }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-information-circle${focused ? '' : '-outline'}`
          : 'md-information-circle'
      }
      color= {"#cd077dr"}
    />
  ), style: {
    backgroundColor: 'pink'
  }
};

HomeStack.path = '';

const LinksStack = createStackNavigator(
  {
    Links: LinksScreen,
  },{
    defaultNavigationOptions: {
      headerTintColor: '#444',
      headerStyle: {
        backgroundColor: 'pink'
      }
    }
  },
  config
);

LinksStack.navigationOptions = {
  tabBarLabel: 'Links',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'} />
  )
};

LinksStack.path = '';

const SettingsStack = createStackNavigator(
  {
    Settings: SettingsScreen,
  },{
    defaultNavigationOptions: {
      headerTintColor: '#444',
      headerStyle: {
        backgroundColor: 'pink'
      },
      tabBarOptions: {
        style: { backgroundColor: 'orange'}
      }
    }
  },
  config
);

SettingsStack.navigationOptions = {
  tabBarLabel: 'Settings',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'} />
  ),
};

SettingsStack.path = '';


const tabNavigator = createBottomTabNavigator({
  HomeStack,
  LinksStack,
  SettingsStack,
});

tabNavigator.path = '';

export default tabNavigator;

• javascript
• react-native
• react-navigation
• react-navigation-stack
• react-navigation-bottom-tab

5 Answers 5

Use this for React Navigation version 6.x

screenOptions={{
        tabBarStyle: {
          backgroundColor: '#00bcd4',
        },
      }}

I think that you should edit your const tabNavigator to something like

const tabNavigator = createBottomTabNavigator({
  HomeStack,
  LinksStack,
  SettingsStack,
}, {
    defaultNavigationOptions: {
      tabBarOptions: {
        style: { backgroundColor: 'orange'}
      }
    }
});

@Zelda please refer this link (react-native-tab-view git-hub issue).

https://github./react-native-munity/react-native-tab-view/issues/152

try using this, it works on Android and iOS https://github./react-navigation/react-navigation/issues/1270#issuement-342757336

const tabBarOptions = {
// setting height 'null', and top 0 will change the color of pressed tab
indicatorStyle: {
 height: null,
 top: 0,
 backgroundColor: "red",
 borderBottomColor: "black",
 borderBottomWidth: 3,
},
activeTintColor: "black",
pressColor: "white",
style: {
 backgroundColor: "#ddc8be",
},
labelStyle: { fontSize: 13 },
};

TabbarOptions props contain a tabStyle properties which helps you to style the tab as you want

const tabBarOPtions = {
          tabStyle: [{backgroundColor: 'red'}]
     }