Merge pull request #20 from creativetimofficial/v1.4.0

V1.4.0

Author: palingheorghe

App.js

@@ -1,11 +1,16 @@
-import React from 'react';
-import { Image } from 'react-native';
-import { AppLoading } from 'expo';
-import { Asset } from 'expo-asset';
-import { Block, GalioProvider } from 'galio-framework';
+import React from "react";
+import { Image } from "react-native";
+import { AppLoading } from "expo";
+import { Asset } from "expo-asset";
+import { Block, GalioProvider } from "galio-framework";
+import { NavigationContainer } from "@react-navigation/native";
 
-import Screens from './navigation/Screens';
-import { Images, articles, argonTheme } from './constants';
+// Before rendering any navigation stack
+import { enableScreens } from "react-native-screens";
+enableScreens();
+
+import Screens from "./navigation/Screens";
+import { Images, articles, argonTheme } from "./constants";
 
 // cache app images
 const assetImages = [
@@ -23,7 +28,7 @@ articles.map(article => assetImages.push(article.image));
 
 function cacheImages(images) {
   return images.map(image => {
-    if (typeof image === 'string') {
+    if (typeof image === "string") {
       return Image.prefetch(image);
     } else {
       return Asset.fromModule(image).downloadAsync();
@@ -33,11 +38,11 @@ function cacheImages(images) {
 
 export default class App extends React.Component {
   state = {
-    isLoadingComplete: false,
-  }
-  
+    isLoadingComplete: false
+  };
+
   render() {
-    if(!this.state.isLoadingComplete) {
+    if (!this.state.isLoadingComplete) {
       return (
         <AppLoading
           startAsync={this._loadResourcesAsync}
@@ -47,19 +52,19 @@ export default class App extends React.Component {
       );
     } else {
       return (
-        <GalioProvider theme={argonTheme}>
-          <Block flex>
-            <Screens />
-          </Block>
-        </GalioProvider>
+        <NavigationContainer>
+          <GalioProvider theme={argonTheme}>
+            <Block flex>
+              <Screens />
+            </Block>
+          </GalioProvider>
+        </NavigationContainer>
       );
     }
   }
 
   _loadResourcesAsync = async () => {
-    return Promise.all([
-      ...cacheImages(assetImages),
-    ]);
+    return Promise.all([...cacheImages(assetImages)]);
   };
 
   _handleLoadingError = error => {
@@ -71,5 +76,4 @@ export default class App extends React.Component {
   _handleFinishLoading = () => {
     this.setState({ isLoadingComplete: true });
   };
-
 }

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`

README.md

@@ -1,7 +1,7 @@
 # [Argon React Native](https://creativetimofficial.github.io/argon-react-native/docs/#) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/home?status=Argon%20React%20Native,%20a%20cool%20Argon%20React%20Native%20App%20Template%20%E2%9D%A4%EF%B8%8F%20https%3A//bit.ly/2KAj86H%20%23reactnative%20%23argon%20%23designsystem%20%23developers%20via%20%40CreativeTim)
 
 
- ![version](https://img.shields.io/badge/version-1.3.0-blue.svg)  [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/argon-react-native.svg?style=flat)](https://github.com/creativetimofficial/argon-react-native/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/argon-react-native.svg?maxAge=2592000)](https://github.com/creativetimofficial/argon-react-native/issues?q=is%3Aissue+is%3Aclosed)
+ ![version](https://img.shields.io/badge/version-1.4.0-blue.svg)  [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/argon-react-native.svg?style=flat)](https://github.com/creativetimofficial/argon-react-native/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/argon-react-native.svg?maxAge=2592000)](https://github.com/creativetimofficial/argon-react-native/issues?q=is%3Aissue+is%3Aclosed)
 
 
 ![Product Gif](https://raw.githubusercontent.com/creativetimofficial/public-assets/master/argon-react-native/arg-rn-thumbnail.jpg)

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": {

components/Card.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { withNavigation } from 'react-navigation';
+import { withNavigation } from '@react-navigation/compat';
 import PropTypes from 'prop-types';
 import { StyleSheet, Dimensions, Image, TouchableWithoutFeedback } from 'react-native';
 import { Block, Text, theme } from 'galio-framework';

components/DrawerItem.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { StyleSheet } from "react-native";
+import { StyleSheet, TouchableOpacity } from "react-native";
 import { Block, Text, theme } from "galio-framework";
 
 import Icon from "./Icon";
@@ -15,7 +15,7 @@ class DrawerItem extends React.Component {
           <Icon
             name="shop"
             family="ArgonExtra"
-            size={10}
+            size={14}
             color={focused ? "white" : argonTheme.COLORS.PRIMARY}
           />
         );
@@ -24,7 +24,7 @@ class DrawerItem extends React.Component {
           <Icon
             name="map-big"
             family="ArgonExtra"
-            size={12}
+            size={14}
             color={focused ? "white" : argonTheme.COLORS.ERROR}
           />
         );
@@ -33,7 +33,7 @@ class DrawerItem extends React.Component {
           <Icon
             name="spaceship"
             family="ArgonExtra"
-            size={12}
+            size={14}
             color={focused ? "white" : argonTheme.COLORS.PRIMARY}
           />
         );
@@ -42,7 +42,7 @@ class DrawerItem extends React.Component {
           <Icon
             name="chart-pie-35"
             family="ArgonExtra"
-            size={12}
+            size={14}
             color={focused ? "white" : argonTheme.COLORS.WARNING}
           />
         );
@@ -51,12 +51,17 @@ class DrawerItem extends React.Component {
           <Icon
             name="calendar-date"
             family="ArgonExtra"
-            size={12}
+            size={14}
             color={focused ? "white" : argonTheme.COLORS.INFO}
           />
         );
       case "Getting Started":
-        return <Icon />;
+        return (<Icon
+          name="spaceship"
+          family="ArgonExtra"
+          size={14}
+          color={focused ? "white" : "rgba(0,0,0,0.5)"}
+        />);
       case "Log out":
         return <Icon />;
       default:
@@ -65,36 +70,47 @@ class DrawerItem extends React.Component {
   };
 
   render() {
-    const { focused, title } = this.props;
+    const { focused, title, navigation } = this.props;
 
     const containerStyles = [
       styles.defaultStyle,
       focused ? [styles.activeStyle, styles.shadow] : null
     ];
 
     return (
-      <Block flex row style={containerStyles}>
-        <Block middle flex={0.1} style={{ marginRight: 5 }}>
-          {this.renderIcon()}
-        </Block>
-        <Block row center flex={0.9}>
-          <Text
-            size={15}
-            bold={focused ? true : false}
-            color={focused ? "white" : "rgba(0,0,0,0.5)"}
-          >
-            {title}
-          </Text>
+      <TouchableOpacity
+        style={{ height: 60 }}
+        onPress={() =>
+          title == "Getting Started"
+            ? Linking.openURL(
+                "https://demos.creative-tim.com/argon-pro-react-native/docs/"
+              ).catch(err => console.error("An error occurred", err))
+            : navigation.navigate(title)
+        }
+      >
+        <Block flex row style={containerStyles}>
+          <Block middle flex={0.1} style={{ marginRight: 5 }}>
+            {this.renderIcon()}
+          </Block>
+          <Block row center flex={0.9}>
+            <Text
+              size={15}
+              bold={focused ? true : false}
+              color={focused ? "white" : "rgba(0,0,0,0.5)"}
+            >
+              {title}
+            </Text>
+          </Block>
         </Block>
-      </Block>
+      </TouchableOpacity>
     );
   }
 }
 
 const styles = StyleSheet.create({
   defaultStyle: {
-    paddingVertical: 15,
-    paddingHorizontal: 14
+    paddingVertical: 16,
+    paddingHorizontal: 16
   },
   activeStyle: {
     backgroundColor: argonTheme.COLORS.ACTIVE,

components/Header.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { withNavigation } from 'react-navigation';
+import { withNavigation } from '@react-navigation/compat';
 import { TouchableOpacity, StyleSheet, Platform, Dimensions } from 'react-native';
 import { Button, Block, NavBar, Text, theme } from 'galio-framework';
 
@@ -52,7 +52,6 @@ class Header extends React.Component {
   }
   renderRight = () => {
     const { white, title, navigation } = this.props;
-    const { routeName } = navigation.state;
 
     if (title === 'Title') {
       return [
@@ -61,7 +60,7 @@ class Header extends React.Component {
       ]
     }
 
-    switch (routeName) {
+    switch (title) {
       case 'Home':
         return ([
           <BellButton key='chat-home' navigation={navigation} isWhite={white} />,
@@ -167,8 +166,8 @@ class Header extends React.Component {
   }
   render() {
     const { back, title, white, transparent, bgColor, iconColor, titleColor, navigation, ...props } = this.props;
-    const { routeName } = navigation.state;
-    const noShadow = ['Search', 'Categories', 'Deals', 'Pro', 'Profile'].includes(routeName);
+
+    const noShadow = ['Search', 'Categories', 'Deals', 'Pro', 'Profile'].includes(title);
     const headerStyles = [
       !noShadow ? styles.shadow : null,
       transparent ? { backgroundColor: 'rgba(0,0,0,0)' } : null,
@@ -182,17 +181,20 @@ class Header extends React.Component {
     return (
       <Block style={headerStyles}>
         <NavBar
-          back={back}
+          back={false}
           title={title}
           style={navbarStyles}
           transparent={transparent}
           right={this.renderRight()}
           rightStyle={{ alignItems: 'center' }}
           left={
             <Icon 
-              name={back ? 'nav-left' : "menu-8"} family="ArgonExtra" 
-              size={14} onPress={this.handleLeftPress} 
-              color={iconColor || argonTheme.COLORS.ICON}/>
+              name={back ? 'chevron-left' : "menu"} family="entypo" 
+              size={20} onPress={this.handleLeftPress} 
+              color={iconColor || (white ? argonTheme.COLORS.WHITE : argonTheme.COLORS.ICON)}
+              style={{ marginTop: 2 }}
+            />
+              
           }
           leftStyle={{ paddingVertical: 12, flex: 0.2 }}
           titleStyle={[