7 ms·
Introducing React Navigation for React Native
- a13n 10y agoAwesome! A better navigator is the #2 feature request for React Native - this solves a huge pain point. https://productpains.com/product/react-native 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 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
- htormey 10y agoHave you seen: https://medium.com/@jschloer/react-router-v4-with-react-native-5f2005ab2a72#.kbbiuggxn https://medium.com/@jschloer/react-router-v4-with-react-nati... https://react-router.now.sh/MemoryRouter 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.
- matthewvincent 10y agoThis addresses probably my number one pain point jumping between React - React Native apps. Looking forward to trying it out!
- Callmenorm 10y agoI 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.
- brentvatne 10y agoyup! the documentation uses react-navigation: https://github.com/react-community/react-navigation/blob/master/website/src/App.js https://github.com/react-community/react-navigation/blob/mas...
- anujanpan 10y agoDocumentation seems to be WIP but it looks like it supports web routing. https://reactnavigation.org/docs/guides/web https://reactnavigation.org/docs/guides/web
- evv 10y agoOn 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.
- arvinsim 10y agoGreat! Coming from using NavigationExperimental, I am happy that we have converged on a solution that is much easiee to implement.
- cridenour 10y agoWow! 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 https://reactnavigation.org/docs/navigators/drawer [2] https://reactnavigation.org/docs/navigators/tab https://reactnavigation.org/docs/navigators/tab
- sagivo 10y agowhat's the relations of this with the official RN library? we have `NavigationExperimental`, `Navigator`, `NavigatorIOS` and tons of other navigation libraries out there.
- a13n 10y agoLooks 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/master https://github.com/react-community/react-navigation/commits/...
- jorde 10y ago"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-Navigation https://reactnavigation.org/blog/2017/1/Introducing-React-Na...
- joncrocks 10y agoI believe this is the new navigation library as was described here : https://github.com/facebook/react-native/wiki/Roadmap https://github.com/facebook/react-native/wiki/Roadmap So I would expect that it may well be folded into core react-native in time.
- fersho311 10y agoDefinitely 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!
- htormey 10y agoThis 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://github.com/ReactTraining/react-router https://react-router.now.sh/MemoryRouter https://react-router.now.sh/MemoryRouter https://medium.com/@jschloer/react-router-v4-with-react-native-5f2005ab2a72#.kbbiuggxn https://medium.com/@jschloer/react-router-v4-with-react-nati... Navigation is a big pain point for sharing code between web and native.
- htormey 10y agoAnyone familiar with how this compares to react-router? I hear they are adding react native support. https://github.com/ReactTraining/react-router https://github.com/ReactTraining/react-router
- hackerboos 10y agoIt's written by some of the same contributors. Namely Mateusz Zatorski @matzatorski
- salakotolu 10y agoRight on time. Will check this out.
- frankblizzard 10y agoThis looks great and I will definitely try it out asap. I currently work with https://github.com/aksonov/react-native-router-flux https://github.com/aksonov/react-native-router-flux which also worked well in our case and covers most of our needs really well.
- shekispeaks 10y agoThe 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".
- rublev 10y agoWhat is a blessed library?
- shekispeaks 10y agoBlessed 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. :)
- damosneeze 10y agoI 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.
- acemarke 10y agoThe 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.)
- joncrocks 10y agoHaving said that, the official roadmap (https://github.com/facebook/react-native/wiki/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.
- stevejohnson 10y agoUnfortunately it breaks command-click to open links in a new tab, and instead navigates within the same page.
- evv 10y agoThis 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/issues/9 https://github.com/react-community/react-navigation/blob/master/website/src/Link.js#L30 https://github.com/react-community/react-navigation/blob/mas...
- fourstar 10y agoIs anyone here sharing code with react-native and react? I was looking @ https://github.com/este/este https://github.com/este/este but when trying to run the iOS app, ran into a bunch of roadblocks. It is compelling, though.
- lquist 10y agoWhat are the biggest production apps on React Native?
- lavingiasa 10y agoThere seem to be quite a few big names on https://facebook.github.io/react-native/showcase.html https://facebook.github.io/react-native/showcase.html
- tomwilson 10y agoDiscord is my favourite example.
- peterkieltyka 10y agoAwesome project. Another library which has been iterated over 1 year and used in production at Pressly is https://github.com/pressly/scene-router https://github.com/pressly/scene-router
- migueloller 10y agoThis 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 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.
- pier25 10y agoThe 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.
- dfischer 10y agoCan 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?
- jmfurlott 10y agoPros: - 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...
- apandhi 10y agoIt 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.
- elastic_church 10y agoJava/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.
- clement75009 10y agoLooks great. I like that the documentation already is very comprehensive, with a Hello World and several integration guides. Great launch!
- v512 10y agoI 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.
- cel1ne 10y agoAfter 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.
- chukye 10y agoI'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.
- adgasf 10y agoScreenshots would have been a good idea for an announcement page
- SamBam 10y agoThis doesn't add any new UI component, as far as I understand, it's just a router system for native.
- zaroth 10y agoI 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.
- explorigin 10y agoNo mention yet of [React Native Navigation](https://github.com/wix/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).
- brentvatne 10y agoreact-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 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-use-javascript-whenever-possible-with-react-native-26478ec22334#.lbbxfjjp1 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).