Feature v1.6.0

App.js

@@ -1,10 +1,17 @@
-import React from 'react';
-import { Image } from 'react-native';
-import AppLoading from 'expo-app-loading';
+import React, { useCallback, useEffect, useState } from 'react';
+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';
+import { Image } from 'react-native';
+
+// Keep the splash screen visible while we fetch resources
+SplashScreen.preventAutoHideAsync();
+
+// Before rendering any navigation stack
+import { enableScreens } from 'react-native-screens';
+enableScreens();
 
 import Screens from './navigation/Screens';
 import { Images, articles, nowTheme } from './constants';
@@ -21,14 +28,14 @@ const assetImages = [
   Images.CreativeTimLogo,
   Images.InvisionLogo,
   Images.RegisterBackground,
-  Images.ProfileBackground
+  Images.ProfileBackground,
 ];
 
 // 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,62 +44,50 @@ function cacheImages(images) {
   });
 }
 
-export default class App extends React.Component {
-  state = {
-    isLoadingComplete: false,
-    fontLoaded: false
-  };
-
-  // async componentDidMount() {
-  //   Font.loadAsync({
-  //     'montserrat-regular': require('./assets/font/Montserrat-Regular.ttf'),
-  //     'montserrat-bold': require('./assets/font/Montserrat-Bold.ttf')
-  //   });
+export default function App() {
+  const [appIsReady, setAppIsReady] = useState(false);
 
-  //   this.setState({ fontLoaded: true });
-  // }
-
-  render() {
-    if (!this.state.isLoadingComplete) {
-      return (
-        <AppLoading
-          startAsync={this._loadResourcesAsync}
-          onError={this._handleLoadingError}
-          onFinish={this._handleFinishLoading}
-        />
-      );
-    } else {
-      return (
-        <NavigationContainer>
-          <GalioProvider theme={nowTheme}>
-            <Block flex>
-              <Screens />
-            </Block>
-          </GalioProvider>
-        </NavigationContainer>
-      );
+  useEffect(() => {
+    async function prepare() {
+      try {
+        //Load Resources
+        await _loadResourcesAsync();
+      } catch (e) {
+        console.warn(e);
+      } finally {
+        // Tell the application to render
+        setAppIsReady(true);
+      }
     }
-  }
+    prepare();
+  }, []);
 
-  _loadResourcesAsync = async () => {
+  const _loadResourcesAsync = async () => {
+    //Pre Loaded Fonts
     await Font.loadAsync({
       'montserrat-regular': require('./assets/font/Montserrat-Regular.ttf'),
-      'montserrat-bold': require('./assets/font/Montserrat-Bold.ttf')
+      'montserrat-bold': require('./assets/font/Montserrat-Bold.ttf'),
     });
-
-    this.setState({ fontLoaded: true });
     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 = () => {
-    if (this.state.fontLoaded) {
-      this.setState({ isLoadingComplete: true });
+  const onLayoutRootView = useCallback(async () => {
+    if (appIsReady) {
+      await SplashScreen.hideAsync();
     }
-  };
+  }, [appIsReady]);
+
+  if (!appIsReady) {
+    return null;
+  }
+
+  return (
+    <NavigationContainer onReady={onLayoutRootView}>
+      <GalioProvider theme={nowTheme}>
+        <Block flex>
+          <Screens />
+        </Block>
+      </GalioProvider>
+    </NavigationContainer>
+  );
 }

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.6.0] 2023-08-01
+- dependencies updated
+- expo version updated
+- react native version updated
+- implement expo-splash-screen for splash loading
+- App.js has changed from class component to functional component
+
 ## [1.5.1] 2022-07-20
 
 ### Updated dependencies

README.md

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "now-ui-react-native",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Now UI React Native, based on Now UI Design System. Coded by Creative Tim",
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
@@ -15,31 +15,32 @@
     "url": "git+https://github.com/creativetimofficial/now-ui-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": "6.4.1",
     "@react-navigation/native": "6.0.10",
     "@react-navigation/stack": "6.2.1",
-    "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-native-svg": "12.3.0"
+    "prop-types": "^15.8.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",
+    "react-native-svg": "13.4.0"
   },
   "devDependencies": {
     "babel-eslint": "10.0.3",
-    "babel-preset-expo": "9.1.0"
+    "babel-preset-expo": "^9.3.0"
   },
   "keywords": [
     "now react native",