One approach to align the width of the bottom shadow/border of the React Navigation header components with the width of the border-top of the bottom tabs is to use the same external wrapper component for both the header and the bottom tabs. This wrapper component can apply the necessary styles to both the header and the bottom tabs to ensure their visual alignment.
Here's an example of how this could be implemented:
<View style={styles.wrapper}>
<Header />
<BottomTabs />
</View>
const styles = StyleSheet.create({
wrapper: {
borderTopWidth: 1,
borderTopColor: '#ccc',
elevation: 8,
shadowOffset: {
width: 0,
height: -3,
},
shadowOpacity: 0.1,
shadowRadius: 5,
backgroundColor: '#fff',
},
});
const navigationOptions = {
headerStyle: {
borderBottomWidth: 0,
elevation: 0,
shadowOffset: {
width: 0,
height: 0,
},
shadowOpacity: 0,
shadowRadius: 0,
},
};
By using a common wrapper component and applying appropriate styles to it, you can ensure that the bottom shadow/border of the header matches the style of the bottom tabs.
Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss
Asked: 2023-05-21 22:19:33 +0000
Seen: 7 times
Last updated: May 21 '23
How can I utilize a view above and between bottom tabs in React Native Navigation?
How can the header label be made dynamic in react-table?
How to retrieve header and body data in Next.js using prefetch function?
How do I add a search bar to the header of my Square Space 7.1 website?
How can I use Office Script to delete all rows in Excel except for the first header row?