Merge pull request #47 from creativetimofficial/v1.9.0

Feature v.1.9.0

App.js

@@ -1,7 +1,7 @@
-import React, {useState} from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { Image } from "react-native";
-import AppLoading from "expo-app-loading";
+import * as SplashScreen from "expo-splash-screen";
-import { useFonts } from '@use-expo/font';
+import * as Font from "expo-font";
 import { Asset } from "expo-asset";
 import { Block, GalioProvider } from "galio-framework";
 import { NavigationContainer } from "@react-navigation/native";
@@ -21,14 +21,13 @@ const assetImages = [
   Images.Pro,
   Images.ArgonLogo,
   Images.iOSLogo,
-  Images.androidLogo
+  Images.androidLogo,
 ];
-
 // cache product images
-articles.map(article => assetImages.push(article.image));
+articles.map((article) => assetImages.push(article.image));
 
 function cacheImages(images) {
-  return images.map(image => {
+  return images.map((image) => {
     if (typeof image === "string") {
       return Image.prefetch(image);
     } else {
@@ -37,87 +36,49 @@ function cacheImages(images) {
   });
 }
 
-export default props => {
+export default function App() {
-  const [isLoadingComplete, setLoading] = useState(false);
+  const [appIsReady, setAppIsReady] = useState(false);
-  let [fontsLoaded] = useFonts({
-    'ArgonExtra': require('./assets/font/argon.ttf'),
-  });
 
-  function _loadResourcesAsync() {
+  useEffect(() => {
+    async function prepare() {
+      try {
+        //Load Resources
+        await _loadResourcesAsync();
+        // Pre-load fonts, make any API calls you need to do here
+        await Font.loadAsync({
+          ArgonExtra: require("./assets/font/argon.ttf"),
+        });
+      } catch (e) {
+        console.warn(e);
+      } finally {
+        // Tell the application to render
+        setAppIsReady(true);
+      }
+    }
+    prepare();
+  }, []);
+
+  const _loadResourcesAsync = async () => {
     return Promise.all([...cacheImages(assetImages)]);
-  }
-
-  function _handleLoadingError(error) {
-    // In this case, you might want to report the error to your error
-    // reporting service, for example Sentry
-    console.warn(error);
   };
 
- function _handleFinishLoading() {
+  const onLayoutRootView = useCallback(async () => {
-    setLoading(true);
+    if (appIsReady) {
-  };
+      await SplashScreen.hideAsync();
+    }
+  }, [appIsReady]);
 
-  if(!fontsLoaded && !isLoadingComplete) {
+  if (!appIsReady) {
-    return (
+    return null;
-      <AppLoading
-        startAsync={_loadResourcesAsync}
-        onError={_handleLoadingError}
-        onFinish={_handleFinishLoading}
-      />
-    );
-  } else if(fontsLoaded) {
-    return (
-      <NavigationContainer>
-        <GalioProvider theme={argonTheme}>
-          <Block flex>
-            <Screens />
-          </Block>
-        </GalioProvider>
-      </NavigationContainer>
-    );
-  } else {
-    return null
   }
+
+  return (
+    <NavigationContainer onReady={onLayoutRootView}>
+      <GalioProvider theme={argonTheme}>
+        <Block flex>
+          <Screens />
+        </Block>
+      </GalioProvider>
+    </NavigationContainer>
+  );
 }
-
-// export default class App extends React.Component {
-//   state = {
-//     isLoadingComplete: false
-//   };
-
-//   render() {
-//     if (!this.state.isLoadingComplete) {
-//       return (
-//         <AppLoading
-//           startAsync={this._loadResourcesAsync}
-//           onError={this._handleLoadingError}
-//           onFinish={this._handleFinishLoading}
-//         />
-//       );
-//     } else {
-//       return (
-//         <NavigationContainer>
-//           <GalioProvider theme={argonTheme}>
-//             <Block flex>
-//               <Screens />
-//             </Block>
-//           </GalioProvider>
-//         </NavigationContainer>
-//       );
-//     }
-//   }
-
-//   _loadResourcesAsync = async () => {
-//     return Promise.all([...cacheImages(assetImages)]);
-//   };
-
-//   _handleLoadingError = error => {
-//     // In this case, you might want to report the error to your error
-//     // reporting service, for example Sentry
-//     console.warn(error);
-//   };
-
-//   _handleFinishLoading = () => {
-//     this.setState({ isLoadingComplete: true });
-//   };
-// }

CHANGELOG.md

@@ -1,3 +1,9 @@
+## [1.9.0] 2022 - 08 - 01
+- dependencies updated
+- expo version updated
+- react native version updated
+- implement expo-splash-screen for splash loading
+
 ## [1.8.1] 2022-07-19
 
 ### Updated dependencies

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.8.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.9.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)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "argon-react-native",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "Argon React Native, based on Argon Design System. Coded by Creative Tim",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
@@ -14,30 +14,31 @@
     "url": "git+https://github.com/creativetimofficial/argon-react-native.git"
   },
   "dependencies": {
-    "@react-native-masked-view/masked-view": "0.2.6",
+    "@react-native-masked-view/masked-view": "0.2.8",
     "@react-navigation/bottom-tabs": "^6.3.1",
     "@react-navigation/compat": "^5.1.25",
-    "@react-navigation/drawer": "5.12.4",
+    "@react-navigation/drawer": "6.4.1",
     "@react-navigation/native": "^6.0.10",
     "@react-navigation/stack": "^6.2.1",
     "@use-expo/font": "^2.0.0",
-    "expo": "^45.0.0",
+    "expo": "^48.0.16",
     "expo-app-loading": "~2.0.0",
-    "expo-asset": "~8.5.0",
+    "expo-asset": "~8.9.1",
-    "expo-font": "~10.1.0",
+    "expo-font": "~11.1.1",
-    "expo-modules-core": "~0.9.2",
+    "expo-modules-core": "~1.2.7",
+    "expo-splash-screen": "^0.18.2",
     "galio-framework": "^0.8.0",
     "prop-types": "^15.7.2",
-    "react": "17.0.2",
+    "react": "18.2.0",
-    "react-native": "0.68.2",
+    "react-native": "0.71.8",
-    "react-native-gesture-handler": "~2.2.1",
+    "react-native-gesture-handler": "~2.9.0",
-    "react-native-modal-dropdown": "git+https://github.com/siemiatj/react-native-modal-dropdown.git",
+    "react-native-modal-dropdown": "1.0.2",
-    "react-native-reanimated": "~2.8.0",
+    "react-native-reanimated": "~2.14.4",
-    "react-native-safe-area-context": "4.2.4",
+    "react-native-safe-area-context": "4.5.0",
-    "react-native-screens": "~3.11.1"
+    "react-native-screens": "~3.20.0"
   },
   "devDependencies": {
-    "babel-preset-expo": "~9.1.0"
+    "babel-preset-expo": "^9.3.0"
   },
   "keywords": [
     "argon react native",