Custom Navigators about rfcs

[jpstrikesback]

Hey @Theo-Taylor we took a different route and added docking capabilities to a fork of react-native-drawer-layout that added push/displace/slide drawers (added docking in another fork of that fork) and then exposed those in a fork of react-navigation's DrawerNavigator.

• Our fork of react native drawer layout
• Our fork of react navigation which uses the changes introduced above

Basically you pass a drawerType='responsive' and a breakpoint in drawerResponsiveWidth at which it will dock or go back to being a push screen drawer (like twitter mobile).

We'll eventually PR these I think, but for now it's up there if it's of interest.

[by-theo]

Very basic implementation:
https://github.com/theo-taylor/basic-react-navigation-sidebar

[by-theo]

@jpstrikesback hey awesome!

This was like a proof of concept for us and we haven't been able to do much work on it since. But if you are interested in collaborating to make a custom navigator out of it we'd be happy to work with you!

[by-theo]

@jpstrikesback interesting, it seems plausible. Shoot me an email at [email protected], let's discuss how we can proceed.

[brentvatne]

hey @Theo-Taylor! very cool stuff. we don't want to add more navigators to the core of react-navigation, we're actually going the opposite direction and plan on moving out as many as we can. but we're hoping that more folks like you build navigators to solve various use cases like this! we can have a directory for them inside of the docs

[by-theo]

@brentvatne awesome! I like the directory idea

[jpstrikesback]

@Theo-Taylor this looks awesome!

Any chance you could share your code? We're about to experiment with iPad/Desktop nav and need split-screen/panes as well.

[jpstrikesback]

@Theo-Taylor Sweet! Definitely interested! I want to be able to use navigation actions to show/hide but also change the content in side panes (dual and triple pane). And then be able to integrate that with linking for deep links and the web.

From your experience does that sound reasonable?

Cheers!
JP

[by-theo]

Hey @jpstrikesback, I'll definitely check them out

[brentvatne]

cool stuff @Theo-Taylor!

[donni106]

@Theo-Taylor did you ran into the following problem?

When I click on an item in the left navigation screen the right details screen is showing up. Everything is ok. When the right details screen is scrollable I scroll down a bit. Everything is ok.
But when I am changing now the right details screen with clicking on a new item left, the right screen stays at the same scroll position.
So an user wonders why the content is changing or even don't recognize that, because the scroll position stays the same.
I am thinking of managing some scroll to top after navigating somehow, but didn't figure out yet.
You got it?

[by-theo]

@donni106 hey, I haven't come across that issue

Can you share some more details?
Are the root views of the details screens ScrollViews?
Or are they wrapped in a normal View?

[donni106]

@Theo-Taylor I managed to fix it for my case with a work around.
The right details screen is a ScrollView wrapped inside nested Views.

A simple prototype:

<View>
  <View navigation={navigation} /> // <-- left sidebar
  <View>
    <ScrollView navigation={descriptor.navigation} /> // <-- right details screen
  </View>
</View>

Somehow the real navigation is not done, only contents were changed.
When a user clicked somewhere left while scrolled down right, the right screen scroll position was kept.

I am navigating with:

return navigation.navigate({
  routeName: navigateTo,
  key: `${navigateTo.toLowerCase()}-${item.id}`,
  action: NavigationActions.navigate({
    routeName: navigateToAction,
    params: navigateItem
  });
}}

Now a hard stack reset with navigation is done to properly reset the right screen:

return navigation.navigate({
  routeName: navigateTo,
  key: `${navigateTo.toLowerCase()}-${item.id}`,
  action: StackActions.reset({
    index: 0,
    actions: [
      NavigationActions.navigate({
        routeName: navigateToAction,
        params: navigateItem
      })
    ]
  });
}}