Revision history [back]

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:

1. Wrap both the header and the bottom tabs in a common wrapper component.

<View style={styles.wrapper}>
  <Header />
  <BottomTabs />
</View>

1. Apply styles to the wrapper component to ensure it matches the visual style of the bottom tabs.

const styles = StyleSheet.create({
  wrapper: {
    borderTopWidth: 1,
    borderTopColor: '#ccc',
    elevation: 8,
    shadowOffset: {
      width: 0,
      height: -3,
    },
    shadowOpacity: 0.1,
    shadowRadius: 5,
    backgroundColor: '#fff',
  },
});

1. Apply styles to the header to ensure it matches the visual style of the bottom tabs.

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.