Sorry if this is basic, but I'm trying to create my first react-native app and I'm a bit confused about react-navigation and the npm dependencies.

I'm using Expo to build my project, and it deploys correctly on web, but when I try o connect using my iphone, I don't see anything within the Stack.Navigator component.

I suspect it has to do with the npm packages. Perhaps some don't work on ios? Also I don't get any error code so I'm not sure how to debug. Any clues?

For context, here is my code

App.js

import { StatusBar } from "expo-status-bar";
import { useEffect, useState } from "react";
import * as Font from "expo-font";
import { StyleSheet, Text, SafeAreaView } from "react-native";
import { initializeApp } from "firebase/app";
import * as SplashScreen from "expo-splash-screen";
import { credentials } from "./src/utils/firebase";
import MyStack from "./src/screens/stack/navigation";
import AppStack from "./src/screens/stack/appstack";


// Keep the splash screen visible while we fetch resources
SplashScreen.preventAutoHideAsync();

export default function App() {
  const [dataLoaded, setDataLoaded] = useState(false);

  useEffect(() => {
    async function prepare() {
      try {
        await initializeApp(credentials);
        await SplashScreen.preventAutoHideAsync();
        await fetchFonts();
      } catch (e) {
        console.warn(e);
      } finally {
        setDataLoaded(true);
      }
    }
    prepare();
  }, []);

  if (!dataLoaded) {
    return null;
  }

  return (
    <SafeAreaView style={styles.container}>
      <Text>SHAKA!</Text>
      <AppStack />
      <StatusBar style="auto" />
    </SafeAreaView>
  );
}

const fetchFonts = () => {
  return Font.loadAsync({
    "PlusJakartaSans-Regular": require("./assets/fonts/PlusJakartaSans-Regular.ttf"),
    "PlusJakartaSans-Medium": require("./assets/fonts/PlusJakartaSans-Medium.ttf"),
    "PlusJakartaSans-Bold": require("./assets/fonts/PlusJakartaSans-Bold.ttf"),
    "Poppins-Regular": require("./assets/fonts/Poppins-Regular.ttf"),
    "Poppins-Medium": require("./assets/fonts/Poppins-Medium.ttf"),
    "Poppins-Bold": require("./assets/fonts/Poppins-Bold.ttf"),
    "Poppins-SemiBold": require("./assets/fonts/Poppins-SemiBold.ttf"),
  });
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

appstack.js

mport React from "react";
import { Provider } from "react-redux";
import { createStore } from "react-redux";
import ContextWrapper from "../../context/context";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { StyleSheet, Button, Text, SafeAreaView } from "react-native";
import { StatusBar } from "expo-status-bar";

import Home from "../Home";
const Stack = createNativeStackNavigator();

const HomeScreen = ({ navigation }) => {
  return (
    <SafeAreaView style={styles.container}>
      <Text>Home jjkdjfk</Text>
      <Button title="Next Screen" />
      <StatusBar style="auto" />
    </SafeAreaView>
  );
};

export default function AppStack() {
  return (
    <ContextWrapper>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="HomeScreen"
            component={HomeScreen}
            options={{ title: "button" }}
          />
          <Stack.Screen
            name="Home"
            component={Home}
            options={{ title: "Home" }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </ContextWrapper>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

package.json

{
  "name": "shaka",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/webpack-config": "^0.17.0",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/native-stack": "^6.6.2",
    "@react-navigation/stack": "^6.3.4",
    "expo": "~45.0.0",
    "expo-splash-screen": "~0.15.1",
    "expo-status-bar": "~1.3.0",
    "firebase": "^9.12.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-screens": "^3.11.2",
    "react-native-web": "~0.18.7",
    "react-redux": "^8.0.4"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

CodePudding user response：

You are calling SplashScreen.preventAutoHideAsync() twice in your code. I guess the second call should be hideAsync().

  useEffect(() => {
    async function prepare() {
      try {
        await initializeApp(credentials);
        await SplashScreen.hideAsync();
        await fetchFonts();
      } catch (e) {
        console.warn(e);
      } finally {
        setDataLoaded(true);
      }
    }
    prepare();
  }, []);

Check expo splash screen docs for more details.

CodePudding user response：

Ok figured out the issue.

const HomeScreen = ({ navigation }) => {
  return (
    <SafeAreaView style={{flex: 1}}> // <-- STYLE WAS BROKEN. 
      <Text>SHAKA!</Text>
      <AppStack />
      <StatusBar style="auto" />
    </SafeAreaView>
  );
};