CODEWITHSUNDEEP
react-nativeexporeact-navigationreact-navigation-v5
Similoluwa Odeyemi
Similoluwa Odeyemi

Reputation: 409

React navigation displays blank screen

I just started a new expo project, and I'm trying to use react navigation v5, but its showing only blank screen, but if I render a view directly, it displayed. My main.js is below

import { StatusBar } from 'expo-status-bar';

import 'react-native-gesture-handler';
import React from 'react';
import { Text, View, ActivityIndicator } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { navigationRef, isMountedRef } from './src/navigation/RootNavigation'
import Linking from './src/navigation/Linking';
import UserLogin from './src/screens/UserScreens/Auth/UserLogin';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import ForgotPassword from './src/screens/UserScreens/Auth/ForgotPassword';

const Stack = createStackNavigator();


const Main = () => {
    React.useEffect(() => {
        isMountedRef.current = true;
    
    
    
        return () => (isMountedRef.current = false);
    }, []);
    const UserAuthStack = () => (
        <Stack.Navigator>
            <Stack.Screen component={ForgotPassword} name='userForgotLogin' options={{headerShown: false}} />        
            <Stack.Screen component={UserLogin} name='userLogin'  options={{headerShown: false}} />
        </Stack.Navigator>
    )
    let RenderedContent = <UserAuthStack />
    return (
        <View>
            <StatusBar style="auto" />
            <NavigationContainer
                ref={navigationRef}
                linking={Linking}
                fallback={<ActivityIndicator size={'large'} color={'#000'} />}
            >
                {RenderedContent}
                {/* <UserLogin /> */}
                {/* <ForgotPassword /> */}
            </NavigationContainer>
        </View>
    )
}

export default Main;

If I comment out the {RenderedContent} and uncomment any of the screens below it displays the supposed page.

Is anything wrong here?

Upvotes: 0

Views: 3297

Answers (2)

flashlim
flashlim

Reputation: 43

Setting <View style={{ flex: 1 }}/> should solve the issue.

Upvotes: 3

Similoluwa Odeyemi
Similoluwa Odeyemi

Reputation: 409

The solution is a little hidden. But its blank because I wrapped the whole thing around <View></View> removing just that solved the problem

Upvotes: 1

Related Questions