React-native-navigation: [v2] Incorrect drawBehind behaviour while merging bottom tabs options

[devey]

Issue Description

I would like to hide the bottomTabs when keyboard shows on Android (cause otherwise they appear on top of the keyboard) and show them again when keyboard hides. The solutions seems to be toggling bottomTabs.visible but it seems like the tabs disappear but a white container stays there. Setting bottomTabs.drawBehind: true with setDefaultOptions fixes it but I'd like to toggle drawBehind like in the code below and this doesn't work. Looks like drawBehind is not taken into account in mergeOptions.

Steps to Reproduce / Code Snippets / Screenshots

  Navigation.setDefaultOptions({
    bottomTabs: {
      visible: true,
      animate: false,
      drawBehind: false,
    },
  });

    Keyboard.addListener(
      'keyboardDidShow',
      () =>
        Platform.OS === 'android' &&
        Navigation.mergeOptions('BottomTabsId', {
          bottomTabs: {
            visible: false,
            drawBehind: true,
          },
        })
    );
    Keyboard.addListener(
      'keyboardDidHide',
      () =>
        Platform.OS === 'android' &&
        Navigation.mergeOptions('BottomTabsId', {
          bottomTabs: {
            visible: true,
            drawBehind: false,
          },
        })
    );

---

#

Environment

• React Native Navigation version: 2.0.2544
• React Native version: 0.55.0
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): iPhone 6s 11.4.1 debug mode

[iamolegga]

Same problem

[margaridaDinis]

Same issue on:
React Native Navigation version: 2.1.3
React Native version: 0.57.0
Platform(s) (iOS, Android, or both?): Android 8.0.0
Device info (Simulator/Device? OS version? Debug/Release?): Device Galaxy S8

[stale[bot]]

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 Detox and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[narodejesus]

I can confirm that this is still an issue.. using RNN v2.5.2

drawBehind is not working when used using mergeOptions

[RobertFOConnor]

I managed to get the keyboard displaying over (in-front of) the bottom tabs by setting this in the manifest.
android:windowSoftInputMode="stateAlwaysHidden|adjustPan|adjustResize"

Important: Add this to your .MainActivity in the AndroidManifest.xml.

[margaridaDinis]

@RobertFOConnor That actually fixes this issue, thanks!
But in my case specifically, it is preventing my form to properly scroll while the keyboard was open.

~So I played around with the attributes, this is what worked for me:~
~android:windowSoftInputMode="stateAlwaysHidden"~

[RobertFOConnor]

@margaridaDinis Even better!

[lukebrandonfarrell]

This still exists when using mergeOptions to hide bottom tabs in Android. Even when using drawBehind the tab placeholder is still present.

[pie6k]

I'm still having this issue

[guyca]

The white space you're observing is background color of the stack the component was pushed into.
@pie6k Are you observing a problem on v3? In v3, togelling tabs when keyboard is visible isn't necessary since BottomTabs are drawn behind the keyboard.