Is react-navigation is supported in ReactXP?

Question

I just started learning ReactXP and I want to use React-Navigation-https://reactnavigation.org/ in ReactXP. Is React-Navigation is supported in ReactXP? If yes, Then we have any working example?

I found one example but its not working. https://github.com/LeJPR/reactxp-navigation-example

Answer 1

Referring to this link (https://microsoft.github.io/reactxp/docs/extensions/navigator.html) the default way of reactXP is currently not using React-Navigation but might do in the future.

The current implementation of Navigator on React Native makes use of the deprecated “Navigator Experimental”. We will look at moving away from this implementation to the now-recommended “react-navigation” in the near future. Some of the more advanced interfaces may need to change. These are listed at the end of this article. Use these with caution.

I read somewhere in the reactXP issue list on gitHub that your example (https://github.com/LeJPR/reactxp-navigation-example) does not just use react-navigation but had to change the annimation system used in reactXP and seems to not beeing updated anymore.

The core of react-navigation works fine with reactxp, to get it running as is you just need to create reactxp versions of the views used by the different navigator types such as stack/drawer/tab. In doing this though i ran into some challenges with the parity of reactxp animation vs react-native. Unless i'm mistaken it seems there's some quite fundamental limitations with reactxp animation currently - from what i can see you can only have a single interpolation off an animated value (add another and it will overwrite the first), only two values in an interpolation array (as opposed to multiple steps). This functionality is used extensively in the react-navigation views for native like experience. To get around this (driven by a lack of time to consider how to reimplement with reactxp animation) i ended up patching in animatedjs for use on reactxp web navigation views, which provides parity with react-native. Kind of leads me to believe considering animation might be a precursor to react-navigation/more important question. Happy to put up a sample of the above approach to getting react-navigation working with reactxp if of benefit - definitely just for awareness and not production use though!

The example does actually come from this reactXP issue: https://github.com/Microsoft/reactxp/issues/9#issuecomment-303717309

Options I found for Navigation without writing an Extention on your own

• contained in reactXP https://microsoft.github.io/reactxp/docs/extensions/navigator.html
• also from reactXP team but not in use? https://github.com/Microsoft/react-native-experimental-navigation
• an other navigation package I found https://github.com/ymzuiku/react-router-hash-history