React Native <NavigationContainer> not styling - react-native

Question

Building a Signal clone and trying to have my to be styled from my StyleSheet. Here is the code
import "react-native-gesture-handler";
import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { NavigationContainer } from "#react-navigation/native";
import LoginScreen from "./screens/LoginScreen";
import { createStackNavigator } from "#react-navigation/stack";
import RegisterScreen from "./screens/RegisterScreen";
const Stack = createStackNavigator();
const globalScreenOptions = {
headerStyle: { backgroundColor: "#2C6BED" },
headerTitleStyle: { color: "white" },
headerTintColor: "white",
};
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={globalScreenOptions}>
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Register" component={RegisterScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
I have tried to put everything in a tag to get it to be affected by the StyleSheet, but that won't work either. I'm unable to find any other similar posts to this question

Answer 1

To use the styles created by StyleSheet.create, you need to actually use them in an element. For example (from the stylesheet docs):
import React from "react";
import { StyleSheet, Text, View } from "react-native";
const App = () => (
<View style={styles.container}> {/* <-- note style attribute */}
<Text style={styles.title}>React Native</Text>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
backgroundColor: "#eaeaea"
},
title: {
marginTop: 16,
paddingVertical: 8,
textAlign: "center",
}
});
export default App;