Problem in change background color in createStackNavigator..?

Question

I am new in react native. I want to change background color in tabLayout. Me code is here:

MainTabNavigator.js

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

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

const HomeStack = createStackNavigator({
  Home: HomeScreen,
});

HomeStack.navigationOptions = {
  tabBarLabel: 'Offer',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-information-circle${focused ? '' : '-outline'}`
          : 'md-information-circle'
      }
    />
  ),
};

const LinksStack = createStackNavigator({
  Links: LinksScreen,
});

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

const SettingsStack = createStackNavigator({
  Settings: SettingsScreen,
});

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

export default createBottomTabNavigator({

  LinksStack,
   HomeStack,
  SettingsStack,
});

I don't know where i should change in my code.

Answer 1

You can add more option activeBackgroundColor in tabBarOptions like this example

const mainTabBarNav = createBottomTabNavigator({
    projectHome: ProjectHomeScreen,
    userInfo: UserInfoScreen,
    taskList: TaskListScreen,
    profile: ProfileScreen,
  }, {
    tabBarPosition: 'bottom',
    tabBarOptions: {
      activeTintColor: Colors.navigationTintColor,
      activeBackgroundColor: 'red',
      inactiveTintColor: Colors.tabbarNormal,
      swipeEnabled: false,
      showLabel: true,
      showIcon: true,
      style: {
        backgroundColor: 'white',
        paddingVertical: 10,
        height: 60
      },
      indicatorStyle: {
        backgroundColor: 'white',
      }
    },
    tabBarComponent: BottomTabBar,
    swipeEnabled: false,
    initialRouteName: screenNames.taskList,

  }