title: React Native - Applying gradient to Navigation TabNavigator
body: <p>I'm using React Navigation and trying to apply a linear gradient from white to transparent to the tab navigator and have it sit at the bottom of the screen. </p>
  
  <p>I've found a good solution for using react-native-linear-gradient with a navigation header here: <a href="https://stackoverflow.com/questions/44924323/react-navigation-gradient-color-for-header?noredirect=1&amp;lq=1&amp;utm_medium=organic&amp;utm_source=google_rich_qa&amp;utm_campaign=google_rich_qa">React Navigation - Gradient color for Header</a></p>
  
  <p>What isn't clear to me is how to apply this same logic to the tabBar. I tried defining a component like in the linked example and then passing that to backgroundColor, but it threw an error. </p>
  
  <p>Here's my current code for the tabBarOptions:</p>
  
  <pre><code>{
  tabBarOptions: {
    activeTintColor: 'rgba(248, 164, 2, 0.6)',  // Color of tab when pressed
    inactiveTintColor: 'rgba(0,0,0,0.5)', // Color of tab when not pressed
    showLabel: false,
    indicatorStyle: {
      backgroundColor: 'transparent'
    },
    style: {
      backgroundColor: 'rgba(255, 255, 255, 1.0)',
      borderTopColor: 'transparent',
      height: dynamicSize(60),
      position: 'absolute',
      left: 0,
      right: 0,
      bottom: 0
    },
  },
  </code></pre>
  
  <p>},</p>
  
  <p>I then pass this into the StackNavigator by defining tabs as:</p>
  
  <pre><code>tabs: {
    screen: TabVisibleNavigator
  },
  </code></pre>