Question 33927 in React native Question posted in
The official React Native documentation can be found here.

React Native Stack.Navigator not working on iOS

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
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Ok figured out the issue.

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

  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search