topBar background component is above buttons on iOS 14
Issue Description
When setting a topBar background component, it is being rendered above the right buttons on iOS 14:
| iOS 12.4 | iOS 14.0 |
|---|---|
![]() |
![]() |
Steps to Reproduce / Code Snippets / Screenshots
See the following playground diff as an reproduction to the above screenshots:
diff --git a/playground/src/screens/LayoutsScreen.tsx b/playground/src/screens/LayoutsScreen.tsx
index 15c9e770c..5fecf3556 100644
--- a/playground/src/screens/LayoutsScreen.tsx
+++ b/playground/src/screens/LayoutsScreen.tsx
@@ -22,9 +22,25 @@ export default class LayoutsScreen extends NavigationComponent {
return {
topBar: {
testID: WELCOME_SCREEN_HEADER,
- title: {
- text: 'React Native Navigation',
+ background: {
+ component: {
+ name: Screens.ReactTitleView,
+ passProps: {
+ text: 'React Native Navigation Navigation Navigation',
+ },
+ },
},
+ rightButtons: [
+ {
+ id: 'Two',
+ component: {
+ name: Screens.RoundButton,
+ passProps: {
+ title: 'Two',
+ },
+ },
+ },
+ ],
},
layout: {
orientation: ['portrait', 'landscape'],
Environment
- React Native Navigation version: master @ d9df9b5db4ee7b209ec3f1891386d0b947178de9
- React Native version: 0.63.2
- Platform(s) (iOS, Android, or both?): iOS
- Device info (Simulator/Device? OS version? Debug/Release?): 14.0
I came across this while investigation #6652.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.
Can confirm it also happens on iOS 15. Would love to see a fix for this!
Yes, I am facing same issue.
I found this issue on https://ovio.org/projects and would love to contribute!

