React-native-navigation: [V2] Styling the side menu

Created on 14 Jan 2019  路  7Comments  路  Source: wix/react-native-navigation

Issue Description

How does one change the styles of the sideMenu (get rid of the default shadow)? I suppose V2 does not support the various drawer types provided by V1. I waited years for those drawer options. I can't believe switching from V1 to V2 means I have to give up those extra cool drawers. I would be a huge setback if I have to settle with this basic shadowed sideMenu.

Steps to Reproduce / Code Snippets / Screenshots

No steps necessary


Environment

  • React Native Navigation version: V2
  • React Native version: Latest
  • Platform(s) (iOS, Android, or both?): iOS
  • Device info (Simulator/Device? OS version? Debug/Release?): Simulator

Most helpful comment

Hey,

Everyone having trouble with drawers...

I've built a drawer solution for iOS and Android using a HOC and extending the RNN API with two custom methods.

https://github.com/lukebrandonfarrell/react-native-navigation-drawer-extension

All 7 comments

Hey @smooJitter
as the SideMenu isn't an officially endorsed pattern by Apple, UiKit actually doesn't include a drawer controller. V1 brought with it not one, but two open source drawer libraries.
In v2, we decided to keep it simple and stick with the basic one.

We're not planning on supporting another drawer implementation as it literally means supporting another native controller, thought if someone from the community would like to take ownership of this feature then they're welcome to it.

@guyca but how does one style it? Are you saying we won't have control over the shadow?

@guyca I hate to hijack this closed issue, but this is actually the reason for me not moving to rnn2 also. I agree that supporting native side menus natively iOS is a bad idea, especially via the old rrn1 method of maintaining 2 of them. However, the unfortunate reality is that pretty much most client projects I've worked on want a side menu in some shape or form.

Would it be possible in rnn2 to implement a custom view that can render above the navbar? This would allow for the implementation of side menus on React side rather than native. Not sure whether overlay accomplishes this?

@smooJitter I meant to say that this is what's currently available and we have no plans or intentions to develop additional features. That being said, PR's are always welcome.

@kyle-ssg Back when we worked on the Overlay feature, we implemented a sliding drawer which worked very good. We used react-native-interactable which isn't maintained anymore. I think react-native-gesture-handler is more suited for this now.

Hey,

Everyone having trouble with drawers...

I've built a drawer solution for iOS and Android using a HOC and extending the RNN API with two custom methods.

https://github.com/lukebrandonfarrell/react-native-navigation-drawer-extension

@lukebrandonfarrell awesome will have to try this out. I was actually wondering how the pan responders would work to open the drawer, the SideMenuView you made seems like a neat approach, Im guessing the initial pan creating the overlay doesn鈥檛 have any significant delay

@kyle-ssg on our production app it does not have a delay, although it could be a problem on older phones, it could use some more testing...

The approach uses listeners to communicate with the drawer which is currently opened to trigger an animation. The drawer when opened via PAN starts at 0 and waits for interaction.

Was this page helpful?
0 / 5 - 0 ratings