'ReactNavigationStack Header Style is not working only he change the header background Color
if anyone tries this so please help me, I am trying to change the border colour top and bottom in the header in react-native stack navigation , Anyone tries this please help me to sort this problem This is the Code in which we use the header style to change the header border and width <Stack.Navigator
>
{state.token == null ? (
<Stack.Screen
name="Home"
component={LoginScreen}
options={{ headerShown: false }}
/>
) : (
<Stack.Screen
name="Dull"
component={Tabs}
options={{
// headerStyle: styles.header,
headerShown: false,
title: "Clubs",
headerTintColor: "#B49C72",
headerTitleAlign: "center",
headerTitleStyle: { color: "#B49C72" },
headerStyle: {
backgroundColor: "#080402",
},
}}
/>
)}
<Stack.Screen
name="Forget"
component={ForgetPassword}
options={{
// headerStyle: styles.header,
title: "Forget Password",
headerTintColor: "#B49C72",
headerTitleAlign: "center",
headerTitleStyle: { color: "#B49C72" },
headerStyle: { backgroundColor: "#080402" },
}}
/>
<Stack.Screen
name="Profiles"
component={ProfileScreen}
options={{
// headerStyle: styles.header,
title: "Profile",
headerTintColor: "#B49C72",
headerTitleAlign: "center",
headerTitleStyle: { color: "#B49C72" },
headerStyle: { backgroundColor: "#080402" },
}}
/>
<Stack.Screen
name="Tabs"
component={Tabs}
options={{
// headerStyle: styles.header,
title: "Password Reset",
headerTintColor: "#B49C72",
headerTitleAlign: "center",
headerTitleStyle: { color: "#B49C72" },
headerStyle: { backgroundColor: "#080402" },
}}
/>
<Stack.Screen
name="Du"
component={Home}
options={({ route, navigation }) => ({
title: route.params.itemname,
headerTintColor: "#B49C72",
headerTitleAlign: "center",
headerTitleStyle: { color: "#B49C72" },
headerStyle: {
backgroundColor: "#080402",
},
headerRight: () => <Header />,
})}
/>
{/* <Stack.Screen
name="Dull"
component={Tabs}
options={{
// headerStyle: styles.header,
title: "Clubs",
headerTintColor: "#B49C72",
headerTitleAlign: "center",
headerTitleStyle: { color: "#B49C72" },
headerStyle: { backgroundColor: "#080402" },
}}
/> */}
<Stack.Screen
name="Dum"
component={Dummy}
options={({ route }) => ({
title: route.params.productTitle,
headerTintColor: "#B49C72",
headerTitleAlign: "center",
headerTitleStyle: { color: "#B49C72" },
headerStyle: {
backgroundColor: "#080402",
borderBottomColor: "#85106a",
borderBottomWidth: 5,
borderTopWidth: 5,
borderTopColor: "#85106a",
},
})}
/>
<Stack.Screen
name="Venue"
component={Book}
options={({ route }) => ({
title: "Book Venue",
headerTintColor: "#B49C72",
headerTitleAlign: "center",
headerTitleStyle: { color: "#B49C72" },
headerStyle: {
backgroundColor: "#080402",
elevation: 0, // remove shadow on Android
shadowOpacity: 0, // remove shadow on iOS
borderColor: "#B49C72",
borderBottomWidth: 2,
borderBottomColor: "red",
borderTopWidth: 2,
borderTopColor: "red",
},
})}
/>
<Stack.Screen
name="Queues"
component={Queue}
options={({ route }) => ({
title: "Queue Jump",
borderBottomWidth: 0,
headerTintColor: "#B49C72",
headerTitleAlign: "center",
headerTitleStyle: { color: "#B49C72" },
headerStyle: {
backgroundColor: "#080402",
},
})}
/>
<Stack.Screen
name="Forgets"
component={Formessage}
options={({ route }) => ({
title: "Forget Password",
headerTintColor: "#B49C72",
headerTitleAlign: "center",
headerTitleStyle: { color: "#B49C72" },
headerStyle: { backgroundColor: "#080402" },
})}
/>
<Stack.Screen
name="Resets"
component={Resetmessage}
options={({ route }) => ({
title: "Reset Password",
headerTintColor: "#B49C72",
headerTitleAlign: "center",
headerTitleStyle: { color: "#B49C72" },
headerStyle: {
backgroundColor: "#080402",
},
})}
/>
<Stack.Screen
name="Res"
component={ResetPassword}
options={({ route }) => ({
title: "Reset Password",
headerTintColor: "#B49C72",
headerTitleAlign: "center",
headerTitleStyle: { color: "#B49C72" },
headerStyle: {
backgroundColor: "#080402",
},
})}
/>
<Stack.Screen
name="Map"
component={Map}
options={({ route }) => ({
title: "Queue Jump",
headerTintColor: "#B49C72",
headerTitleAlign: "center",
headerTitleStyle: { color: "#B49C72" },
headerStyle: {
backgroundColor: "#080402",
borderBottomColor: "#B49C72",
borderBottomWidth: 1,
borderTopWidth: 1,
borderTopColor: "#B49C72",
},
})}
/>
<Stack.Screen
name="Ver"
component={Verfied}
options={({ route }) => ({
title: "Queue Jump",
headerTintColor: "#B49C72",
headerTitleAlign: "center",
headerTitleStyle: { color: "#B49C72" },
headerStyle: {
backgroundColor: "#080402",
borderBottomColor: "#B49C72",
borderBottomWidth: 1,
borderTopWidth: 1,
borderTopColor: "#B49C72",
},
})}
/>
<Stack.Screen
name="Un"
component={Unverified}
options={({ route }) => ({
title: "Queue Jump",
headerTintColor: "#B49C72",
headerTitleAlign: "center",
headerTitleStyle: { color: "#B49C72" },
headerStyle: {
backgroundColor: "#080402",
borderBottomColor: "#B49C72",
borderBottomWidth: 1,
borderTopWidth: 1,
borderTopColor: "#B49C72",
},
})}
/>
</Stack.Navigator>
</NavigationContainer>
);
Solution 1:[1]
I think this docs page provide what you want. https://reactnavigation.org/docs/stack-navigator/#header-related-options
And here is an example of setting border colour black with width of 2.
<Stack.Navigator screenOptions={{headerStyle: {borderColor: '#000', borderWidth: 2} }}>
{screens}
</Stack.Navigator>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Tadej Slemenšek |