Overlay navigation doesn't wrap my react-native-drawer anymore

[raynor85]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta.22
• react-native v0.49.3

Expected behaviour

The overlay should wrap a custom component (in my case, the react-native-drawer). It was the case after upgrading from react-native-router-flux v4.0.0-beta.17. I noticed that in react-native-router-flux v4.0.0-beta.18 src/OverlayNavigator.js has been deleted, so I suppose this is the reason why it is no longer working. Here is the snippet of my code:

<Scene key="main" overlay contentComponent={Main} type="reset"> <Scene key="mainNav" hideNavBar={true}> ...

Actual behaviour

The component wrapped inside overlay doesn't appear.

[aksonov]

OverlayNavigator was added again, please fork & modify this repo's Example to demonstrate issue.

[raynor85]

It's true that overlayComponent has been added, but for some reason the implementation I was using in react-native-router-flux v4.0.0-beta.17 no longer works in react-native-router-flux v4.0.0-beta.22.

[raynor85]

After some digging I realised that the following code:

<Scene key="main" overlay contentComponent={Main} type="reset">

v4.0.0-beta.17:
the Main component is rendered and has access to the children property

v4.0.0-beta.22:
the Main component is not rendered

After checking the Example.js, I tried to change the code with the following:

<Scene key="main" overlay component={Main} type="reset">

The Main component is rendered, but this time children is undefined. I need the children prop inside the Main component. How can I achieve that in v4.0.0-beta.22?

[raynor85]

After looking at the code, I realised that OverlayNavigator no longer accept contentComponent as parameter, as it used to be in version v4.0.0-beta.17. My pull request restores that, so you can call overlay with contentComponent as it used to be.

[foyarash]

@raynor85 how did you manage to open / close the drawer?

[raynor85]

Yes. It has been merged onto master too.

…

On Wed, 8 Nov 2017 at 16:16, foyarash ***@***.***> wrote: @raynor85 <https://github.com/raynor85> how did you manage to open / close the drawer? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2496 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFjD9YzH3WtAbSe5JHQvDI8Caz-q7zxOks5s0dP6gaJpZM4P2YRR> .

[foyarash]

Yeah i saw your PR has been merged, but my question was about how did you managed to make the drawer opening from the navbar?

[raynor85]

@foyarash it is worth nothing that if you need a simple drawer, you should rely on the Drawer available within the library (see https://github.com/aksonov/react-native-router-flux/blob/master/Example/Example.js#L127). What I did was integrating https://github.com/root-two/react-native-drawer with this library. If you are sure you need this, because you need extra customisation, keep reading.
To make it work, I did something like this:

main.js

<Router>
  <Scene key="root" hideNavBar={true}>
    <Scene key="main" overlay contentComponent={Drawer} type="reset">
      <Scene key="mainNav" hideNavBar={true}>
        <Scene key="projects" component={Projects} type="replace" initial="true" />
        <Scene key="allReferences" component={AllReferences} panHandlers={null} />
      </Scene>
    </Scene>
  </Scene>
</Router>

The Drawer component contains the implementation of https://github.com/root-two/react-native-drawer, and at the bare minimum, you should do something like that in its render function:

drawer.js

<Drawer
  type="overlay"
  onOpen={this.openDrawer}
  onClose={this.closeDrawer}
  open={isDrawerOpen}
  content={content}>
    {children}
</Drawer>;

The important thing to notice here is the presence of children prop inside the Drawer, and since in the Scene we defined projects Scene to be the initial with initial="true", that will be the first Scene to be loaded. content prop represents the content of the Drawer rendered when you open it. If you want to open the Drawer programmatically, you can toggle the variable isDrawerOpen passed to open prop within the Drawer. You will probably use redux to save and retrieve isDrawerOpen state.

[mightym]

@raynor85 This look promising! I'm currently trying to implement react-native-drawer with react-native-router-flux ... the only part I dont get is how to access {children) in my drawer. I'm using your <Scene key="main" overlay contentComponent={Drawer} type="reset"> part but it seems like there are no children or other props available in the contentComponent. Do you have a hint for me?

[raynor85]

I can access it from the Drawer component using this.props.children. I wrote children instead of the proper name because at the top level I implied having something like this:

const { children, content, isDrawerOpen } = this.props;

PS: it is worth nothing that Drawer must be your own component, not the one from 'react-native-drawer'.

[mightym]

@raynor85 yes I know. thanks for your explanation. But this.props.children is empty for me in main. Is there something special how you passed the children to main? Or should it be automatically there?

[raynor85]

@mightym It should be there honestly. Just be sure you have the right version of the plugin. Apart from that, I have no clue, it should just work.

[mightym]

@raynor85 your version was react-native-router-flux v4.0.0-beta.17 were it worked? Maybe this is the issue, I'm on v4.0.0-beta.27

[raynor85]

My changes are included, so it should work.
https://github.com/aksonov/react-native-router-flux/blob/4.0.0-beta.27/src/navigationStore.js#L544