title: Gradient Background for TabBar?
body: <p>I'm trying to make the background of the TabNavigator be a gradient. The documentation at <a href="https://facebook.github.io/react-native/docs/colors.html" rel="nofollow noreferrer">https://facebook.github.io/react-native/docs/colors.html</a> indicates that <em>color properties usually match how CSS works on the web</em>. I went to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient</a> and read that <em>Because s belong to the  data type, they can only be used where s can be used. For this reason, linear-gradient() won't work on background-color and other properties that use the  data type.</em></p>
  
  <p>Consequently, the following <em>won't</em> work:</p>
  
  <pre><code>import { TabNavigator, TabBarBottom } from 'react-navigation';
  
  export default TabNavigator(
    {
      Home: {
        screen: HomeScreen,
      },
    . . .
    },
    {
      navigationOptions: ({ navigation }) =&gt; ({
        tabBarIcon: ....
      tabBarComponent: TabBarBottom,
      tabBarPosition: 'bottom',
      animationEnabled: false,
      swipeEnabled: false,
      tabBarOptions: {
        activeTintColor: 'rgb(111, 111, 111)',
        labelStyle: {
          fontSize: 12,
        },
        style: {
          backgroundColor: 'linear-gradient(45deg, blue, red)',
        },
      }
    }
  );
  </code></pre>
  
  <p>Which is clear from the documentation. What <em>isn't clear</em> is what will work.</p>
  
  <p>Update:</p>
  
  <p>Clearly the regularly accepted practice is to create your own tab bar. Or, in my case, to tell the designer that he was out of luck.</p>