Introducing React Navigation for React Native | Hacker News Reader

Introducing React Navigation for React Native

reactnavigation.org

295 pointsevv66 comments

Awesome! A better navigator is the #2 feature request for React Native - this solves a huge pain point. https://productpains.com/product/react-native

In my experience this was one of the worst parts about using React Native - that there wasn't a simple, easy router (like React Router for web).

Looking at the GitHub repo (https://github.com/react-community/react-navigation), it looks like this was a collaboration between FB engineers, Exponent (great product + team!), and the open source community. So thankful for these incredibly smart folks working on software we can all use for free. <3

Have you seen:

https://medium.com/@jschloer/react-router-v4-with-react-nati...

https://react-router.now.sh/MemoryRouter

One of my clients uses react-router for web and we are exploring reusing it in our react-native apps.

Have you considered dependency-free state-driven routing: http://www.thinkloop.com/article/state-driven-routing-react-...

Nope, will check it out, thanks.

Definitely going to try this out. Having a consistent navigation library seems to be the last missing puzzle when building cross platform apps. Currently our project is set up to use the same Redux reducer and actions codebase for both mobile and web platform. The goal is to share all codebase and adding a new platform will be simply creating a new view component. Unfortunately, a lack of unified navigation library has caused us to create all kinds of hacks to get to make things work. We use react router on web and react-native-router-flux on native.

I'm part of a group working together on a project to teach ourselves coding so if anybody has any existing solution or alternatives, please share!

This is exactly the direction I am moving with my client. Prior to reading about this library I was planning on using the latest version of react-router to do this. See:

https://github.com/ReactTraining/react-router https://react-router.now.sh/MemoryRouter https://medium.com/@jschloer/react-router-v4-with-react-nati...

Navigation is a big pain point for sharing code between web and native.

No mention yet of [React Native Navigation](https://github.com/wix/react-native-navigation) which would probably be the closest competing project.

A cursory look show that the parent project does not use a native navigation bar on Android. NavBar buttons look pretty bad. RNN linked above uses native NavBar/NavBarButtons on both platforms and looks much better.

But RNN comes with it's downsides. It's under heavy development. It's less of a community project (wix offers it up but doesn't take community patches much).

react-navigation has very different goals, and it's still in beta, things like transitions are likely to change significantly before 1.0 release.

The main difference in the goals is that react-navigation is intended to be entirely cross-platform, including iOS, Android, ReactVR, and web. It's implemented entirely in JavaScript which has a huge upside because you can ship updates to it OTA and you can submit patches without needing to know ObjC/Java and the platform's respective navigation APIs. It will be an important library to push forward development of more powerful general purpose native APIs, for example the native driver for Animated was built with the intention of making it possible to run navigation transitions on the UI thread. Similarly, this will be an important use case for a better gesture API (https://twitter.com/notbrent/status/824683858037649408). I wrote more about why we should try to use JavaScript as much as possible with React Native here: https://blog.getexponent.com/good-practices-why-you-should-u...

OTOH, if what you need is a navigation library that is 100% faithful to the platform's built-in APIs, and you need that right now, then you will probably want to use something like react-native-navigation (Airbnb is working on open sourcing a similar library that they use in their app).

Can anyone comment on React native as a solution over going completely native with Swift for iOS development? Anyone with a lot of experience doing pure native that is convinced react native is the way?

Pros/Cons?

Native iOS developer (worked at Facebook/Apple) who's currently doing a bunch of contracting at the moment. I think React Native is great.

I think the biggest pros of react native are:

1) Not having to compile to see UI/Business logic changes (Swift compiler is slow).

2) The ability to push changes over the air after you switch.

3) Large parts of your app just work cross platform with minimal changes (I've shipped two iOS/Android apps).

4) If you have a react web team, they can now review and help out with your mobile apps.

5) It's easy to keep product in synch across multiple platforms (i.e android/iOS release at the same time).

I think the big cons are:

1) It's Javascript.. ES6 + babel makes this a lot less terrible than it was in the days of web apps wrapped as native apps but it's still Javascript.

2) If you have to do long running background tasks (network polling, bluetooth, music, location, etc) you basically have to do it in native code. This can be a big architectural pain in the ass depending on what your app does.

3) Ramp up time. Learning about React and all the third party libraries (Redux, etc) you will need to be productive takes time.

4) Cross platform testing. I.e if you share code with your web/android engineers, they will need to be disciplined about not breaking things (npm and versioned shared libraries helps with this).

5) Third party library quality in Javascript land can vary a lot. This requires you spend quite a bit of time vetting them.

If your based in the Bay Area I'm going to be giving a talk on on some of this in March.

Regarding con #1, ClojureScript is a good language to try with React Native. I'm still exploring it myself, but so far it's been a great experience. You can get a lot ton with so few lines of code while still retaining readability and ease of code modification.

https://github.com/drapanjanas/re-natal

For no #2 , have tested https://github.com/devfd/react-native-workers ?

it works pretty well, but havent done anything other than syncing and notification pushing. other API s should work

From the lifecycle section of the repo:

"the workers are paused when the app enters in the background the workers are resumed once the app is running in the foreground"

This won't work when your app is backgrounded or if the screen is locked.

Sadly looks moribund: https://github.com/devfd/react-native-workers/issues/23

EDIT - this fork looks like a good bet: https://github.com/ZhijieWang/react-native-workers

I'd be interested in attending the talk. Have any more info?

Sure, it's at Pinterest on March 7th :

https://www.meetup.com/Real-World-React/events/236140965/

Will you guys be recording it? Would love to check it out

would love to see a video recording of this, I think is super valuable.

I'm not sure if the organizers record their talks but if they do I will post a link here. Failing that I plan on writing some blog posts about my experiences with react native.

I'll definitely read the blog post, do give me a shout and you got my upvote.

Java/Objc/Swift developer here, mobile.

Most apps I work on, and projects I see, could benefit from React Native.

The actually innovative ones, on the other hand, could not.

New view controllers continually being introduced by Apple and Google are not available in React Native. So if you want to get fancy with UX, you are out of luck. Or won't get a net benefit when you start doing native development to get around the limits of React Native.

If your app just pulls lists of items from a server and displays them, with pull to refresh and infinite scrolling being the most innovative parts? You should probably use React Native at this point in time.

Almost all of the "showcase" apps written in React Native (hosted on the Facebook page) aren't convincing showcases. Either because their UI is pretty bad / simple, or because they have only released on one platform. Townske is a pretty good example though.

I think not having access to the latest platform feature is a little bit overstated for a number of reasons.

1) An example: It wasn't too long after iMessage apps came out in iOS 10 that tutorials emerged telling you how to use react native to build them, see:

https://medium.com/rendez-voo/messages-app-app-extension-ios...

2) It's really not that difficult to wrap native components and expose them to react native, see:

https://facebook.github.io/react-native/docs/communication-i...

I would say that Android is a little bit more work right now, but it's really not that big of deal.

3) It's easy to embed react native in an existing iOS app. This is great for things like sign up screens, call to action pop ups or other Areas of the app where you want to iterate quickly.

Also animations with react native are pretty nice. I haven't come across anything that I haven't been able to do yet. See:

https://medium.com/react-native-training/react-native-animat...

The biggest issue with react native is that its Javascript which a lot of native developers don't really like especially when compared to Swift.

I would love to develop an app in React Native using Swift instead of JavaScript. Using Swift, not only for the native modules, but really writing components in Swift. With props and renders and state and everything. Basically I want to use Swift but avoid IB, view controllers, and the whole cocoa rendering.

> New view controllers continually being introduced by Apple and Google are not available in React Native. So if you want to get fancy with UX, you are out of luck. Or won't get a net benefit when you start doing native development to get around the limits of React Native.

It looks like this problem is acknowledged and addressed by the React Native folks[1] : React Native has several of the most critical platform components already wrapped, like ScrollView and TextInput, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, it's quite easy to wrap up these existing components for seamless integration with your React Native application.

If your app has some innovative UI, but you can reuse most of the code from React Native for some basic parts of the app, wouldn't you benefit from using React Native? Or is [1] not that "quite easy" ?

If you plan to have your app run on both iOS and Android (and Windows 10), what is the downside of React Native?

I wonder how React Native stands vs. Cordova and Xamarin, performance wise and ease-of-use. I'm thinking it falls somewhere in between Cordova and Xamarin, but I'd love to hear people's experience on this.

[1] https://facebook.github.io/react-native/docs/native-componen...

Pros: - If you're familiar with Javascript or React, you'll feel right at home without having a huge learning curve. - Duplicate code for Android, iOS, web and even check out react-native-web - npm and JS lib ecosystem is huge - You can reach the metal on both Android and iOS if you need to

Cons: - Fast moving project that is constantly updating (good and bad). Can be hard to keep updated and upgrading can be a pain - Documentation is ok but standard practices are missing

I'm sure other people have others...

It kind of makes me sad in a way, because I've always loved using apples frameworks.

But its really hard to argue with getting android as well for almost free, and even having the potential to share code with a web front end as well.

Especially when doing a version 1 of almost anything it seems to make more sense to me than any other option.

It's a power amplifier for development, especially if you don't have ObjC/Swift Devs. I picked it up in October 2016 at the request of a client who I had built a web app for. He asked for a proof of concept, and me being intrigued by React Native said I'd check it out and try to build a minimalistic proof of concept to see if we can proceed with the project.

I did not have any experience with mobile development or React, and only knew Vanilla JS, none of that new fancy ES6 stuff. I was able to be comfortably effective with React-Native in about a month. On the first weekend, I had a usable sandbox/playground app compiling with hot-reloading enabled which sped learning along in a huge way.

We're a couple hundred hours into that project now, and I still find React Native to be a joy to work with.

It is one of the most enjoyable iOS Development experiences I've ever had. Just the yesterday, I was thinking "I'd never want to try and make layouts programmatically with swift ever again"

Now, I wouldn't say that I'd go 100% of the way with react native, but so far I can say I'll be using it for at least 80% of my layouts/logic.

This addresses probably my number one pain point jumping between React - React Native apps. Looking forward to trying it out!

I agree with you on it being a painpoint.

Is this a web router as well? I think they hinted at that, but it was a little unclear to me. Also, is it really true that react native apps have routing that is too complex for a URI? I can't think of a reason why that is immediately true.

On mobile apps, URIs are more like actions than like navigation state. The navigation state can be quite complex because there are often several navigators in an app that each need to maintain the state of several screens.

For an example of how this works on web, try browsing to a doc on on reactnavigation.org, then navigate to the home page, and navigate back to 'Docs'. Notice how the state of the docs tab is retained, even though the previous URI had no awareness of that state. Most websites don't behave this way, but mobile apps do.

yup! the documentation uses react-navigation: https://github.com/react-community/react-navigation/blob/mas...

Documentation seems to be WIP but it looks like it supports web routing. https://reactnavigation.org/docs/guides/web

This looks great and I will definitely try it out asap. I currently work with https://github.com/aksonov/react-native-router-flux which also worked well in our case and covers most of our needs really well.

The fact that this and practically all React packages are community maintained is one of the pain points with React IMO.

I'm not saying React and React Native should come included with a router, but that Facebook should provide an official one just like Angular and Vue do.

Anyone familiar with how this compares to react-router? I hear they are adding react native support.

https://github.com/ReactTraining/react-router

It's written by some of the same contributors. Namely Mateusz Zatorski @matzatorski

This is awesome! I've been checking every morning since November (it was targeted for release at that time and has been pushed) for this release ever since it was added to the React Native roadmap https://github.com/facebook/react-native/wiki/Roadmap

A good navigation library is the one thing that was missing for React Native and I'm glad to see the collaboration from folks from Facebook and Exponent make this happen.

Screenshots would have been a good idea for an announcement page

I was pleasantly surprised to see great screenshots in the documentation!

Unfortunately only for the first few sections, I assume they will be adding more screenshots to the later sections.

They have a Navigator demo app, would be nice if they just put it on the store so we could grab it and just see first hand everything working.

This doesn't add any new UI component, as far as I understand, it's just a router system for native.

Wow! Looks great. Love the simplicity of drawer[1] and tab[2] navigation as well. Compared to current offerings, a lot less intimidating.

[1] https://reactnavigation.org/docs/navigators/drawer [2] https://reactnavigation.org/docs/navigators/tab

what's the relations of this with the official RN library? we have `NavigationExperimental`, `Navigator`, `NavigatorIOS` and tons of other navigation libraries out there.

Looks like it was made via a collaboration of several core React Native contributors so I'd guess this will be the future of navigation for React Native.

https://github.com/react-community/react-navigation/commits/...

"React Navigation is born from the React Native community's need for an extensible yet easy-to-use navigation solution. It replaces and improves upon several navigation libraries in the ecosystem, including Ex-Navigation and React Native's Navigator and NavigationExperimental components."

Source: https://reactnavigation.org/blog/2017/1/Introducing-React-Na...

I believe this is the new navigation library as was described here : https://github.com/facebook/react-native/wiki/Roadmap

So I would expect that it may well be folded into core react-native in time.

Great! Coming from using NavigationExperimental, I am happy that we have converged on a solution that is much easiee to implement.

Is anyone here sharing code with react-native and react? I was looking @ https://github.com/este/este but when trying to run the iOS app, ran into a bunch of roadblocks. It is compelling, though.

Unfortunately it breaks command-click to open links in a new tab, and instead navigates within the same page.

This should be an easy fix. If somebody wants to jump in, this is a great first task!

https://github.com/react-community/react-navigation/issues/9

https://github.com/react-community/react-navigation/blob/mas...

After having read the API I decided to use a hand-written navigator instead of ReactNative's.

Key was to explicitly expose the z-index/component-ordering, so what it does is accepting a "render-list" of compnentName/props/animation triples which it then displays in absolutely positioned AnimatedViews on top of each other.

This way I have good flexibility without introducing metaphors that keep breaking.

Looks great. I like that the documentation already is very comprehensive, with a Hello World and several integration guides. Great launch!

The design of the website does not tell us who the maintainers / creators of the library are. At times it feels like a blessed library by the react-team. Most likely this was not intentional. It would be cool to have an about-us page where they talk about the maintainers and the "react-community".

The React team has avoided blessing any specific libraries, beyond things like Babel for JSX transformation.

React-Router is not an "official" library. As far as I know, neither is React-Navigation.

That said, I also don't know much about the ins and outs of React Native, so there _may_ be some semi-official-ish overlap between React-Navigation and React Native.

(Also, this totally causes an abbreviation clash, as "RN" now has multiple meanings. Oops.)

Having said that, the official roadmap (https://github.com/facebook/react-native/wiki/Roadmap) mentions a navigation library should be coming in Jan, and the timing and people involved seems to line up with this project.

this is indeed the project mentioned in the roadmap!

What is a blessed library?

Blessed Library: Something that is not part of the core offering but is the recommended way of doing certain things by the core maintainers. The main reason it is not in core is that it is probably not needed by all users of core.

I would say one of the the strongest blessings is inclusion in the create-react-app boilerplate. Of course that's ReactDOM not RN. Not sure if RN has an equivalent, or if even necessary since it's a complete framework.

I'm wondering, what is the performance of that? I tried to use the ReactNative main Navigator, some community modules, but all have a very poor performance, the best I found is building something very tight with the states so it will not drop perf as we add more components.

Awesome project. Another library which has been iterated over 1 year and used in production at Pressly is https://github.com/pressly/scene-router

I spent countless hours on trying to fix React native navigation while I was developing a test app. I am glad finally there is some good solution to it.

Right on time. Will check this out.

What are the biggest production apps on React Native?

There seem to be quite a few big names on https://facebook.github.io/react-native/showcase.html

Discord is my favourite example.

Reply on news.ycombinator.com