updated packages and navigation

CHANGELOG.md

@@ -1,3 +1,14 @@
+## [1.3.0] 2019-11-06
+### Updated dependencies
+- `expo@34.0.3` to `expo@35.0.0`
+- `expo-font@6.0.1` to `expo-font@7.0.0`
+- `expo-asset@6.0.0` to `expo-asset@7.0.0`
+- `react-native SDK@34.0.0` to `react-native SDK@35.0.0`
+- `galio-framework@0.6.1` to `galio-framework@0.6.3`
+- `babel-preset-expo@5.0.0` to `babel-preset-expo@7.0.0`
+### Updated files
+- changed drawer items in order to have a similar look to the PRO version
+
 ## [1.2.0] 2019-09-18
 ### Updated dependencies
 - `expo@33.0.0` to `expo@34.0.3`

app.json

@@ -3,12 +3,12 @@
     "name": "Argon FREE React Native",
     "slug": "argon-free-react-native",
     "privacy": "public",
-    "sdkVersion": "35.0.0",
+    "sdkVersion": "36.0.0",
     "platforms": [
       "ios",
       "android"
     ],
-    "version": "1.3.0",
+    "version": "1.4.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "splash": {

navigation/Menu.js

@@ -1,57 +1,55 @@
 import React from "react";
-import { DrawerItems } from "react-navigation";
+import { useSafeArea } from "react-native-safe-area-context";
 import {
   ScrollView,
   StyleSheet,
-  Dimensions,
   Image
 } from "react-native";
-import { Block, theme } from "galio-framework";
+import { Block, Text, theme } from "galio-framework";
 
 import Images from "../constants/Images";
+import { DrawerItem as DrawerCustomItem } from '../components';
 
-const { width } = Dimensions.get("screen");
-
-const Drawer = props => (
-  <Block style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
-    <Block flex={0.05} style={styles.header}>
-      <Image styles={styles.logo} source={Images.Logo} />
+function CustomDrawerContent({ drawerPosition, navigation, profile, focused, state, ...rest }) {
+  const insets = useSafeArea();
+  const screens = [
+    "Home", 
+    "Profile",
+    "Account",
+    "Elements",
+    "Articles",
+  ];
+  return (
+    <Block
+      style={styles.container}
+      forceInset={{ top: 'always', horizontal: 'never' }}
+    >
+      <Block flex={0.06} style={styles.header}>
+        <Image styles={styles.logo} source={Images.Logo} />
+      </Block>
+      <Block flex style={{ paddingLeft: 8, paddingRight: 14 }}>
+        <ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
+          {screens.map((item, index) => {
+              return (
+                <DrawerCustomItem
+                  title={item}
+                  key={index}
+                  navigation={navigation}
+                  focused={state.index === index ? true : false}
+                />
+              );
+            })}
+            <Block flex style={{ marginTop: 24, marginVertical: 8, paddingHorizontal: 8 }}>
+              <Block style={{ borderColor: "rgba(0,0,0,0.2)", width: '100%', borderWidth: StyleSheet.hairlineWidth }}/>
+              <Text color="#8898AA" style={{ marginTop: 16, marginLeft: 8, fontFamily: 'open-sans-regular' }}>DOCUMENTATION</Text>
+            </Block>
+            <DrawerCustomItem title="Getting Started" navigation={navigation} />
+        </ScrollView>
+      </Block>
     </Block>
-    <Block flex>
-      <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }}>
-        <DrawerItems {...props} />
-      </ScrollView>
-    </Block>
-  </Block>
-);
+  );
+}
 
-const Menu = {
-  contentComponent: props => <Drawer {...props} />,
-  drawerBackgroundColor: "white",
-  drawerWidth: width * 0.8,
-  contentOptions: {
-    activeTintColor: "white",
-    inactiveTintColor: "#000",
-    activeBackgroundColor: "transparent",
-    itemStyle: {
-      width: width * 0.75,
-      backgroundColor: "transparent"
-    },
-    labelStyle: {
-      fontSize: 18,
-      marginLeft: 12,
-      fontWeight: "normal"
-    },
-    itemsContainerStyle: {
-      paddingVertical: 16,
-      paddingHorizonal: 12,
-      justifyContent: "center",
-      alignContent: "center",
-      alignItems: "center",
-      overflow: "hidden"
-    }
-  }
-};
 
 const styles = StyleSheet.create({
   container: {
@@ -65,4 +63,4 @@ const styles = StyleSheet.create({
   }
 });
 
-export default Menu;
+export default CustomDrawerContent;

navigation/Screens.js

@@ -1,10 +1,9 @@
 import React from "react";
-import { Easing, Animated } from "react-native";
-import {
-  createStackNavigator,
-  createDrawerNavigator,
-  createAppContainer
-} from "react-navigation";
+import { Easing, Animated, Dimensions } from "react-native";
+
+import { createStackNavigator } from "@react-navigation/stack";
+import { createDrawerNavigator } from "@react-navigation/drawer";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 
 import { Block } from "galio-framework";
 
@@ -17,173 +16,168 @@ import Register from "../screens/Register";
 import Elements from "../screens/Elements";
 import Articles from "../screens/Articles";
 // drawer
-import Menu from "./Menu";
-import DrawerItem from "../components/DrawerItem";
+import CustomDrawerContent from "./Menu";
 
 // header for screens
-import Header from "../components/Header";
+import { Icon, Header } from "../components";
+import { argonTheme, tabs } from "../constants";
 
-const transitionConfig = (transitionProps, prevTransitionProps) => ({
-  transitionSpec: {
-    duration: 400,
-    easing: Easing.out(Easing.poly(4)),
-    timing: Animated.timing
-  },
-  screenInterpolator: sceneProps => {
-    const { layout, position, scene } = sceneProps;
-    const thisSceneIndex = scene.index;
-    const width = layout.initWidth;
+const { width } = Dimensions.get("screen");
 
-    const scale = position.interpolate({
-      inputRange: [thisSceneIndex - 1, thisSceneIndex, thisSceneIndex + 1],
-      outputRange: [4, 1, 1]
-    });
-    const opacity = position.interpolate({
-      inputRange: [thisSceneIndex - 1, thisSceneIndex, thisSceneIndex + 1],
-      outputRange: [0, 1, 1]
-    });
-    const translateX = position.interpolate({
-      inputRange: [thisSceneIndex - 1, thisSceneIndex],
-      outputRange: [width, 0]
-    });
+const Stack = createStackNavigator();
+const Drawer = createDrawerNavigator();
+const Tab = createBottomTabNavigator();
 
-    const scaleWithOpacity = { opacity };
-    const screenName = "Search";
+function ElementsStack(props) {
+  return (
+    <Stack.Navigator mode="card" headerMode="screen">
+      <Stack.Screen
+        name="Elements"
+        component={Elements}
+        options={{
+          header: ({ navigation, scene }) => (
+            <Header title="Elements" navigation={navigation} scene={scene} />
+          ),
+          cardStyle: { backgroundColor: "#F8F9FE" }
+        }}
+      />
+    </Stack.Navigator>
+  );
+}
 
-    if (
-      screenName === transitionProps.scene.route.routeName ||
-      (prevTransitionProps &&
-        screenName === prevTransitionProps.scene.route.routeName)
-    ) {
-      return scaleWithOpacity;
-    }
-    return { transform: [{ translateX }] };
-  }
-});
+function ArticlesStack(props) {
+  return (
+    <Stack.Navigator mode="card" headerMode="screen">
+      <Stack.Screen
+        name="Articles"
+        component={Articles}
+        options={{
+          header: ({ navigation, scene }) => (
+            <Header title="Articles" navigation={navigation} scene={scene} />
+          ),
+          cardStyle: { backgroundColor: "#F8F9FE" }
+        }}
+      />
+    </Stack.Navigator>
+  );
+}
 
-const ElementsStack = createStackNavigator({
-  Elements: {
-    screen: Elements,
-    navigationOptions: ({ navigation }) => ({
-      header: <Header title="Elements" navigation={navigation} />
-    })
-  }
-},{
-  cardStyle: {
-    backgroundColor: "#F8F9FE"
-  },
-  transitionConfig
-});
+function ProfileStack(props) {
+  return (
+    <Stack.Navigator initialRouteName="Profile" mode="card" headerMode="screen">
+      <Stack.Screen
+        name="Profile"
+        component={Profile}
+        options={{
+          header: ({ navigation, scene }) => (
+            <Header
+              transparent
+              white
+              title="Profile"
+              navigation={navigation}
+              scene={scene}
+            />
+          ),
+          cardStyle: { backgroundColor: "#FFFFFF" },
+          headerTransparent: true
+        }}
+      />
+    </Stack.Navigator>
+  );
+}
 
-const ArticlesStack = createStackNavigator({
-  Articles: {
-    screen: Articles,
-    navigationOptions: ({ navigation }) => ({
-      header: <Header title="Articles" navigation={navigation} />
-    })
-  }
-},{
-  cardStyle: {
-    backgroundColor: "#F8F9FE"
-  },
-  transitionConfig
-});
+function HomeStack(props) {
+  return (
+    <Stack.Navigator mode="card" headerMode="screen">
+      <Stack.Screen
+        name="Home"
+        component={Home}
+        options={{
+          header: ({ navigation, scene }) => (
+            <Header
+              title="Home"
+              search
+              options
+              navigation={navigation}
+              scene={scene}
+            />
+          ),
+          cardStyle: { backgroundColor: "#F8F9FE" }
+        }}
+      />
+      <Stack.Screen
+        name="Pro"
+        component={Pro}
+        options={{
+          header: ({ navigation, scene }) => (
+            <Header
+              title=""
+              back
+              white
+              transparent
+              navigation={navigation}
+              scene={scene}
+            />
+          ),
+          headerTransparent: true
+        }}
+      />
+    </Stack.Navigator>
+  );
+}
 
-const ProfileStack = createStackNavigator(
-  {
-    Profile: {
-      screen: Profile,
-      navigationOptions: ({ navigation }) => ({
-        header: (
-          <Header white transparent title="Profile" iconColor={'#FFF'} navigation={navigation} />
-        ),
-        headerTransparent: true
-      })
-    }
-  },
-  {
-    cardStyle: { backgroundColor: "#FFFFFF" },
-    transitionConfig
-  }
-);
+export default function OnboardingStack(props) {
+  return (
+    <Stack.Navigator mode="card" headerMode="none">
+      <Stack.Screen
+        name="Onboarding"
+        component={Pro}
+        option={{
+          headerTransparent: true
+        }}
+      />
+      <Stack.Screen name="App" component={AppStack} />
+    </Stack.Navigator>
+  );
+}
 
-const HomeStack = createStackNavigator(
-  {
-    Home: {
-      screen: Home,
-      navigationOptions: ({ navigation }) => ({
-        header: <Header search options title="Home" navigation={navigation} />
-      })
-    },
-    Pro: {
-      screen: Pro,
-      navigationOptions: ({ navigation }) => ({
-        header: (
-          <Header left={<Block />} white transparent title="" navigation={navigation} />
-        ),
-        headerTransparent: true
-      })
-    }
-  },
-  {
-    cardStyle: {
-      backgroundColor: "#F8F9FE"
-    },
-    transitionConfig
-  }
-);
-// divideru se baga ca si cum ar fi un ecrna dar nu-i nimic duh
-const AppStack = createDrawerNavigator(
-  {
-    Onboarding: {
-      screen: Onboarding,
-      navigationOptions: {
-        drawerLabel: () => {}
-      }
-    },
-    Home: {
-      screen: HomeStack,
-      navigationOptions: navOpt => ({
-        drawerLabel: ({ focused }) => (
-          <DrawerItem focused={focused} title="Home" />
-        )
-      })
-    },
-    Profile: {
-      screen: ProfileStack,
-      navigationOptions: navOpt => ({
-        drawerLabel: ({ focused }) => (
-          <DrawerItem focused={focused} screen="Profile" title="Profile" />
-        )
-      })
-    },
-    Account: {
-      screen: Register,
-      navigationOptions: navOpt => ({
-        drawerLabel: ({ focused }) => (
-          <DrawerItem focused={focused} screen="Register" title="Account" />
-        )
-      })
-    },
-    Elements: {
-      screen: ElementsStack,
-      navigationOptions: navOpt => ({
-        drawerLabel: ({ focused }) => (
-          <DrawerItem focused={focused} screen="Elements" title="Elements" />
-        )
-      })
-    },
-    Articles: {
-      screen: ArticlesStack,
-      navigationOptions: navOpt => ({
-        drawerLabel: ({ focused }) => (
-          <DrawerItem focused={focused} screen="Articles" title="Articles" />
-        )
-      })
-    }
-  },
-  Menu
-);
+function AppStack(props) {
+  return (
+    <Drawer.Navigator
+      style={{ flex: 1 }}
+      drawerContent={props => <CustomDrawerContent {...props} />}
+      drawerStyle={{
+        backgroundColor: "white",
+        width: width * 0.8
+      }}
+      drawerContentOptions={{
+        activeTintcolor: "white",
+        inactiveTintColor: "#000",
+        activeBackgroundColor: "transparent",
+        itemStyle: {
+          width: width * 0.75,
+          backgroundColor: "transparent",
+          paddingVertical: 16,
+          paddingHorizonal: 12,
+          justifyContent: "center",
+          alignContent: "center",
+          alignItems: "center",
+          overflow: "hidden"
+        },
+        labelStyle: {
+          fontSize: 18,
+          marginLeft: 12,
+          fontWeight: "normal"
+        }
+      }}
+      initialRouteName="Home"
+    >
+      <Drawer.Screen name="Home" component={HomeStack} />
+      <Drawer.Screen name="Profile" component={ProfileStack} />
+      <Drawer.Screen name="Account" component={Register} />
+      <Drawer.Screen name="Elements" component={ElementsStack} />
+      <Drawer.Screen name="Articles" component={ArticlesStack} />
+    </Drawer.Navigator>
+  );
+}
 
-const AppContainer = createAppContainer(AppStack);
-export default AppContainer;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "argon-react-native",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Argon React Native, based on Argon Design System. Coded by Creative Tim",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
@@ -14,16 +14,24 @@
     "url": "git+https://github.com/creativetimofficial/argon-react-native.git"
   },
   "dependencies": {
-    "expo": "^35.0.0",
-    "expo-asset": "~7.0.0",
-    "expo-font": "~7.0.0",
+    "@react-native-community/masked-view": "0.1.5",
+    "@react-navigation/bottom-tabs": "^5.0.6",
+    "@react-navigation/compat": "^5.0.0",
+    "@react-navigation/drawer": "5.0.0",
+    "@react-navigation/native": "5.0.0",
+    "@react-navigation/stack": "5.0.0",
+    "expo": "^36.0.0",
+    "expo-asset": "~8.0.0",
+    "expo-font": "~8.0.0",
     "galio-framework": "^0.6.3",
     "prop-types": "^15.7.2",
-    "react": "16.8.3",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
-    "react-native-gesture-handler": "~1.3.0",
-    "react-native-modal-dropdown": "^0.6.2",
-    "react-navigation": "^3.11.0"
+    "react": "16.9.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",
+    "react-native-gesture-handler": "~1.5.0",
+    "react-native-modal-dropdown": "^0.7.0",
+    "react-native-reanimated": "~1.4.0",
+    "react-native-safe-area-context": "0.6.0",
+    "react-native-screens": "2.0.0-alpha.12"
   },
   "devDependencies": {
     "babel-preset-expo": "^7.0.0"