updated react-navigation to v4.0

App.js

@@ -1,6 +1,49 @@
-// We don't know why expo hardcoded entry point here (((
+import React, { useState } from 'react';
 
-// No need to include polyfills, expo do it her-self
+import RootNavigator from './src/navigation/RootNavigator';
+import AppLoading from './src/components/AppLoading';
 
-// Don't want to add one more dep @babel/plugin-proposal-export-default-from
-export { default } from './src/App';
+import { cacheImages, cacheFonts } from './src/helpers/AssetsCaching';
+import vectorFonts from './src/helpers/vector-fonts';
+
+export default () => {
+  const [isReady, setIsReady] = useState(false);
+
+  const loadAssetsAsync = async () => {
+    const imageAssets = cacheImages([
+      require('./assets/images/bg_screen1.jpg'),
+      require('./assets/images/bg_screen2.jpg'),
+      require('./assets/images/bg_screen3.jpg'),
+      require('./assets/images/bg_screen4.jpg'),
+      require('./assets/images/user-cool.png'),
+      require('./assets/images/user-hp.png'),
+      require('./assets/images/user-student.png'),
+      require('./assets/images/avatar1.jpg'),
+    ]);
+
+    const fontAssets = cacheFonts([
+      ...vectorFonts,
+      { georgia: require('./assets/fonts/Georgia.ttf') },
+      { regular: require('./assets/fonts/Montserrat-Regular.ttf') },
+      { light: require('./assets/fonts/Montserrat-Light.ttf') },
+      { bold: require('./assets/fonts/Montserrat-Bold.ttf') },
+      { UbuntuLight: require('./assets/fonts/Ubuntu-Light.ttf') },
+      { UbuntuBold: require('./assets/fonts/Ubuntu-Bold.ttf') },
+      { UbuntuLightItalic: require('./assets/fonts/Ubuntu-Light-Italic.ttf') },
+    ]);
+
+    await Promise.all([...imageAssets, ...fontAssets]);
+  };
+
+  if (!isReady) {
+    return (
+      <AppLoading
+        startAsync={loadAssetsAsync}
+        onFinish={() => setIsReady(true)}
+        onError={console.warn}
+      />
+    );
+  }
+
+  return <RootNavigator />;
+};

package.json

@@ -30,9 +30,13 @@
     "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
     "react-native-elements": "^1.2.5",
     "react-native-gesture-handler": "~1.3.0",
+    "react-native-reanimated": "~1.1.0",
     "react-native-touchable-scale": "^2.0.0",
     "react-native-web": "^0.11.4",
-    "react-navigation": "^3.11.1"
+    "react-navigation": "^4.0.10",
+    "react-navigation-drawer": "^1.4.0",
+    "react-navigation-stack": "^1.7.3",
+    "react-navigation-tabs": "^1.2.0"
   },
   "devDependencies": {
     "@expo/webpack-config": "^0.7.3",

src/drawer/components.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { createBottomTabNavigator, createStackNavigator } from 'react-navigation';
+import { createBottomTabNavigator } from 'react-navigation-tabs';
+import { createStackNavigator } from 'react-navigation-stack';
 import { Icon } from 'react-native-elements';
 
 import ButtonsTab from '../tabs/buttons';
@@ -17,7 +18,7 @@ const Components = createBottomTabNavigator(
         tabBarIcon: ({ tintColor, focused }) => (
           <Icon
             name={focused ? 'emoticon-cool' : 'emoticon-neutral'}
-            size={30}
+            size={24}
             type="material-community"
             color={tintColor}
           />
@@ -30,7 +31,7 @@ const Components = createBottomTabNavigator(
       navigationOptions: {
         tabBarLabel: 'Lists',
         tabBarIcon: ({ tintColor, focused }) => (
-          <Icon name="list" size={30} type="entypo" color={tintColor} />
+          <Icon name="list" size={24} type="entypo" color={tintColor} />
         ),
       },
     },
@@ -42,7 +43,7 @@ const Components = createBottomTabNavigator(
         tabBarIcon: ({ tintColor, focused }) => (
           <Icon
             name="wpforms"
-            size={30}
+            size={24}
             type="font-awesome"
             color={tintColor}
           />
@@ -57,7 +58,7 @@ const Components = createBottomTabNavigator(
         tabBarIcon: ({ tintColor, focused }) => (
           <Icon
             name={focused ? 'font' : 'font'}
-            size={30}
+            size={24}
             type="font-awesome"
             color={tintColor}
           />

src/drawer/lists.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createStackNavigator } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
 import { Icon } from 'react-native-elements';
 
 import Lists from '../views/lists';

src/drawer/login.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createStackNavigator } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
 import { Icon } from 'react-native-elements';
 
 import Login from '../views/login';

src/drawer/playground.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createStackNavigator } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
 import { Icon } from 'react-native-elements';
 
 import Playground from '../views/playground';

src/drawer/pricing.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createStackNavigator } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
 import { Icon } from 'react-native-elements';
 
 import Pricing from '../views/pricing';

src/drawer/profile.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createStackNavigator } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
 import { Icon } from 'react-native-elements';
 
 import Profile from '../views/profile';

src/drawer/ratings.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createStackNavigator } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
 import { Icon } from 'react-native-elements';
 
 import Ratings from '../views/ratings';

src/drawer/settings.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createStackNavigator } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
 import { Icon } from 'react-native-elements';
 
 import Settings from '../views/settings';

src/navigation/HomeNavigator.js

@@ -0,0 +1,85 @@
+import React, { Component } from 'react';
+import { View, Image, Dimensions, ScrollView, SafeAreaView } from 'react-native';
+import { createAppContainer } from 'react-navigation';
+import { createDrawerNavigator, DrawerNavigatorItems } from 'react-navigation-drawer';
+
+import Components from '../drawer/components';
+import Ratings from '../drawer/ratings';
+import Pricing from '../drawer/pricing';
+import Login from '../drawer/login';
+import Profile from '../drawer/profile';
+import Lists from '../drawer/lists';
+import Settings from '../drawer/settings';
+
+const WINDOW_WIDTH = Dimensions.get('window').width;
+
+const customContentComponent = (props) => (
+  <SafeAreaView
+    style={{ flex: 1, height: '100%', backgroundColor: '#43484d' }}
+    forceInset={{ top: 'always', horizontal: 'never' }}
+  >
+    <View style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+      <Image
+        source={require('../images/logo.png')}
+        style={{ width: '70%' }}
+        resizeMode="contain"
+      />
+    </View>
+    <View style={{ marginLeft: 10 }}>
+      <DrawerNavigatorItems {...props} />
+    </View>
+  </SafeAreaView>
+);
+
+const HomeNavigator = createAppContainer(
+  createDrawerNavigator(
+    {
+      Login: {
+        path: '/login',
+        screen: Login,
+      },
+      Profile: {
+        path: '/profile',
+        screen: Profile,
+      },
+      Lists: {
+        path: '/lists',
+        screen: Lists,
+      },
+      Components: {
+        path: '/components',
+        screen: Components,
+      },
+      Ratings: {
+        path: '/ratings',
+        screen: Ratings,
+      },
+      Pricing: {
+        path: '/pricing',
+        screen: Pricing,
+      },
+      Settings: {
+        path: '/settings',
+        screen: Settings,
+      },
+    },
+    {
+      initialRouteName: 'Components',
+      contentOptions: {
+        activeTintColor: '#548ff7',
+        activeBackgroundColor: 'transparent',
+        inactiveTintColor: '#ffffff',
+        inactiveBackgroundColor: 'transparent',
+        backgroundColor: '#43484d',
+        labelStyle: {
+          fontSize: 15,
+          marginLeft: 0,
+        },
+      },
+      drawerWidth: Math.min(WINDOW_WIDTH * 0.8, 300),
+      contentComponent: customContentComponent
+    }
+  )
+);
+
+export default HomeNavigator;

src/navigation/RootNavigator.js

@@ -0,0 +1,17 @@
+import { createAppContainer, createSwitchNavigator } from 'react-navigation';
+
+import HomeNavigator from './HomeNavigator';
+
+const AuthNavigator = createSwitchNavigator(
+  {
+    AuthHomeNavigator: HomeNavigator,
+  },
+  {
+    initialRouteName: 'AuthHomeNavigator',
+  }
+);
+
+const RootNavigator = createAppContainer(AuthNavigator);
+
+export default RootNavigator;
+