Pull createMaterialBottomTabNavigator into separate repo

examples/NavigationPlayground/js/App.js

@@ -322,7 +322,7 @@ const AppNavigator = createStackNavigator(
   }
 );
 
-export default () => <AppNavigator persistenceKey="NavState" />;
+export default AppNavigator;
 
 const styles = StyleSheet.create({
   item: {

examples/NavigationPlayground/js/TabsWithNavigationFocus.js

@@ -4,10 +4,8 @@
 
 import React from 'react';
 import { SafeAreaView, StatusBar, Text, View } from 'react-native';
-import {
-  createBottomTabNavigator,
-  withNavigationFocus,
-} from 'react-navigation';
+import { withNavigationFocus } from 'react-navigation';
+import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { Button } from './commonComponents/ButtonWithMargin';
 
@@ -80,16 +78,26 @@ const createTabScreen = (name, icon, focusedIcon, tintColor = '#673ab7') => {
   return withNavigationFocus(TabScreen);
 };
 
-const TabsWithNavigationFocus = createBottomTabNavigator({
-  One: {
-    screen: createTabScreen('One', 'numeric-1-box-outline', 'numeric-1-box'),
+const TabsWithNavigationFocus = createMaterialBottomTabNavigator(
+  {
+    One: {
+      screen: createTabScreen('One', 'numeric-1-box-outline', 'numeric-1-box'),
+    },
+    Two: {
+      screen: createTabScreen('Two', 'numeric-2-box-outline', 'numeric-2-box'),
+    },
+    Three: {
+      screen: createTabScreen(
+        'Three',
+        'numeric-3-box-outline',
+        'numeric-3-box'
+      ),
+    },
   },
-  Two: {
-    screen: createTabScreen('Two', 'numeric-2-box-outline', 'numeric-2-box'),
-  },
-  Three: {
-    screen: createTabScreen('Three', 'numeric-3-box-outline', 'numeric-3-box'),
-  },
-});
+  {
+    shifting: false,
+    activeTintColor: '#F44336',
+  }
+);
 
 export default TabsWithNavigationFocus;