Issues with navigation between screens with expo react native

I am building a reac native expo application and i want to navigate to another page after successfully login. So i followed the documentation for expo and installed the following packages: @react-native-community/masked-view, @react-navigation/native, @react-navigation/native-stack, @react-navigation/stack, react-native-gesture-handler, react-native-gesture-handler, react-native-screens. Then i created a component to handle this navigation.

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginScreen from '../screens/LoginScreen';

const Stack = createNativeStackNavigator();

const RootStack = () => {
  <NavigationContainer>
    <Stack.Navigator initialRouteName='LoginScreen'>
      <Stack.Screen name="LoginScreen" component={LoginScreen} />
    </Stack.Navigator>
  </NavigationContainer>
}
export default RootStack;

And on my App.js file i put this:

import RootStack from './app/navigators/RootStack';

export default function App() {
  return <RootStack />;
}

When i run the expo app on the android device i see no errors or warnings, but app wont load.

Can someone please help me with this?

Thanks in advance.

Certainly, here's the text with improved grammar:

Please check your 'RootStack' component. It does not return anything.

You can either try this:

const RootStack = () => (
  <NavigationContainer>
    <Stack.Navigator initialRouteName='LoginScreen'>
      <Stack.Screen name="LoginScreen" component={LoginScreen} />
    </Stack.Navigator>
  </NavigationContainer>
)

Or:

const RootStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName='LoginScreen'>
        <Stack.Screen name="LoginScreen" component={LoginScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}