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
