title: changing background color of react native tabBar
body: <p>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 </p>
  
  <pre><code>      tabBarOptions: {
          style: { backgroundColor: 'orange'}
        }
  </code></pre>
  
  <p>but to be honest idk where exactly , if someone could help it would be much appreciated !! 
  here's my code :</p>
  
  <pre><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 '../components/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 }) =&gt; (
      &lt;TabBarIcon
        focused={focused}
        name={
          Platform.OS === 'ios'
            ? `ios-information-circle${focused ? '' : '-outline'}`
            : 'md-information-circle'
        }
        color= {"#cd077dr"}
      /&gt;
    ), style: {
      backgroundColor: 'pink'
    }
  };
  
  HomeStack.path = '';
  
  const LinksStack = createStackNavigator(
    {
      Links: LinksScreen,
    },{
      defaultNavigationOptions: {
        headerTintColor: '#444',
        headerStyle: {
          backgroundColor: 'pink'
        }
      }
    },
    config
  );
  
  LinksStack.navigationOptions = {
    tabBarLabel: 'Links',
    tabBarIcon: ({ focused }) =&gt; (
      &lt;TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-link' : 'md-link'} /&gt;
    )
  };
  
  LinksStack.path = '';
  
  const SettingsStack = createStackNavigator(
    {
      Settings: SettingsScreen,
    },{
      defaultNavigationOptions: {
        headerTintColor: '#444',
        headerStyle: {
          backgroundColor: 'pink'
        },
        tabBarOptions: {
          style: { backgroundColor: 'orange'}
        }
      }
    },
    config
  );
  
  SettingsStack.navigationOptions = {
    tabBarLabel: 'Settings',
    tabBarIcon: ({ focused }) =&gt; (
      &lt;TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'} /&gt;
    ),
  };
  
  SettingsStack.path = '';
  
  
  const tabNavigator = createBottomTabNavigator({
    HomeStack,
    LinksStack,
    SettingsStack,
  });
  
  tabNavigator.path = '';
  
  export default tabNavigator;
  
  </code></pre>