Skip to content

topBar background component is above buttons on iOS 14 #6679

Open
@danilobuerger

Description

@danilobuerger

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
Simulator Screen Shot - iPhone 8 (12 4) - 2020-10-17 at 15 06 30 Simulator Screen Shot - iPhone 8 - 2020-10-17 at 15 04 41

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 @ d9df9b5
  • React Native version: 0.63.2
  • Platform(s) (iOS, Android, or both?): iOS
  • Device info (Simulator/Device? OS version? Debug/Release?): 14.0

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions