RRN future - Githubissues

Hi everyone!

It’s been a very long time since I’ve been active on this repo. I’ve been really (really really) busy this whole year. I offer my humblest apologies for the unanswered issues and all your great PRs that have not been reviewed yet. But everything will be back to normal really soon, I promise.

I take this opportunity to share with you my thoughts about the future of the library, and especially the long-awaited v2. I don't want to give you any ETA yet, but be ready to get your hands on the alpha rather sooner than later! As a matter of fact, this matches with some technical needs inside my company, so you can expect a sustained development over the next few months.

Initially, this library wasn't meant to bring anything completely groundbreaking. It only allows you to combine the best of react-router@v4 - that offers an incredible API - with react-navigation, another library which offers lots of components for mobile app navigation.

One of the major problems of react-router-navigation is that it was initially developed as an experiment and I decided to publish it without thinking that it could exceed these 200 stars. So: my deepest apologises for never really taking the time to think about the evolution of this library. But this should end now. The upcoming v2 should allow a more user-friendly usage and cover a wider range of applications, without changing its API.

The main points of this new version are:

Documentation. Recurring questions have been asked about simple use cases of this library. I'm looking for some charitable souls to make up for this lack. A well-documented project is important to create a strong community and develop a library that is always accessible. Hit me up if you’re interested! 🙂
I also want to set up more tests to improve stability and robustness and isolate the different modules, including the library logic. This would ensure that any update of react-native or react-navigation would not endanger the proper functioning of the library. It should doable through simple unit tests with Jest, and E2E tests with Detox.
Add a <Modal /> component and a <Drawer /> component.
I also want to implement native navigation with react-native-navigation. This feature is part of an internal need at my company, that I would like to share with many people as possible. If some of you are interested, chime in! We have some great things to do together.

A stable v1 should be available in a few months. There are still a few issues to fix and updates of react-native, flow and react-navigation to operate.

I now give you the stage so that you can tell me your desires for this v2, just to be sure I haven't forget anything. I'm also interested in knowing how you use the library on a daily basis. Do you use it on iOS? Android? In production? In which company ? This will allow me to better understand how you use this library in order to guide its development towards the best possible path.

Stay tuned! 😊

Thanks for the update and great news!

Im using it with iOS and planning on Android too. Second I would like to see the option to customize the transitions between screens (direction of the new screen entering, like bottom), but maybe <Modal /> and a <Drawer /> will do what Im trying to archive.

Keep up the good work 👍

@LeoLeBras here are my 2 cents.

I am really curious about the future of this package, from architecture point of view react-router is the best implementation of routing system out there for any current application design for the web and mobile (still a little hard to use it on desktop where you have multiple windows, but anyway it doesn't matter). So I really love the idea of pushing for such of architecture in React Native, specially after frustrating interactions with react-navigation.

React-Navigation

I would like to know if you could remove react-navigation from the package or at least extract the pieces that you really need.

Here is why

As you can see react-navigation could become the biggest issue for the project.

Now, I don't have that much knowledge of react-native ecosystem so help me to help you out 😄

The set of components that react-navigation give you shouldn't be hard to extract from it and with react-router probably many of them should be easier to implement

Help me here, what is the list of UI (looking) components you would need from react-navigation so I can help you?

Architecture

Something I dont like from react-navigation is that everything is a blackbox that nobody understand how it works but it does work for basic thing.

I would love to see more composition over configuration on this package, at the end of the day adding an extra 3 lines of code with more nested components shouldn't be an issue and for those that would complain we can create some tutorial in how to create a wrapper component with the boilerplate code that they would love to remove (by making them code, until definitely is something nicer to have extra no forced by default).

Good packages allow you to do everything you want. They don't try to do everything for you instead is better to create something that allow you to do anything up to some point. This is somehow related to composition over configuration.

From my ignorance, I would love to know what do you have in mind and how the future of the package will be in terms of API design and do some whiteboard and architecture before you start coding so you can capture most of the details. I suggest to expend more time reading comments on react-navigation so you can have an idea of what people are facing, read about how I do this? or this doesn't will help you to understand what you should be doing it 😄

Anyway,

getting longer and I would prefer to break it here and have more interactions with you, I definitely want to see this package to succeeded so I am really worry about how you will tackle the implementation.

P.S: I have free time for help in the development if you take the time for help me out to fully understand the react-native navigations details, like the set of components that react-native programmers will normally expect and what they should do, this is my first time facing mobile application so I am not use to.

@LeoLeBras any updates on the roadmap?

@yordis Thank you for your feedback, I'll answer you soon. 😃

@yordis

First of all, thank you for taking the time to express your feelings about react-router-navigation. 😎

Please excuse the delay in replying.

I am really curious about the future of this package, from architecture point of view react-router is the best implementation of routing system out there for any current application design for the web and mobile (still a little hard to use it on desktop where you have multiple windows, but anyway it doesn't matter). So I really love the idea of pushing for such of architecture in React Native, specially after frustrating interactions with react-navigation.

I faced the same frustration ! That's why I create this package. 😊

I would like to know if you could remove react-navigation from the package or at least extract the pieces that you really need. [...] As you can see react-navigation could become the biggest issue for the project.

I'm well aware of all problems of react-navigation. To create <DefaultRenderer />, I took a long time to understand how it works. I then realised that this library is broken by design and have major performance issues. Unfortunately, react-navigation seems to be the most "viable" solution today for managing navigation in RN app.

Now, I don't have that much knowledge of react-native ecosystem so help me to help you out 😄 The set of components that react-navigation give you shouldn't be hard to extract from it and with react-router probably many of them should be easier to implement Help me here, what is the list of UI (looking) components you would need from react-navigation so I can help you?

I don't think extracting components from react-navigationis the solution. It would be too difficult to manage in the long run given the limited time available to me. More than that, I want to see react-router-navigation as a interface between react-router@v4 and all navigation solutions for RN. That's not the role of react-router-navigation to create some transitioner components. 😃

Something I dont like from react-navigation is that everything is a blackbox that nobody understand how it works but it does work for basic thing. I would love to see more composition over configuration on this package, at the end of the day adding an extra 3 lines of code with more nested components shouldn't be an issue and for those that would complain we can create some tutorial in how to create a wrapper component with the boilerplate code that they would love to remove (by making them code, until definitely is something nicer to have extra no forced by default).

I fully agree with you on this point.

Good packages allow you to do everything you want. They don't try to do everything for you instead is better to create something that allow you to do anything up to some point. This is somehow related to composition over configuration.

I divided the library into small isolated components. I need to work more in the "Composition over Configuration" direction in the future to have a perfectly flexible API.

To create custom tabs, you can do the following :

import { Tabs } from 'react-router-navigation'
import { TabBar, TabViewPagerScroll } from 'react-native-tab-view'

const CustomTabs = (props) => {
  return (
    <Tabs
      {...props}
      renderTabBar={TabBar}
      renderPager={TabViewPagerScroll}
    />
  )
}

This is composition but it's still far too limited. 😦

From my ignorance, I would love to know what do you have in mind and how the future of the package will be in terms of API design and do some whiteboard and architecture before you start coding so you can capture most of the details. I suggest to expend more time reading comments on react-navigation so you can have an idea of what people are facing, read about how I do this? or this doesn't will help you to understand what you should be doing it 😄

I don't think the current API needs to evolve much. It is directly inspired by react-router@v4 and must remain simple. But I have to create new components to improve library flexibility. The next step will be to refactor the react-router-navigation-core package to have a clean code. Then, the following step will be to create concrete case examples and test them with Detox. To create these examples, you can be of great help to understand what people expect !

getting longer and I would prefer to break it here and have more interactions with you, I definitely want to see this package to succeeded so I am really worry about how you will tackle the implementation.

In the coming months, I will integrate support to react-native-navigation@v2. This will allow you to have a real native application behavior and performance. This will bring its share of constraints that I will try to solve with the refactoring of the package react-router-navigation-core. Don't worry, I won't stay on a single dependency to react-navigation !

P.S: I have free time for help in the development if you take the time for help me out to fully understand the react-native navigations details, like the set of components that react-native programmers will normally expect and what they should do, this is my first time facing mobile application so I am not use too.

I hope to see you contribute to this library ! I don't have a lot of time a week to do open source so having someone to help would be great! It would be a pleasure to help you understand the RN navigations details ! RN programmers expect 2 main components, the first one to manage tabs (<Tabs />), the second one to manage a stack of cards (<Navigation />). It sounds simple at first sight but everyone has specific configuration needs.

Any updates on the roadmap?

In short term, this is the roadmap: https://github.com/LeoLeBras/react-router-navigation/issues/56 . I am currently working with @CharlesMangwa who uses the react-router-navigation on a production application. He has complex navigation cases that I am resolving for a v1@stable!

winoteam / react-router-navigation

RRN future #54

React-Navigation

Architecture