diff --git a/App.js b/App.js
index 3d6c8cc..4444a1a 100644
--- a/App.js
+++ b/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 (
-
- );
- } else {
- return (
-
-
-
-
-
-
-
- );
+ 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 (
+
+
+
+
+
+
+
+ );
}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2235f5f..7030f49 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/README.md b/README.md
index 403b087..1c05c03 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
# [Now UI React Native](https://creativetimofficial.github.io/now-ui-react-native/docs/#) [](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)
-  [](https://github.com/creativetimofficial/now-ui-react-native/issues?q=is%3Aopen+is%3Aissue) [](https://github.com/creativetimofficial/now-ui-react-native/issues?q=is%3Aissue+is%3Aclosed)
+  [](https://github.com/creativetimofficial/now-ui-react-native/issues?q=is%3Aopen+is%3Aissue) [](https://github.com/creativetimofficial/now-ui-react-native/issues?q=is%3Aissue+is%3Aclosed)
diff --git a/package.json b/package.json
index 1a5dbda..3698d40 100644
--- a/package.json
+++ b/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",