React-native-navigation: [v2] SideMenu is overflowing Safe Area

[diegolmello]

Issue Description

Hey, guys.
First of all: you are doing a great work here.
We all appreciate your effort.

I'm developing a Sidemenu and it's Safe Area doesn't seem to work properly.
I tried a lot of margin and RN's SafeAreaView without any luck :(
It start on the top (behind the DeviceStatusBar) and if I swipe a little bit it shows the View correctly.

Steps to Reproduce / Code Snippets / Screenshots

If you need a sample I can write one, but I think the gif does the job, right?

Thanks for your help.

---

Environment

• React Native Navigation version: 2.0.2362
• React Native version: 0.55.4
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): iOS Simulator iPhone X 11.4 on debug

[yogevbd]

Fixed. thanks!

[diegolmello]

@yogevbd Just confirming that it's working. Thank you! :)

[diegolmello]

@yogevbd Can you fix it on v1 too?

I started migrating from react-navigation to react-native-navigation v2, but it's very unstable on Android unfortunately.
So I switch to v1. Still have some issues, but it's more stable.

[fantasywind]

Sill overflow on 2.1.3, if sideMenu has tabbed bar in center view like:

{
    root: {
      sideMenu: {
        options: {
          sideMenu: {
            left: {
              width: 215,
            },
          },
        },
        left: {
          component: {
            id: 'Sidebar',
            name: 'Sidebar',
          },
        },
        center: {
          bottomTabs: {
            options: {
              bottomTabs: {
                titleDisplayMode: 'alwaysShow',
              },
            },
            children: [{
              stack: {
                children: [{
                  component: {
                    id: 'Home.Index',
                    name: 'Home.Index',
                    options: {
                      topBar,
                      bottomTab: {
                        icon: tabHome,
                        text: 'Home',
                      },
                    },
                  },
                }],
              },
            }, {
// ....
            }],
          },
        },
      },
    },
}

[nbolender]

Seeing this again in 2.7.1

[avario]

I'm was seeing this in 2.8.0 with a tab bar in the center view. I found setting the animationType option to any value fixed the issue for me:

options: {
    sideMenu: {
        animationType: 'parallax'
    }
}

For more information about these options, see the docs here.

[MomenYasser]

Guys i'm still facing it in 3.2.0 ! :D

[kabus202]

still existing on 4.0.3 @diegolmello did you find a solution?

[doneitas]

Hey guys, I am still facing it on 6.4.0 after setting sidemenu width