React-native-navigation: [v6][ios] White topBar background on navigating back

[deanhet]

Issue Description

I've just updated our app to use the latest React-Native Navigation. I now seem to be getting a new issue on iOS where if I navigate backwards in the app, the header blanks to a white background.

I've had a look through the changelog and there's nothing I can spot that would make this new behaviour.

Is there an option I'm missing or is this a bug?

Current defaultOptions:

  Navigation.setDefaultOptions({
    layout:                {
      orientation:              ['portrait'],
      backgroundColor:          Colors.background,
      componentBackgroundColor: Colors.background
    },

    modalPresentationStyle: 'pageSheet',

    bottomTabs: {
      titleDisplayMode: 'alwaysShow',
      backgroundColor:  '#1C2432',
      hideShadow:       false,
      elevation:        15
    },

    bottomTab: {
      textColor:         '#4b747c',
      selectedTextColor: Colors.accentBright,
      fontSize:          8,
      fontFamily:        'Nunito-Regular'
    },

    topBar: {
      title:      {
        fontFamily: 'Nunito-Bold',
        fontSize:   18,
        color:      '#fff'
      },
      backButton: {
        icon:      require('../assets/images/arrowBack.png'),
        color:     '#fff',
        showTitle: false
      },
      buttonColor: {
        color: '#fff'
      },
      background: {
        color: Colors.background
      }
    },

    statusBar: {
      backgroundColor: Colors.background2,
      style:           'light'
    }

---

Environment

• React Native Navigation version: 6.3.0
• React Native version: 0.61.5
• Platform(s) (iOS, Android, or both?): ios
• Device info (Simulator/Device? OS version? Debug/Release?): iPhone X, 13.3, Debug

[yogevbd]

Couldn't reproduce it on the playground app. Can you please reproduce it there?

[geroale]

Same issue here. I am using only defaultOptions too.

The first step I do is creating the theme with defaultOptions:

Navigation.setDefaultOptions({
  layout: {
      backgroundColor: theme.colors.background,
      componentBackgroundColor: theme.colors.background,
    },
    topBar: {
      borderColor: "transparent",
      title: {
        color: theme.colors.text,
        alignment: 'center'
      },
      background: {
        color: theme.colors.background
      }
   }
})

My navigation structure (included all the options) is the following:
As you can see, I am hiding the topBar directly in the stack.

bottomTabs: {
  children: [{
    stack: {
      children: [ HomeScreen ],
      options: {
        bottomTab: {
          text: I18n.t("home"),
          icon: getStaticIcon("home"),
        },
        topBar: {
          visible: false
        }
      }
    }
  }]
}

And the HomeScreen, still without topBar, is the following:

component: {
  name: "HomeScreen"
}

The problem happens when a new screen (with topBar visible, such as the following) is pushed into the stack

component: {
  name: "SettingsScreen",
  options: {
    topBar: {
      visible: true,
      title: {
        text: I18n.t('profile')
      }
    }
  }
}

When this new screen is pushed, the topBar become visible for the first time with the right background (and everything is fine so far), but when I go back (or swipe) on iOS, the topBar became gradually transparent, showing the color behind the screen (which is not the same as the defaultOptions, I don't know why)
I already tried moving the backgroundColor and componentBackgroundColor everywhere but nothing seems to work.

[deanhet]

Thanks for taking a look! I'll take a look at reproducing this in the playground at some point during this week. 👍🏻

[yogevbd]

Managed to reproduce it on a pure native iOS app. It looks like this is a bug on iOS 13 and not in rnn itself. Though I'm not sure it's the same case so a reproduction in the playground app will still be helpful.
https://stackoverflow.com/questions/60799209/white-flash-when-popping-using-pop-gesture-on-ios-13

I will file a bug report on the issue I found with Apple.

[yogevbd]

Managed to reproduce it in the playground app and it's a different issue than the one I described above.
When current screen in stack hides the topBar and the next screen present the topBar, there's a need to set topBar.animate: true in the options of the screen that hides the topBar.

static options() {
  return {
    topBar: {
      visible: false,
      animate: true
    }
  };
}

[geroale]

@yogevbd Thank you for the quick response. Unfortunately, this solution doesn't work in my case, probably because I'm not hiding the topBar from the screen's options but the stack's options. I tried to put the animate property everywhere (in the stack + each screen option) but it's not working. Also, I would like to confirm that this problem came with v6 and the v5 was working fine, as reported in the title. (I am using that in production now)

[deanhet]

Unfortunately, can confirm much as the same above, setting animate didn't really solve anything.

[yogevbd]

@geroale your example helped me to reproduce it in the playground app, fixed in this PR: #6069, but still it doesn't seem to be the exact same issue this ticket is about.

[VEnom42]

I had the same issue. Setting animate: true on both screens fixed it. But on iOS 12.4 still get white background. With background color on hidden topbar it works good on all iOS versions:

static options() {
  return {
    topBar: {
      visible: false,
      animate: true
      background: {
        color: topBarDefaultColor,
      },
    }
  };
}

My rnn version is 6.9.1.