Screen not showing up when using Stack.Navigator in expo - react-native

Question

I am new to app development and learning react-native using youtube tutorials.
I am trying to use Stack.Navigator for navigation and when I run the app using Expo Go on my mobile, nothing shows up. I don't see any compilation errors. Expo Go reloads the screen. But, nothing shows up on the screen. It is blank.
Here's the code:
App.js
import SignInScreen from '../screens/SignInScreen';
const Stack = createNativeStackNavigator();
const Navigation = () => {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{headerShown: false}}>
<Stack.Screen name="SignIn" component={SignInScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default Navigation;
In App.js, if I change it to a text and reload, I see my app shows up as Navigation on the screen. Would appreciate any help.
const Navigation = () => {
return (
<NavigationContainer>
<Text>Navigation</Text>
</NavigationContainer>
);
};

Answer 1

import { StyleSheet, Text, View } from 'react-native';
import Navigation from './Navigation';
export default function App() {
return (
<View style={styles.container}>
< Navigation />
</View>
);
}
const styles = StyleSheet.create({
container:{
flex:1,
}
});
YOUR CODE IN APP.JS SHOULD LOOK LIKE THIS IF YOU ARE IMPORTING NAVIGATION FROM SOME FILE.