title: Cross fade animation in react navigation tab navigator
body: <p>I am using react navigation tab navigator and react native material bottom navigation and it currently swipes from screen to screen. How would I make it cross fade from one screen to another like the Material Design Guidelines suggests. </p>
  
  <p><strong>Router.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import { TabNavigator, StackNavigator, NavigationActions } from 'react-navigation';
  import { NavigationComponent } from 'react-native-material-bottom-navigation';
  import Icon from 'react-native-vector-icons/MaterialIcons';
  import { MAIN_COLOR, BOTTOM_BAR_COLOR, BOTTOM_BAR_ICON_COLOR } from '../config';
  import { Classes, Settings, Search, SplashScreen } from '../components/screens';
  import Login from '../components/screens/Login';
  import Main from '../Main';
  
  export const Tabs = TabNavigator({
    Classes: {
      screen: Classes,
      navigationOptions: {
        tabBarLabel: 'Classes',
        tabBarIcon: () =&gt; &lt;Icon size={24} name="list" color={BOTTOM_BAR_ICON_COLOR} /&gt;,
      },
    },
    Search: {
      screen: Search,
      navigationOptions: {
        tabBarLabel: 'Search',
        tabBarIcon: () =&gt; &lt;Icon size={24} name="search" color={BOTTOM_BAR_ICON_COLOR} /&gt;,
      },
    },
    Settings: {
      screen: Settings,
      navigationOptions: {
        tabBarLabel: 'Settings',
        tabBarIcon: () =&gt; &lt;Icon size={24} name="settings" color={BOTTOM_BAR_ICON_COLOR} /&gt;,
      },
    },
  }, {
    tabBarComponent: NavigationComponent,
    tabBarPosition: 'bottom',
    swipeEnabled: false,
    tabBarOptions: {
      bottomNavigationOptions: {
        labelColor: BOTTOM_BAR_ICON_COLOR,
        rippleColor: MAIN_COLOR,
        shifting: false,
        tabs: {
          Search: {
            barBackgroundColor: BOTTOM_BAR_COLOR,
            activeIcon: &lt;Icon size={24} name="search" color={MAIN_COLOR} /&gt;,
            activeLabelColor: MAIN_COLOR,
          },
          Classes: {
            barBackgroundColor: BOTTOM_BAR_COLOR,
            activeIcon: &lt;Icon size={24} name="list" color={MAIN_COLOR} /&gt;,
            activeLabelColor: MAIN_COLOR,
          },
          Settings: {
            barBackgroundColor: BOTTOM_BAR_COLOR,
            activeIcon: &lt;Icon size={24} name="settings" color={MAIN_COLOR} /&gt;,
            activeLabelColor: MAIN_COLOR,
          },
        },
      },
    },
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>This is the effect I want</strong></p>
  
  <p><a href="https://storage.googleapis.com/material-design/publish/material_v_11/assets/0B3321sZLoP_HTTA0QUM4MWxKSTg/components_bottomnavigation_behavior_crossfade.webm" rel="noreferrer">https://storage.googleapis.com/material-design/publish/material_v_11/assets/0B3321sZLoP_HTTA0QUM4MWxKSTg/components_bottomnavigation_behavior_crossfade.webm</a></p>
  
  <p><strong>This is what I have</strong></p>
  
  <p><a href="https://storage.googleapis.com/material-design/publish/material_v_11/assets/0B3321sZLoP_HQWYxQWE5LUg2WDQ/components_bottomnavigation_behavior_sibling.webm" rel="noreferrer">https://storage.googleapis.com/material-design/publish/material_v_11/assets/0B3321sZLoP_HQWYxQWE5LUg2WDQ/components_bottomnavigation_behavior_sibling.webm</a></p>