I created a stack with the following code and I'm not getting background on one of the stack screen.
<Stack.Navigator><Stack.Screen name={"Welcome"} options={{ title: 'Welcome', cardStyle: { backgroundColor: '#172f35' }, headerStyle: { backgroundColor: '#357180', }, headerTitleStyle: { color: '#fff', }, }} component={Welcome} /><Stack.Screen name={"Login"} options={{ title: "Login Here", cardStyle: { backgroundColor: '#172f35' }, headerStyle: { backgroundColor: '#357180', }, headerTitleStyle: { color: '#fff', }, }} component={Login} /><Stack.Screen name={"Register"} options={{ title: "Register", cardStyle: { backgroundColor: '#172f35' }, headerStyle: { backgroundColor: '#357180', }, headerTitleStyle: { color: '#fff', }, }} component={Register} /></Stack.Navigator>
In the 3rd screen Register, I'm still getting white background with black text.
Here's my Register component.
type RegisterStackNavigationProps = StackNavigationProp<StackParamList, 'Register'>type RegisterProps = { navigation: RegisterStackNavigationProps}const Register: FC<RegisterProps> = () => { return (<View style={styles.container}><Text>Register Now.</Text></View> );}const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', },});export default Register;
I'm thinking if there is any issue with expo, since The hot reload has been not working often
Also I would like to know of there is a better way to do.
- Styling the stack background globally
- Typescript implementation for these components along with navigation