Why Don't I See Anything Rendering in My Stack Navigator?

Viewed 151

I have this file and I am unable to see anything, other than the title at the top of screen, rendering:

import React from 'react';
import { Text, View, Button } from 'react-native';
import { NavigationContainer} from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack'
import CreateSessionScreen from '../screens/CreateSessionScreen';
import CompletedSessionsScreen from '../screens/CompletedSessionsScreen';

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

function Hello() {
  return (
    <View>
        <Text 
          style={{
          flex: 1, 
          fontSize: 100, 
          height: 80, 
          width: 80, 
          borderColor: 'black', 
          borderWidth: 1, 
          justifyContent: 'center',
          alignItems: 'center'}}>
            Hello World
          </Text>
          <Button title='click me'>Click me</Button>
    </View>
  );
}

function AppNavigator() {
  return (
    <NavigationContainer >
      <Stack.Navigator>
        <Stack.Screen name="Hello" component={Hello} />
        <Stack.Screen name="Completed Sessions" component={CompletedSessionsScreen} />
        <Stack.Screen name="CreateSessionScreen" component={CreateSessionScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default AppNavigator;

For some reason I can't see anything rendering to the screen. I can throw a console.log in the component to ensure that it is rendering. I have a couple of components imported, and then threw the Hello component in the same file for troubleshooting, and can't get either to render

Empty Screen Despite "Home" Component

1 Answers

the problem is with your fontSize = 100 and you have the height/width very smaller compare to that. change it to 10 and see what happens.

 function Hello() {
  return (
    <View
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        flex: 1,
      }}>
      <Text>
        Hello World
      </Text>
      <Button title="click me">Click me</Button>
    </View>
  );
}
Related