updated packages, navigation and icons

.gitignore

@@ -1,2 +1,9 @@
-node_modules
-.expo
+node_modules/**/*
+.expo/*
+npm-debug.*
+package-lock.json
+yarn.lock
+*.jks
+*.p12
+*.key
+*.mobileprovision

App.js

@@ -16,7 +16,7 @@ import { Platform, StatusBar, Image } from 'react-native';
 import { AppLoading, Asset } from 'expo';
 import { Block, GalioProvider } from 'galio-framework';
 
-import Screens from './navigation/Screens';
+import AppContainer from './navigation/Screens';
 import { Images, products, materialTheme } from './constants/';
 
 // cache app images
@@ -59,7 +59,7 @@ export default class App extends React.Component {
         <GalioProvider theme={materialTheme}>
           <Block flex>
             {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
-            <Screens />
+            <AppContainer />
           </Block>
         </GalioProvider>
       );

app.json

@@ -4,7 +4,7 @@
     "description": "React Native - Material Kit Free",
     "slug": "rn-material-kit-free",
     "privacy": "unlisted",
-    "sdkVersion": "31.0.0",
+    "sdkVersion": "33.0.0",
     "platforms": ["ios", "android"],
     "version": "1.0.1",
     "orientation": "portrait",

components/Button.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
-import { LinearGradient } from 'expo';
+import { LinearGradient } from 'expo-linear-gradient';
 import { Button, Text, theme } from 'galio-framework';
 
 import materialTheme from '../constants/Theme';

components/Drawer.js

@@ -24,16 +24,16 @@ class DrawerItem extends React.Component {
         return (
           <Icon
             size={16}
-            name="users-wm"
-            family="Galio"
+            name="md-woman"
+            family="ionicon"
             color={focused ? 'white' : materialTheme.COLORS.MUTED} />
         );
       case 'Man':
         return (
           <Icon
             size={16}
-            name="users-mm"
-            family="Galio"
+            name="man"
+            family="entypo"
             color={focused ? 'white' : materialTheme.COLORS.MUTED} />
         );
       case 'Kids':
@@ -48,8 +48,8 @@ class DrawerItem extends React.Component {
         return (
           <Icon
             size={16}
-            name="selection"
-            family="Galio"
+            name="grid-on"
+            family="material"
             color={focused ? 'white' : materialTheme.COLORS.MUTED} />
         );
       case 'Profile':
@@ -64,32 +64,32 @@ class DrawerItem extends React.Component {
         return (
           <Icon
             size={16}
-            name="flower-06"
-            family="Galio"
+            name="gears"
+            family="font-awesome"
             color={focused ? 'white' : materialTheme.COLORS.MUTED} />
         );
       case 'Components':
         return (
           <Icon
             size={16}
-            name="ui-04"
-            family="Galio"
+            name="md-switch"
+            family="ionicon"
             color={focused ? 'white' : materialTheme.COLORS.MUTED} />
         );
       case 'Sign In':
         return (
           <Icon
             size={16}
-            name="log-in"
-            family="Galio"
+            name="ios-log-in"
+            family="ionicon"
             color={focused ? 'white' : materialTheme.COLORS.MUTED} />
         );
       case 'Sign Up':
         return (
           <Icon
             size={16}
-            name="add-27"
-            family="Galio"
+            name="md-person-add"
+            family="ionicon"
             color={focused ? 'white' : materialTheme.COLORS.MUTED} />
         );
       default:

components/Header.js

@@ -37,8 +37,8 @@ const SearchButton = ({isWhite, style, navigation}) => (
   <TouchableOpacity style={[styles.button, style]} onPress={() => navigation.navigate('Pro')}>
     <Icon
       size={16}
-      family="Galio"
-      name="zoom-split"
+      family="entypo"
+      name="magnifying-glass"
       color={theme.COLORS[isWhite ? 'WHITE' : 'ICON']}
     />
   </TouchableOpacity>
@@ -116,7 +116,7 @@ class Header extends React.Component {
         style={styles.search}
         placeholder="What are you looking for?"
         onFocus={() => navigation.navigate('Pro')}
-        iconContent={<Icon size={16} color={theme.COLORS.MUTED} name="zoom-split" family="Galio" />}
+        iconContent={<Icon size={16} color={theme.COLORS.MUTED} name="magnifying-glass" family="entypo" />}
       />
     )
   }
@@ -128,7 +128,7 @@ class Header extends React.Component {
       <Block row style={styles.tabs}>
         <Button shadowless style={[styles.tab, styles.divider]} onPress={() => navigation.navigate('Pro')}>
           <Block row middle>
-            <Icon name="grid-square" family="Galio" style={{ paddingRight: 8 }} />
+            <Icon name="grid" family="feather" style={{ paddingRight: 8 }} />
             <Text size={16} style={styles.tabTitle}>{tabTitleLeft || 'Categories'}</Text>
           </Block>
         </Button>

components/Icon.js

@@ -1,9 +1,10 @@
 import React from 'react';
-import { Font } from 'expo';
+import * as Font from 'expo-font';
 import { createIconSetFromIcoMoon } from '@expo/vector-icons';
 import { Icon } from 'galio-framework';
 
 import GalioConfig from '../assets/fonts/galioExtra';
+
 const GalioExtra = require('../assets/fonts/galioExtra.ttf');
 const IconGalioExtra = createIconSetFromIcoMoon(GalioConfig, 'GalioExtra');
 

components/Select.js

@@ -26,7 +26,7 @@ export default class DropDown extends React.Component {
         {...props}>
         <Block flex row middle space="between">
           <Text size={12}>{this.state.value}</Text>
-          <Icon name="small-down" family="Galio" size={10} />
+          <Icon name="angle-down" family="font-awesome" size={11} />
         </Block>
       </ModalDropdown>
     )

navigation/Screens.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Easing, Animated, Platform } from 'react-native';
-import { createSwitchNavigator, createStackNavigator, createDrawerNavigator } from 'react-navigation';
+import { createSwitchNavigator, createStackNavigator, createDrawerNavigator, createAppContainer } from 'react-navigation';
 
 import { Block, Text, theme } from "galio-framework";
 
@@ -61,19 +61,31 @@ const ProfileStack = createStackNavigator({
 }, {
   cardStyle: { backgroundColor: '#EEEEEE', },
   transitionConfig,
-})
+});
+
+const SettingsStack = createStackNavigator({
+  Settings: {
+    screen: SettingsScreen,
+    navigationOptions: ({ navigation }) => ({
+      header: <Header title="Settings" navigation={navigation} />,
+    })
+  },
+}, {
+  cardStyle: { backgroundColor: '#EEEEEE', },
+  transitionConfig,
+});
 
 const ComponentsStack = createStackNavigator({
   Components: {
     screen: ComponentsScreen,
     navigationOptions: ({ navigation }) => ({
-      header: <Header back title="Components" navigation={navigation} />,
+      header: <Header title="Components" navigation={navigation} />,
     })
   },
 }, {
   cardStyle: { backgroundColor: '#EEEEEE', },
   transitionConfig,
-})
+});
 
 const HomeStack = createStackNavigator({
   Home: {
@@ -82,25 +94,6 @@ const HomeStack = createStackNavigator({
       header: <Header search tabs title="Home" navigation={navigation} />,
     })
   },
-  Settings: {
-    screen: SettingsScreen,
-    navigationOptions: ({navigation}) => ({
-      header: <Header back title="Settings" navigation={navigation} />,
-    })
-  },
-  Components: {
-    screen: ComponentsScreen,
-    navigationOptions: ({navigation}) => ({
-      header: <Header title="Components" navigation={navigation} />,
-    })
-  },
-  Profile: {
-    screen: ProfileScreen,
-    navigationOptions: ({navigation}) => ({
-      header: <Header white transparent title="Profile" navigation={navigation} />,
-      headerTransparent: true,
-    })
-  },
   Pro: {
     screen: ProScreen,
     navigationOptions: ({navigation}) => ({
@@ -124,13 +117,13 @@ const AppStack = createDrawerNavigator(
         drawerLabel: () => {},
       },
     },
-    Dashboard: {
+    Home: {
       screen: HomeStack,
-      navigationOptions: (navOpt) => ({
+      navigationOptions: {
         drawerLabel: ({focused}) => (
           <Drawer focused={focused} screen="Home" title="Home" />
-        ),
-      }),
+        )
+      }
     },
     Woman: {
       screen: ProScreen,
@@ -173,7 +166,7 @@ const AppStack = createDrawerNavigator(
       }),
     },
     Settings: {
-      screen: SettingsScreen,
+      screen: SettingsStack,
       navigationOptions: (navOpt) => ({
         drawerLabel: ({focused}) => (
           <Drawer focused={focused} screen="Settings" title="Settings" />
@@ -214,12 +207,5 @@ const AppStack = createDrawerNavigator(
   Menu
 );
 
-export default createSwitchNavigator(
-  {
-    App: AppStack,
-    Home: HomeStack,
-  },
-  {
-    initialRouteName: 'App',
-  }
-);
+const AppContainer = createAppContainer(AppStack);
+export default AppContainer;