React Native - Navigation navigates but does not render elements on android/ios but renders on web perfectly

For some reason I can see the elements when run on web (using Expo) and they render perfectly when I click "Run in web browser".

However when I try to do it on iOS or Android, it just shows a blank screen and only shows the LinearGradient.

When I run the Android Emulator and combine it with the React Native Dev tool, I can see the elements in the devtool but they dont show up in the emulator. The component I try to render is called Login.tsx and If i copy all the content in Login.tsx to my App.tsx it renders perfectly on Web, Android and iOS.

What am I doing wrong?

const Stack = createNativeStackNavigator();


const Navigation: React.FC = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator
                initialRouteName="Login"
            >
                <Stack.Screen
                    name="Login"
                    component={Login}
                />
                <Stack.Screen
                    name="LostPassword"
                    component={LostPassword}
                />
                <Stack.Screen
                    name="Register"
                    component={Register}
                />
            </Stack.Navigator>
        </NavigationContainer>)
}

export default Navigation;



const App: React.FC = () => {
  return (
    <LinearGradient
      colors={["#2D1C96", '#190E60']}
      style={styles.linearGradient}
    >
      <View style={styles.container}>
        <Navigation />
        <Toast ref={(ref) => Toast.setRef(ref)} />
      </View>
    </LinearGradient>
  );
}