use react-navigation!

[chandu0101]

https://microsoft.github.io/reactxp/docs/components/navigator.html

my guess is that when you guys built this there is no react-navigation, is it possible to adopt https://reactnavigation.org/ instead of creating one more navigation lib/API, we already have plenty now ;)

[kaiyes]

Please . Sticking to React Navigation will be a god send.

[saint4eva]

It may not be ideal as React Navigation only has support for Android and iOS - there is no support for UWP...

[dryganets]

Regarding the navigation framework, it was a hard decision for us. Initially, we used React Native's Navigator but the animations were not smooth enough.

In order to fix this we considered two libraries: React Native's NavigationExperimental and https://reactnavigation.org/.

We ended up switching to NavigationExperimental because it required a minimum amount of change to the framework and it met our performance goals.

If you want to use a different navigation library, it's possible to extend https://github.com/Microsoft/reactxp/blob/master/src/native-common/NavigatorCommon.ts

similar to how we wrote delegates for Navigator and NavigationExperimental: https://github.com/Microsoft/reactxp/blob/master/src/native-common/NavigatorStandardDelegate.tsx

https://github.com/Microsoft/reactxp/blob/master/src/native-common/NavigatorExperimentalDelegate.tsx

Unfortunately, ExperimentalDelegate does not currently work with the official version of React Native. In order to support our app's requirements, we made some enhancements to NavigationExperimental which haven't yet been contributed back to Facebook's React Native repo. The primary enhancements are a fade navigation animation (similar to Navigator's) and the ability to provide custom navigation animations.

Also, ExperimentalNavigator got deprecated and pulled out from the ReactNative repository, so likely we will move our implementation to the separate reactxp plugin.

Our goal was to create a cross-platform framework. Currently, Facebook's NavigationExperimental seems like a reasonable choice as it results in smooth animations in our app and we are able to share navigation code between all platforms Skype is working on.

[fotiDim]

@dryganets whatever your reasons back then the way to go now is react navigation. If it doesn't support UWP you can consider contributing that part maybe.

[dryganets]

@fotiDim we have nothing to argue about :rofl:

I took a closer look at the https://github.com/react-community/react-navigation. It's the framework we likely will use once we move to react-native 0.42. I can't give any timeframe now as it could change with our project priorities.

In fact, https://reactnavigation.org/ just an ExperimentalNavigation pulled out of the facebook repository into the community one.

I was likely looking into the different library before. It was fully native and that was a limitation for us as we need full control over the navigation stack to have a compatibility with the web/desktop version.

The ReactNative community is fluid and fast growing. Projects often change authors and names :)

We are not trying to limit anyone. Navigation framework choice it's probably the hardest decision in case you are building a cross-platform app as many future architectural decisions would depend on it.

[smkhalsa]

@dryganets any update on when we can expect the update to react-navigation?

[quantuminformation]

I started a RN app using react-navigation, but I think I will wait a bit before continuing as I would like to build with XP. Exciting stuff!

[dryganets]

@smkhalsa, we don't have exact plans for this enhancement yet, sorry.

[afilp]

@dryganets Can we use react-native-router-flux with reactXP?

[quantuminformation]

Any updates guys?

[quantuminformation]

I had to google UWP, not something that most js devs would worry about..

[erictraut]

We haven't forgotten about this. There are still several items that are higher on the priority list though.

[LeJPR]

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!

[erictraut]

@LeJPR - thanks for investigating. Yeah, it would be useful to see what you've done. Perhaps you can check it into a branch?

[LeJPR]

will try and grab a few hours of the weekend and get an example up. Great library by the way - i've been refactoring a reasonably complex react-native app into reactxp and have been really impressed with the experience.

[LeJPR]

have dropped an example at https://github.com/LeJPR/reactxp-navigation-example.

Built reactxp-navigation and reactxp-animation as extensions which i've also published github.

[LeJPR]

Eric - off topic a bit for this thread, but would you be open to a PR on animated? If so I'll see if I can figure out how to implement things like multiple animated transforms on a style, multiple interpolations on a value etc.

[erictraut]

@LeJPR, yes, I'm open to it. We've had it on our list for a while, but it's never a high enough priority. If you have time to make improvements to the web implementation of Animated, that would be great. There's a possibility we could reuse some/all of the implementation in react-native-web. I haven't investigated it yet.

[housseindjirdeh]

Just wanted to ask, with the current Navigator is it possible to render a header navbar or a tab bar of any sort? The documentation and sample apps cover 2-3 card stack flows so will this functionality only be available once react-navigation is leveraged?

[dryganets]

@housseindjirdeh we have a separate control for rendering tab views. It is not open sourced yet. You could use the tab view as a scene for the navigator.

[MovingGifts]

@dryganets When do you guys plan on open sourcing it? Can you share how to add the tabs based on your suggestion?

[erictraut]

We don't currently have any plans to open-source this component. It has a bunch of complicated features that are specific to the Skype client.

[MovingGifts]

@erictraut Is it possible to have tabs on the bottom (like react-navigation's) tab navigator? I am not sure how to implement that with ReactXP.

[erictraut]

What functionality are you specifically looking for? Do you need the ability to swipe left/right between tabs? Or are you just looking for a group of tab buttons that selects one of n content panels based on the currently-selected tab? If it's the latter, it's trivial to implement in ReactXP. If you need swiping, it's still possible to implement using ReactXP's GestureView, but it's a bit more involved.

[MovingGifts]

Yep, the latter :) I didn't see any examples, so wasn't sure how to implement it. So for me coming from React Navigation, we had a Drawer on the left, and Tabs with icons on the bottom (currently selected tab with active icon). I am trying to implement both in ReactXP, but didn't see any examples on how to do that. That's why I am asking here so I can move over my app to React XP and have the same functionality :)

Ideally, a react-navigation integration would remedy the need of a different approach and would attract many others that use rn library. Unfortunately, the support on react-navigation is almost non-existent for the last few weeks...

But moving forward, how can we implement a drawer + tabs with ReactXP. Any code examples we can implement at this point?

[erictraut]

If you don't need swiping, then you can easily create your own tab bar component that renders the tab bar buttons any way you want. Then lay it out as follows, positioning it below the panel.

render() {
<RX.View>
    { this._renderPanel(this.state.selectedPanel) }
    <MyTabBar
        buttonList={ buttons }
        selectedButton={ this.state.selectedPanel }
        onPressButton={ this._onPressButton }
     />
<RX.View>
}

[MovingGifts]

@erictraut Thank you! Will try that out :)

[MovingGifts]

@erictraut To be honest, I find the current navigator very complicated to use when compared to react-navigation's simplicity. I already refactored all my navigation logic from react-native-router-flux to react-navigation (since it promised web), and I really don't want to refactor all my navigation logic again to the current navigator if it will be changing in ReactXP soon to react-navigation, only to refactor it back :) We'd all love to use ReactXP with react-navigation, as I believe that's the best of XP worlds.

I saw @LeJPR's attempt to marry the two here

I am wondering if that is a viable solution to integrate into ReactXP at this point, since you guys have it planned to integrate anyway? What are your thoughts on the recommended approach?

[LeJPR]

My two cents on this:

1. the example i put up was very quick and dirty - i would not recommend using it for anything serious.
2. React-Navigation works out of the box with reactxp, in the sense of the core logic. What doesn't work are the sample navigator views. These heavily rely on animation features not currently exposed in reactxp animation. This would need to be resolved first before integrating the existing react-navigation views with reactxp. I've put up a reactxp fork where i've ripped out current animation approach, and replaced with animatedjs - had limited time to spend on this. This is a fair way from a pull request and needs cleaning up and typescipt stuff sorted out - it is functional though. Main question is - is this approach actually a direction reactxp team would like to go in?
3. I really like the approach of reactxp - expose what is supported and works well across mobile and web. The more i've played with the current react-navigator provided navigator views on larger scale web views, this leads me to thinking do they out of the box support this concept? Does the Tab navigator which looks great on a tablet look great on a large monitor for example? Does the header from a stack navigator look good at that size? I think to create a great experience across web and mobile you'd probably end up forking the existing navigator views/creating new ones to best fit the devices that reactxp delivers to.

[erictraut]

I apologize that we let this issue go unresolved for so long. We (the Skype team) have been busy rolling out the new Skype client to our users worldwide. We're just now able to spend more cycles on this issue. Until this issue is resolved, ReactXP is blocked from moving forward to React Native 0.44+, so we want to make progress here!

Here's our current thinking on Navigator support in ReactXP. We are considering three options:

1. Re-implement the RX.Navigator namespace in ReactXP using React-Navigation for iOS and Android and a custom implementation on web. Keeping with the ReactXP philosophy, the interface and functionality should be as symmetric and consistent as possible across all platforms. This means we would expose only a subset of React-Navigation's capabilities --- those that could be implemented on all platforms.
2. Remove the RX.Navigator namespace from ReactXP and introduce it as a ReactXP plugin. In the case of a plugin, we're less concerned about upholding cross-platform symmetry, so the web implementation could include only a subset of the functionality exposed on native platforms.
3. Completely remove support for navigation in ReactXP. On native platforms and small-screen form factors, we would recommend using React-Navigation directly. On web and larger-screen form factors (tablets and desktop), we would recommend building custom navigation logic into each app.

We are internally starting on a prototype to help inform which option to choose. I'd like to get feedback and input from the broader ReactXP community as well. Thoughts?

[agrcrobles]

Thanks for sharing the options @erictraut ! I think navigation should be plugged into ReactXP, I find it more flexible and I think it scales better.

[MovingGifts]

Thank you for sharing your thoughts and status with us @LeJPR and @erictraut!

@agrcrobles which option number are you referring to for flexibility and scaling better?

[agrcrobles]

My vote goes to 2. :)

[MovingGifts]

I am confused with the options :)

But I think there are 2 parts to this:

1. Defining StackNavigator in central location in a file routes.js

   
   import { StackNavigator } from 'react-navigation';

const BasicApp = StackNavigator({ Main: {screen: MainScreen}, Profile: {screen: ProfileScreen}, });

Along with the screen names, some routes will define modal mode to show the sliding up of the screen, a path for the location, and some will have params (at a minimum) This route can be used and not have to worry about `TabNavigator` and `DrawerNavigator`, and we can implement those manually with JS (or they can be carried over, not really sure about the complexity there/cross platformness). For example, their current `DrawerNavigator` does not push content, only overlays, and you can't customize the overlay color, so I feel like the manual implementation may be better in this case. I think `TabNavigator` may also pose some issues with cross platforms, since we may want the bottom tabs on mobile, but no tabs and instead link/icon in very different locations on web, but I think with the current implementation you wrap all scenes you want as tabs in a `TabNavigator`, so how to split it out on web if you don't want those scenes as mobile like tabs? For that, I think also a custom js component implementation as shown above by you would work really well on a `StackNavigator` that needs tabs:

render() {

{ this._renderPanel(this.state.selectedPanel) } } ``` 2. Navigating the screens ``` const { navigate } = this.props.navigation; return navigate('Profile', { name: 'Jane' })} />; ``` One issue I came across with this is I had to always keep passing the navigate prop everywhere, which was a real pain, instead of using it from a centralized store. Luckily I came across [this](https://github.com/hotchpotch/react-navigation-mobx-example) which worked really well and I only needed to import the store in the scene and was able to use it like this: ``` import navigationStore from 'stores/navigation-store' return navigationStore.navigate('Profile', { name: 'Jane' })} />; ``` I think the navigation syntax across all platforms should work the same way, via a navigation store as opposed to a prop being passed all the time. I am not sure at this point, if there should just be one `routes.js` to handle all the navigating, vs having `routes.js` (for native) and `routes-web.js`, and depending on the visiting Platform it would use the correct file, but if the web version does not exist, only the `routes.js` will be used for all navigation links. Those are my thoughts so far, but not sure which option they fall under :)

[LeJPR]

I'd vote somewhere between 2 & 3! Preferred Navigation options on react-native don't really have a history of being stable.. so baking it into the RX namespace might cause a headache in the future...as it has now. If there were pluggable options i might start a new project today using an RX extension built on react-navigation, or react-router. In 12 months time if i were to start a project...perhaps airbnb's native-navigation will have web as well, or react-universal-new-fangled-navigation will be flavour of the month. I think at the end your point re: larger form factors is valid as well - in reality i think navigation is one area people will need to get their hands a little dirty, and even if a 'generic' approach were provided, for most apps you're going to need to do some custom stuff to cover all form factors.

[MovingGifts]

At this moment, it's like the react-navigation maintainers aren't around.. It has been 2 months since their aimed v1 stable release, and started collecting v2 features from users, but no word on v1 stable release update at all (and they're just leaving people hanging, which is not good).

It's really annoying that they start off with great enthusiasm to make the "best" react navigation system and then ignore so many issues and dont' look at open PRs. I worry that if we integrate it with ReactXP, it would be the weakest part of ReactXP if it's 100% dependant on react-navigation (solely because of the lack of maintaining the library and no response from the maintainers for a long time now).

I really like their API though for its simplicity, but it's also missing some key things like replacing a current scene for example, and issues with drawer/tab navigators.

My thoughts are to use their StackNavigator api, or at least the same syntax, but leave out problematic areas such as the other navigators, and instead add them manually as js component in the views with code. If animations were an issue as @LeJPR said, then maybe looking into the areas he was referring to regarding animations, so everything looks correct.

I really like ReactXP and their mission and support, and it would be awesome to integrate the StackNavigator API + add few minor custom things, like the replacing of current scene for example.

[quantuminformation]

I'm sure it will happen.

[pillowsoft]

I vote for 2....this could be yet another possible abstraction/api: react-router-navigation...just looking at it now, to see what it would take to port it to RXP

[erictraut]

After completing our internal prototyping, I think we're going to go with option #3 for now, with an eye toward #2 or #1 at some point in the future. That means we'll be removing the RX.Navigator namespace and corresponding functionality from ReactXP in the next version. If you want to use stack-based navigation in your RN app, you'll need to choose from among the various options available.

Now that we've made this decision, we are unblocked from moving ReactXP to the latest version of React Native (0.46).

[MovingGifts]

@erictraut Just wondering... Any idea when the ETA for the next ReactXP version is?

[erictraut]

We've continued to publish new minor versions on a pretty regular basis — whenever there are bug fixes that have been pushed. Currently, there are no submitted changes that have not already been published.

If you're asking about an ETA for the next major version, it will probably be at least two weeks, maybe three. The developer who has been at the center of this work is currently on vacation.

[MovingGifts]

Thank you for the quick update.

Yup it was about the next major version to use react navigation :)

[MovingGifts]

Just wondering if anyone was able to get react-navigation working on web as well? I got it working on mobile, but I am starting to look into react-router v4 as an alternative since I can't get react-navigation working on web (I am okay with having a separate routes file for mobile/web) as opposed to a single file, but just can't seem to get it to work with my ReactXP web portion of the project.

Does anyone have react-navigation working with the web portion of their XP app as a separate routing file?

[vicentedealencar]

@MovingGifts I just found this out, maybe it helps you react-router-navigation

[quantuminformation]

Is anyone aware of any over reactxp and create-react-native-app. I'm trying to decide which one to use.

[MovingGifts]

@vicentedealencar Yup, I saw that mentioned by @pillowsoft a few comments above. Does it work for both platforms for you guys on ReactXP?

@QuantumInformation I was thinking the same with ReactXP and create react app, since CRA is zero configuration, so many things have already been done for any app wanting to use it out of the box, not sure if they can work together (having CRA run the web portion of things). I haven't used it though, just using create-xp-app at the moment. I wonder if anyone here is using both? It would be great if it was also zero config with ReactXP as well, so we can focus on just the app code :)

[Roba1993]

Is there any solution how to continue with routing, when this feature will be removed from reactxp? In my opinion a common, simple, cross-platform routing functionality is needed.

[Fitzpasd]

@LeJPR - Are you working on a PR to integrate Animated.js?

[quantuminformation]

@MovingGifts I've dropped all react native dev for now as the platform is still too unstable for me.

[MovingGifts]

@Roba1993 I hope some examples/documentation emerges on how to route within a ReactXP app for both mobile/web platforms (ideally using a single API). Atm, I don't think anything exists yet.

@QuantumInformation You can check out Expo (no web). I feel your frustration though, I am really not happy specially with routing and all the cumbersome configs. I just want to code my app views with simple routing for mobile/web, push to production easily (app stores/push to online server) and be done! I guarantee within a few years, it will all be drag and drop to build for different platforms, with routing built in, pushing to production, and everything will be so easy. But until then, we gotta grind or drop it..