From d34a867b0abe3c926cb27c9075ac3f8f3e71935e Mon Sep 17 00:00:00 2001 From: Alin Gheorghe Date: Thu, 5 Mar 2020 18:26:49 -0500 Subject: [PATCH 1/7] updated packages and navigation --- CHANGELOG.md | 11 ++ app.json | 4 +- navigation/Menu.js | 86 ++++++----- navigation/Screens.js | 324 +++++++++++++++++++++--------------------- package.json | 26 ++-- 5 files changed, 231 insertions(+), 220 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6ecd56c..dc610a5 100644 --- a/CHANGELOG.md +++ b/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` diff --git a/app.json b/app.json index bdc5cb0..8e716c0 100644 --- a/app.json +++ b/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": { diff --git a/navigation/Menu.js b/navigation/Menu.js index ac024a1..d345de0 100644 --- a/navigation/Menu.js +++ b/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 => ( - - - - - - - - +function CustomDrawerContent({ drawerPosition, navigation, profile, focused, state, ...rest }) { + const insets = useSafeArea(); + const screens = [ + "Home", + "Profile", + "Account", + "Elements", + "Articles", + ]; + return ( + + + + + + + {screens.map((item, index) => { + return ( + + ); + })} + + + DOCUMENTATION + + + + - -); + ); +} -const Menu = { - contentComponent: 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; diff --git a/navigation/Screens.js b/navigation/Screens.js index 89b8ac8..af7adcb 100644 --- a/navigation/Screens.js +++ b/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 ( + + ( +
+ ), + cardStyle: { backgroundColor: "#F8F9FE" } + }} + /> + + ); +} - if ( - screenName === transitionProps.scene.route.routeName || - (prevTransitionProps && - screenName === prevTransitionProps.scene.route.routeName) - ) { - return scaleWithOpacity; - } - return { transform: [{ translateX }] }; - } -}); +function ArticlesStack(props) { + return ( + + ( +
+ ), + cardStyle: { backgroundColor: "#F8F9FE" } + }} + /> + + ); +} -const ElementsStack = createStackNavigator({ - Elements: { - screen: Elements, - navigationOptions: ({ navigation }) => ({ - header:
- }) - } -},{ - cardStyle: { - backgroundColor: "#F8F9FE" - }, - transitionConfig -}); +function ProfileStack(props) { + return ( + + ( +
+ ), + cardStyle: { backgroundColor: "#FFFFFF" }, + headerTransparent: true + }} + /> + + ); +} -const ArticlesStack = createStackNavigator({ - Articles: { - screen: Articles, - navigationOptions: ({ navigation }) => ({ - header:
- }) - } -},{ - cardStyle: { - backgroundColor: "#F8F9FE" - }, - transitionConfig -}); +function HomeStack(props) { + return ( + + ( +
+ ), + cardStyle: { backgroundColor: "#F8F9FE" } + }} + /> + ( +
+ ), + headerTransparent: true + }} + /> + + ); +} -const ProfileStack = createStackNavigator( - { - Profile: { - screen: Profile, - navigationOptions: ({ navigation }) => ({ - header: ( -
- ), - headerTransparent: true - }) - } - }, - { - cardStyle: { backgroundColor: "#FFFFFF" }, - transitionConfig - } -); +export default function OnboardingStack(props) { + return ( + + + + + ); +} -const HomeStack = createStackNavigator( - { - Home: { - screen: Home, - navigationOptions: ({ navigation }) => ({ - header:
- }) - }, - Pro: { - screen: Pro, - navigationOptions: ({ navigation }) => ({ - header: ( -
} 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 }) => ( - - ) - }) - }, - Profile: { - screen: ProfileStack, - navigationOptions: navOpt => ({ - drawerLabel: ({ focused }) => ( - - ) - }) - }, - Account: { - screen: Register, - navigationOptions: navOpt => ({ - drawerLabel: ({ focused }) => ( - - ) - }) - }, - Elements: { - screen: ElementsStack, - navigationOptions: navOpt => ({ - drawerLabel: ({ focused }) => ( - - ) - }) - }, - Articles: { - screen: ArticlesStack, - navigationOptions: navOpt => ({ - drawerLabel: ({ focused }) => ( - - ) - }) - } - }, - Menu -); +function AppStack(props) { + return ( + } + 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" + > + + + + + + + ); +} -const AppContainer = createAppContainer(AppStack); -export default AppContainer; diff --git a/package.json b/package.json index 8369189..9d17b2f 100644 --- a/package.json +++ b/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" From 29864f971ba919e784959eeb7ebc8f8ffbe20c04 Mon Sep 17 00:00:00 2001 From: Alin Gheorghe Date: Thu, 5 Mar 2020 18:40:17 -0500 Subject: [PATCH 2/7] first render fixed --- App.js | 46 +++++++++++++++++++++++-------------------- components/Card.js | 2 +- components/Header.js | 2 +- navigation/Screens.js | 2 +- screens/Onboarding.js | 2 +- 5 files changed, 29 insertions(+), 25 deletions(-) diff --git a/App.js b/App.js index 761adac..b9c9a2d 100644 --- a/App.js +++ b/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 ( - - - - + + + + + + + ); } } _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 }); }; - } diff --git a/components/Card.js b/components/Card.js index 276f79b..6b7bc89 100644 --- a/components/Card.js +++ b/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'; diff --git a/components/Header.js b/components/Header.js index a4e4ccd..f15e028 100644 --- a/components/Header.js +++ b/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'; diff --git a/navigation/Screens.js b/navigation/Screens.js index af7adcb..01306f1 100644 --- a/navigation/Screens.js +++ b/navigation/Screens.js @@ -131,7 +131,7 @@ export default function OnboardingStack(props) { navigation.navigate("Home")} + onPress={() => navigation.navigate("App")} textStyle={{ color: argonTheme.COLORS.BLACK }} > Get Started From e132d75fd07e9f3bb9117c45c28c5416ad30a461 Mon Sep 17 00:00:00 2001 From: Alin Gheorghe Date: Thu, 5 Mar 2020 18:53:01 -0500 Subject: [PATCH 3/7] Pro links to product page --- components/Header.js | 18 ++++++++++-------- navigation/Menu.js | 2 +- screens/Pro.js | 6 +++--- 3 files changed, 14 insertions(+), 12 deletions(-) diff --git a/components/Header.js b/components/Header.js index f15e028..207c7e8 100644 --- a/components/Header.js +++ b/components/Header.js @@ -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 ([ , @@ -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,7 +181,7 @@ class Header extends React.Component { return ( + 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={[ diff --git a/navigation/Menu.js b/navigation/Menu.js index d345de0..3c726ef 100644 --- a/navigation/Menu.js +++ b/navigation/Menu.js @@ -41,7 +41,7 @@ function CustomDrawerContent({ drawerPosition, navigation, profile, focused, sta })} - DOCUMENTATION + DOCUMENTATION diff --git a/screens/Pro.js b/screens/Pro.js index 462ae0b..ef914e7 100644 --- a/screens/Pro.js +++ b/screens/Pro.js @@ -1,5 +1,5 @@ import React from 'react'; -import { ImageBackground, Image, StyleSheet, StatusBar, Dimensions, Platform } from 'react-native'; +import { ImageBackground, Image, StyleSheet, StatusBar, Dimensions, Platform, Linking } from 'react-native'; import { Block, Button, Text, theme } from 'galio-framework'; const { height, width } = Dimensions.get('screen'); @@ -53,8 +53,8 @@ export default class Pro extends React.Component { shadowless style={styles.button} color={argonTheme.COLORS.INFO} - onPress={() => navigation.navigate('Home')}> - COMING SOON + onPress={() => Linking.openURL('https://www.creative-tim.com/product/argon-pro-react-native').catch((err) => console.error('An error occurred', err))}> + BUY NOW From 8fc098e7e09486a424d8820a8544cd95b6a05931 Mon Sep 17 00:00:00 2001 From: Alin Gheorghe Date: Thu, 5 Mar 2020 18:56:34 -0500 Subject: [PATCH 4/7] drawer linking fixed --- components/DrawerItem.js | 39 +++++++++++++++++++----------- navigation/Screens.js | 51 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 76 insertions(+), 14 deletions(-) diff --git a/components/DrawerItem.js b/components/DrawerItem.js index da36d78..9a454d3 100644 --- a/components/DrawerItem.js +++ b/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"; @@ -73,20 +73,31 @@ class DrawerItem extends React.Component { ]; return ( - - - {this.renderIcon()} + + 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) + } + > + + + {this.renderIcon()} + + + + {title} + + - - - {title} - - - + ); } } diff --git a/navigation/Screens.js b/navigation/Screens.js index 01306f1..c3e8088 100644 --- a/navigation/Screens.js +++ b/navigation/Screens.js @@ -40,6 +40,23 @@ function ElementsStack(props) { ), cardStyle: { backgroundColor: "#F8F9FE" } }} + /> + ( +
+ ), + headerTransparent: true + }} /> ); @@ -57,6 +74,23 @@ function ArticlesStack(props) { ), cardStyle: { backgroundColor: "#F8F9FE" } }} + /> + ( +
+ ), + headerTransparent: true + }} /> ); @@ -81,6 +115,23 @@ function ProfileStack(props) { cardStyle: { backgroundColor: "#FFFFFF" }, headerTransparent: true }} + /> + ( +
+ ), + headerTransparent: true + }} /> ); From 04d317857851af58144524fa9096326e6e259a9c Mon Sep 17 00:00:00 2001 From: Alin Gheorghe Date: Thu, 5 Mar 2020 19:45:40 -0500 Subject: [PATCH 5/7] fixed navigation error and profile visual --- components/DrawerItem.js | 9 +++++++-- screens/Profile.js | 12 ++++++------ 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/components/DrawerItem.js b/components/DrawerItem.js index 9a454d3..ae99725 100644 --- a/components/DrawerItem.js +++ b/components/DrawerItem.js @@ -56,7 +56,12 @@ class DrawerItem extends React.Component { /> ); case "Getting Started": - return ; + return (); case "Log out": return ; default: @@ -65,7 +70,7 @@ class DrawerItem extends React.Component { }; render() { - const { focused, title } = this.props; + const { focused, title, navigation } = this.props; const containerStyles = [ styles.defaultStyle, diff --git a/screens/Profile.js b/screens/Profile.js index 7986391..c752201 100644 --- a/screens/Profile.js +++ b/screens/Profile.js @@ -62,35 +62,35 @@ class Profile extends React.Component { 2K - Orders + Orders 10 - Photos + Photos 89 - Comments + Comments From 945b5a106f299f3c6c715146bb001e1739636023 Mon Sep 17 00:00:00 2001 From: Alin Gheorghe Date: Thu, 5 Mar 2020 19:49:02 -0500 Subject: [PATCH 6/7] DrawerItem visual changes --- components/DrawerItem.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/components/DrawerItem.js b/components/DrawerItem.js index ae99725..2fc2d17 100644 --- a/components/DrawerItem.js +++ b/components/DrawerItem.js @@ -15,7 +15,7 @@ class DrawerItem extends React.Component { ); @@ -24,7 +24,7 @@ class DrawerItem extends React.Component { ); @@ -33,7 +33,7 @@ class DrawerItem extends React.Component { ); @@ -42,7 +42,7 @@ class DrawerItem extends React.Component { ); @@ -51,7 +51,7 @@ class DrawerItem extends React.Component { ); @@ -109,8 +109,8 @@ class DrawerItem extends React.Component { const styles = StyleSheet.create({ defaultStyle: { - paddingVertical: 15, - paddingHorizontal: 14 + paddingVertical: 16, + paddingHorizontal: 16 }, activeStyle: { backgroundColor: argonTheme.COLORS.ACTIVE, From f46a91d56200b2f2407848d5f41549348bab39ae Mon Sep 17 00:00:00 2001 From: Alin Gheorghe Date: Thu, 5 Mar 2020 19:50:34 -0500 Subject: [PATCH 7/7] readme v1.4.0 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index bdf23e0..c676058 100644 --- a/README.md +++ b/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)