CODEWITHSUNDEEP
reactjsreact-nativeuser-interfacereact-navigation
Keval Shah
Keval Shah

Reputation: 67

Empty screen in react native app after adding react navigation

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import Home from "./screens/Home";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import MeetingRoom from "./screens/MeetingRoom";

export default function App() {
    const Stack = createNativeStackNavigator();
    return (
        <View>
            <NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen name="home" component={Home} />

                    <Stack.Screen name="room" component={MeetingRoomh} />
                </Stack.Navigator>
            </NavigationContainer>
            <StatusBar style="light" />
        </View>
    );
}

const styles = StyleSheet.create({});

after adding react navigation to my app , my app was just giving plane white screen. so anyone knows how I can fix the white screen and bring my ui back and up and running . and I am testing my app on my android phone using expo

Thanks in advance for helping me

Upvotes: 1

Views: 1244

Answers (1)

Tarik
Tarik

Reputation: 597

You are wrapping your <NavigationContainer/> with <View/>. And it has no style. You can give it to flex 1 or just remove it. In a typical setup for react navigation, you would not want to wrap your <NavigationContainer/> with <View/>. What I would suggest is just remove <View/>.

This is also what react-navigation suggests.

Upvotes: 4

Related Questions