react-native-screens
react-native-screens copied to clipboard
Content in header doesn't overlap on Android header bar
Description
I wan't to position an image in stack header that overlap between header & screen. I have created a custom headerTitle with an absolute position to do that. But when using createNativeStackNavigator (native-stack package), the content in the header bar doesn't overlap on screen on Android only.
But it's work createStackNavigator (so without react-native-screens) on Android !
Screenshots
Android | iOS |
---|---|
![]() |
![]() |
Steps To Reproduce
- run expo in Android
- look at icon in header. It's truncated at the half.
Expected behavior
Should have the same behaviour between Android & iOS (content should overlap between screen & header). Maybe add a props to allow customizing header style on native stack (here I need an marginBottom I think).
Actual behavior
Content doesn't overlap on Android but works on iOS.
Reproduction
https://snack.expo.dev/w25T68snK
Platform
- [X] Android
- [ ] iOS
- [ ] Web
- [ ] Windows
- [ ] MacOS
Workflow
- [ ] Managed workflow
- [x] Bare workflow
Package versions
package | version |
---|---|
@react-navigation/native | 6.0.10 |
@react-navigation/native-stack | 6.6.1 |
react-native-safe-area-context | 4.2.4 |
react-native-screens | 3.13.1 |
react-native-gesture-handler | 1.10.3 |
react-native-reanimated | 1.13.1 |
react-native | 0.68.1 |
Related issue: https://github.com/react-navigation/react-navigation/issues/10541
Is there any update about this issue? I have the same problem with my app.