react-navigation / rfcs

RFCs for changes to React Navigation
Other
88 stars 16 forks source link

Custom Navigators #39

Closed by-theo closed 6 years ago

by-theo commented 6 years ago

Using v2.0.0 rc2 I created a "createStackNavigator" implementation for react-native-web as well as a dual pane navigator, based on TabRouter seen below

screen shot 2018-04-11 at 12 55 06 pm

This is from the feature request at https://react-navigation.canny.io/feature-requests/p/tablet-dual-pane-support

My intent is to improve these implementations and create a PR when they're ready. Would the team be open to these and other custom navigators?

brentvatne commented 6 years ago

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 commented 6 years ago

@brentvatne awesome! I like the directory idea

jpstrikesback commented 6 years ago

@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.

by-theo commented 6 years ago

@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!

jpstrikesback commented 6 years ago

@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 commented 6 years ago

@jpstrikesback interesting, it seems plausible. Shoot me an email at theotaylor@taylord.tech, let's discuss how we can proceed.

jpstrikesback commented 6 years ago

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.

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 commented 6 years ago

Hey @jpstrikesback, I'll definitely check them out

by-theo commented 6 years ago

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

brentvatne commented 6 years ago

cool stuff @theo-taylor!

donni106 commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

@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
      })
    ]
  });
}}