Merge pull request #47 from creativetimofficial/v1.9.0

Feature v.1.9.0
2025-12-22 09:19:26 +00:00 · 2023-08-14 14:20:44 +03:00
parent 4262332afa c38eec6f01
commit df0ec08e8f
4 changed files with 68 additions and 100 deletions
--- a/App.js
+++ b/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 { useFonts } from '@use-expo/font';
+import * as SplashScreen from "expo-splash-screen";
+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,37 +36,44 @@ function cacheImages(images) {
  });
 }

-export default props => {
-  const [isLoadingComplete, setLoading] = useState(false);
-  let [fontsLoaded] = useFonts({
-    'ArgonExtra': require('./assets/font/argon.ttf'),
-  });
+export default function App() {
+  const [appIsReady, setAppIsReady] = useState(false);

-  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)]);
+  };
+
+  const onLayoutRootView = useCallback(async () => {
+    if (appIsReady) {
+      await SplashScreen.hideAsync();
+    }
+  }, [appIsReady]);
+
+  if (!appIsReady) {
+    return null;
  }

-  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() {
-    setLoading(true);
-  };
-
-  if(!fontsLoaded && !isLoadingComplete) {
  return (
-      <AppLoading
-        startAsync={_loadResourcesAsync}
-        onError={_handleLoadingError}
-        onFinish={_handleFinishLoading}
-      />
-    );
-  } else if(fontsLoaded) {
-    return (
-      <NavigationContainer>
+    <NavigationContainer onReady={onLayoutRootView}>
      <GalioProvider theme={argonTheme}>
        <Block flex>
          <Screens />
@@ -75,49 +81,4 @@ export default props => {
      </GalioProvider>
    </NavigationContainer>
  );
-  } else {
-    return null
-  }
 }
-
-// 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 });
-//   };
-// }
--- a/CHANGELOG.md
+++ b/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
--- 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.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)
--- a/package.json
+++ b/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-font": "~10.1.0",
-    "expo-modules-core": "~0.9.2",
+    "expo-asset": "~8.9.1",
+    "expo-font": "~11.1.1",
+    "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-native": "0.68.2",
-    "react-native-gesture-handler": "~2.2.1",
-    "react-native-modal-dropdown": "git+https://github.com/siemiatj/react-native-modal-dropdown.git",
-    "react-native-reanimated": "~2.8.0",
-    "react-native-safe-area-context": "4.2.4",
-    "react-native-screens": "~3.11.1"
+    "react": "18.2.0",
+    "react-native": "0.71.8",
+    "react-native-gesture-handler": "~2.9.0",
+    "react-native-modal-dropdown": "1.0.2",
+    "react-native-reanimated": "~2.14.4",
+    "react-native-safe-area-context": "4.5.0",
+    "react-native-screens": "~3.20.0"
  },
  "devDependencies": {
-    "babel-preset-expo": "~9.1.0"
+    "babel-preset-expo": "^9.3.0"
  },
  "keywords": [
    "argon react native",