search

ptmt / react-native-macos

[deprecated in favor of https://microsoft.github.io/react-native-windows/] React Native for macOS is an experimental fork for writing desktop apps using Cocoa
MIT License
11.24k stars 429 forks source link

Router solution with RN macOS #139

Closed andrerfneves closed 7 years ago

andrerfneves commented 7 years ago

Hey all,

I know this isn't technically an issue, more of a question, but I was unable to find any information on StackOverflow or elsewhere regarding a routing solution to use with RN macOS. I've tried React Native Router Flux, and Ex Navigation but to no avail. I was wondering if anyone has successfully used a RN routing library with RN macOS, and if so, what that solution was. I know ReactNavigation BETA also just got released and was wondering if anyone had tested that at all with RN macOS.

Again, this is more of a discussion point, and since the RN macOS community doesn't seem to have much participation on StackOverflow posts, I figured I'd ask here. If you'd rather close this issue go ahead, and I'll keep looking for working solutions.

ptmt commented 7 years ago

What're your current requirements for navigation library? Have you tried NavigationExperimental? I'm starting to make a new app next week, will try to evaluate ReactNavigation for a option

andrerfneves commented 7 years ago

@ptmt I don't have many requirements. Anything that would handle push to a navigation stack, or of the sort would suffice. Basically just any library that would have the same approach to routing as any of the libraries I mentioned above. I haven't yet tried NavigationExperimental though. Have you had any success with that?

ptmt commented 7 years ago

Yes, I changed default scene transitioner (basically, animation), but overall it integrates nicely with Redux and codebase can be shared with iOS. Although, RN for macOS has many flaws and still not ready for production. You should be prepared for some of them: processing a lot of view layers can be painfully slow, bugs with events, lack of some must-have Cocoa native controls.

On Wed, 1 Feb 2017 at 19:08 André Neves notifications@github.com wrote:

@ptmt https://github.com/ptmt I don't have many requirements. Anything that would handle push to a navigation stack, or of the sort would suffice. Basically just any library that would have the same approach to routing as any of the libraries I mentioned above. I haven't yet tried NavigationExperimental though. Have you had any success with that?

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/ptmt/react-native-macos/issues/139#issuecomment-276699089, or mute the thread https://github.com/notifications/unsubscribe-auth/AA9SU44bgchtkFAxn9U61TS_ISzLyj2Qks5rYK39gaJpZM4L0CkE .

andrerfneves commented 7 years ago

Got it. So in your view, NavigationExperimental will definitely be the way to go for now? Is there any source code that I can check out for changing default scene transitioner (basically, animation)?

ptmt commented 7 years ago

It's not available for using custom styles right now without changing some core code (will merge it later from latest RN). See https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js#L70 https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/NavigationExperimental/NavigationCardStackStyleInterpolator.js#L78 By default, you get iOS style of transition between scenes, and it should work, but not idiomatic for macOS. So you can start with this, and change it later with proper styles (or to ReactNavigation, I'll check it).

andrerfneves commented 7 years ago

@ptmt awesome! I'll take a look at these. This helps a lot. Please keep me posted on any ventures you take into ReactNavigation though. As I believe RN Core could eventually settle on ReactNavigation if it becomes the defacto router for RN-based apps. Cheers!

c-h- commented 7 years ago

@andrerfneves (cc @ptmt) I've been working on a side project that uses every platform variant of react native. The router solution I settled on was using React Navigation since it's fully featured and handles everything from deep linking to redux integration to web URL support. It utilizes native navigation stacks on iOS and Android, and it's easy to extend with your own routers/navigators/views. Only problem is the documentation is pretty limited and not super clear - I had to trawl through source to build my own navigator. I built a non-native-powered router (just Views etc) that I'm using for web, macOS, and Windows, but you could easily build a "native" one assuming you can access the APIs from React Native. I'll publish my project in the next week or two.

I'm only raving because I remember when React Native Android came out and there was no usable solution at the time, so I'm quite pleased that such a well-thought out project is finally coming together.

andrerfneves commented 7 years ago

@c-h- that's great news. Looking forward to it. Please do let us know when you have some source code up as I'd love to get a feel for the tool.

c-h- commented 7 years ago

Hey @andrerfneves I just published the boilerplate I came up with. I intend to use it to build an app that works on every platform using the same code within the next month or so.

https://github.com/c-h-/universal-native-boilerplate

Of particular interest may be the routing/navigation support I added through react-navigation. You can see screenshots of the "app" on every platform. It comes with URL support on web/server-side rendering and deep linking support on every platform that supports React Native's Linking API. The tab bar is native on iOS and Android. On other platforms, like macOS, it's a custom tab bar written in pure JS.

If you're familiar with react-navigation concepts then the organization should be easy enough to follow. The navigation-related components are here: https://github.com/c-h-/universal-native-boilerplate/tree/master/js/components

Please let me know any comments or issues you see with it - I built this out of the two years experience I have with React on web and React Native on Android and want it to be as great as possible of a starting point.

andrerfneves commented 7 years ago

@c-h- that package looks pretty great. Would love to dive into it a bit more and contribute. I've been working with RN and React for a long time as well and I believe a universal package that works would be very interesting. I'm going to go ahead and move this discussion to the package's github repo's issues so we can discuss further.

jaywcjlove commented 5 years ago

Example: https://github.com/jaywcjlove/amac

redux + rematch + react-router-native