Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

React Navigation stack screen background color not applied

$
0
0

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.

  1. Styling the stack background globally
  2. Typescript implementation for these components along with navigation

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>