first render fixed

App.js

@@ -1,11 +1,16 @@
-import React from 'react';
+import React from "react";
-import { Image } from 'react-native';
+import { Image } from "react-native";
-import { AppLoading } from 'expo';
+import { AppLoading } from "expo";
-import { Asset } from 'expo-asset';
+import { Asset } from "expo-asset";
-import { Block, GalioProvider } from 'galio-framework';
+import { Block, GalioProvider } from "galio-framework";
+import { NavigationContainer } from "@react-navigation/native";
 
-import Screens from './navigation/Screens';
+// Before rendering any navigation stack
-import { Images, articles, argonTheme } from './constants';
+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,8 +38,8 @@ function cacheImages(images) {
 
 export default class App extends React.Component {
   state = {
-    isLoadingComplete: false,
+    isLoadingComplete: false
-  }
+  };
 
   render() {
     if (!this.state.isLoadingComplete) {
@@ -47,19 +52,19 @@ export default class App extends React.Component {
       );
     } else {
       return (
+        <NavigationContainer>
           <GalioProvider theme={argonTheme}>
             <Block flex>
               <Screens />
             </Block>
           </GalioProvider>
+        </NavigationContainer>
       );
     }
   }
 
   _loadResourcesAsync = async () => {
-    return Promise.all([
+    return Promise.all([...cacheImages(assetImages)]);
-      ...cacheImages(assetImages),
-    ]);
   };
 
   _handleLoadingError = error => {
@@ -71,5 +76,4 @@ export default class App extends React.Component {
   _handleFinishLoading = () => {
     this.setState({ isLoadingComplete: true });
   };
-
 }

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';

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';
 

navigation/Screens.js

@@ -131,7 +131,7 @@ export default function OnboardingStack(props) {
     <Stack.Navigator mode="card" headerMode="none">
       <Stack.Screen
         name="Onboarding"
-        component={Pro}
+        component={Onboarding}
         option={{
           headerTransparent: true
         }}

screens/Onboarding.js

@@ -52,7 +52,7 @@ class Onboarding extends React.Component {
                 <Button
                   style={styles.button}
                   color={argonTheme.COLORS.SECONDARY}
-                  onPress={() => navigation.navigate("Home")}
+                  onPress={() => navigation.navigate("App")}
                   textStyle={{ color: argonTheme.COLORS.BLACK }}
                 >
                   Get Started