React-native-windows: Support for React-navigation

[namrog84]

As of their current version https://github.com/react-navigation/react-navigation
They use some underlying nested dependencies that only work on iOS and Android. I believe its because of a nested dependency on react-native-reanimated.

This is one of the most popular navigation libraries for RN and is causing major issues for us on RNW.
I know it's not part of the RNW library, but still would appreciate any support/progress on this external dependency. As I believe this would help the greater RNW community.

See also

2033 broken react-navigation support for older RNW version (.net)

2546 request for the other popular navigation library by Wix

4044 react-navigation-stack

[chrisglein]

This is an ask for a different navigation module than the wix one. @stmoy can you dig in and figure out which one we should start supporting? We probably only have bandwidth to take on one, and can lean on the community to fill in the other... unless there's no clear winner.

[tbandrowsky]

It's actually not that hard to roll your own stack navigation as a workaround and to keep the navigation components compatible with react-navigation for when the Microsoft and Facebook cavalry arrives. I just did it and I'm by no means a great react or javascript programmer but it only took me a day.

https://www.linkedin.com/pulse/build-your-own-stacknavigatorview-react-native-vnext-todd-bandrowsky

[juhasuni]

It was fairly easy to get the React Navigation 5.x up and running with the current version of react-navigation-windows. I expect it works the same with vnext. The upcoming 5.x version has removed the react-native-reanimated dependency and the native navigation support (aka UIViewController on iOS) is also optional. We had to make some code changes, like remove StackArea* components from StackView.tsx, but it was no more than few lines of code.

[namrog84]

@juhasuni I don't see any 5.x stuff anywhere, can you link what you are referring to? Thanks!

[Veskump]

@namrog84 He is referring to https://github.com/react-navigation/navigation-ex which contains React Navigation 5.

[namrog84]

Since I feel like the RNW team is leaning towards officially backing Wix.

I present a counter point https://facebook.github.io/react-native/docs/navigation
"If you are getting started with navigation, you will probably want to use React Navigation"
I do believe that the RN team does officially recommend using react-navigation.

[jonthysell]

Does React Navigation have any more native code? Without the react-native-reanimated dependency, I'm not seeing anything in the repo that would indicate why it wouldn't work with RNW.

[jonthysell]

Ok, it looks like there's still a dependency on react-native-gesture-handler which is native.

https://software-mansion.github.io/react-native-gesture-handler/

It's got a module and multiple view managers.

[jonthysell]

@stmoy Can you add react-native-gesture-handler to the backlog? It appears very nontrivial to port.

[chrisglein]

Note from partners: react-native-reanimated (#4151) is the more important blocking dependency for this than gesture handler (#4140). Sounded like either the latter was easier to workaround or there was less usage of it, but reanimated was critical.
(@kaiguo as an FYI)

[MakhouT]

Since I feel like the RNW team is leaning towards officially backing Wix.

I present a counter point https://facebook.github.io/react-native/docs/navigation
"If you are getting started with navigation, you will probably want to use React Navigation"
I do believe that the RN team does officially recommend using react-navigation.

I don't really agree, they are also stating

If you'd like to achieve a native look and feel on both Android and iOS, or you're integrating React Native into an app that already manages navigation natively, the following library provides native navigation on both platforms: react-native-navigation.

I prefer choosing the one of Wix, as I tend to prefer performance...

[namrog84]

Had a conversation recently with my team, and apparently some unhappiness with the current react-navigation. And people are in support of trying out Wix/react-native-navigation instead of react-navigation. So feel free to deprioritize me and my team's request on this issue and just go for the wix one instead. Especially if it apparently has better performance.

But until wix/react-native-navigation properly supports windows, we will keep using existing react-navigation and push down that path.

[kaiguo]

This issue just got assigned to me... I'm currently on the route of adding Windows support for reanimated + gesture handler to unblock react-navigation, which will probably be very time consuming since they are both nontrivial to implement. Reading through the comments looks like wix/react-native-navigation would fulfill people's needs too, I think we should prioritize wix navigation so we can have a solution for navigation (hopefully sooner) @chrisglein @stmoy ?

[creambyemute]

Reanimated and rn-gesture-handler are also used by a bunch of other libraries like react-navigation (gesture-handler) or react-native-draggable-flatlist (drag&drop sort using gesture-handler + reanimated).

There for sure are even more libraries using them and more and more libraries are switching from Animated API to rn-reanimated, especially since the new V2 Api got released. Just to keep that in mind.

I hope that they'll still get implemented at some point, especially as it will allow React-Navigation to work properly and would enable a large part of the community to try out RN-Windows without having to switch the navigation-library and/or replace/delete libraries that are using reanimated or gesture-handler.

[juhasuni]

@kaiguo, in my understanding 95 % of the functionality of the react-navigation can be used without react-native-reanimated or react-native-gesture-handler. We're actually already using react-navigation with the legacy version of the react-native-windows (we're still in progress of updating to the vnext). We've simply disabled the default gesture recognition and we're not using Drawer, which is the only component in react-navigation that currently uses react-native-reanimated.

There's also a good reason to believe, that the developers of react-navigation don't want to increase the native dependencies and the reason is react-native-web.

[harinikmsft]

Just adding more info on customer asks here: several AppConsult partners have highlighted react-navigation module as an adoption blocker/must-have.

[danilloalvis]

react-navigation in version 5 has more native dependencies for Android and IOS:

react-native-gesture-handler
react-native-reanimated
react-native-screens
react-native-safe-area-context
@react-native-community/masked-view

I believe that react-native-screens the main reason for react-navigation to work, since it is already introduced in it since version 2.0

for react-native-windows to be successful, we need full support for react-navigation, as it is an essential library

[creambyemute]

@danilloalvis I agree partially.

React-Native Screens can be disabled with just a single line of code.
RN-Safe-Area-Context is imo stubbable, I'm not aware of notches on Windows Devices.

[willerpp]

Guys I'm looking to create a top menu with bottoms for this version of react-native for windows, could you recommend me what component could I use for this?

[stmoy]

Thanks for the input & feedback, y'all.

for react-native-windows to be successful, we need full support for react-navigation, as it is an essential library

Agreed, and we know we need to help get something bootstrapped ASAP. As a few folks like @kaiguo and @danilloalvis have mentioned, this module requires us to unblock a few dependencies first. The main blocker at the moment is reanimated, which Kai is looking at.

I'm looking to create a top menu with bottoms for this version of react-native for windows, could you recommend me what component could I use for this?

@willerpp - can you attach a pic to help us understand what you're trying to build?

[MakhouT]

@stmoy So we are not going for the one of Wix? As it never got pointed out which one will be supported.

[stmoy]

@MakhouT - let me double check. I agree that we should have more clarity as I am also confused 😅

[kaiguo]

Hi @juhasuni , sorry I didn't see your comment earlier, I'm curious how you bypassed gesture-handler dependency? I tried it just now and it failed to import GestureHandlerRootView in StackView.tsx. Did you stub out an empty implementation for Windows?

[stmoy]

@MakhouT - thank you for your patience. The team is interested in building both react-navigation and react-native-navigation. We’re starting with react-navigation for several reasons, mainly due to 1st party dependencies. In order to do react-navigation, we also need to support its dependent packages, including reanimated. We know both are widely used, but react-navigation is a higher priority for the team right now.

@kaiguo can speak more to the specific progress of react-navigation, but based on preliminary status updates, it sounds like we'll be able to support the stack and tab navigation patterns soon. Drawer navigation will take longer as it has a dependency on reanimated.

[Hawiie13]

Good Day,
I am new with React Native, but have exp with react, and I am patiently waiting this to be unblock with react native windows,
I saw progress now. this may help for react-native-gesture-handler

https://github.com/software-mansion/react-native-gesture-handler/issues/382#issuecomment-495018322

I tried this with @kaiguo request pull from react-navigation.

https://github.com/react-navigation/react-navigation/pull/8570#issue-447685602

[alexanderblackh]

To be clear, for anyone who wants to use react-navigation while they work on getting react-native-gesture-handler working, make sure you don't import react-native-gesture-handler. This just rendered a constant black screen on my end and broke the entire app.