This is a guest post by Oskar Kwaśniewski, creator of react-native-bottom-tabs, a library exposing native tab primitives that integrates with React Navigation. If you like this guide, check out the react-native-bottom-tabs documentation for more!
This blog post will explain the differences between the JavaScript Bottom Tabs navigator and provide a step-by-step guide for integrating React Navigation with the Native Bottom Tabs Navigator.
The documentation is now live at reactnavigation.org, and v6 lives here.
React Navigation 7 aims to improve the developer experience with a new static API as well as bring many new features and improvements.
We're excited to announce the release candidate of React Navigation 7.0.
This release includes a new static API that simplifies the configuration of navigators and improves TypeScript and deep linking support. As well as various other improvements and new features.
Two of the major pain points of using React Navigation have been TypeScript and deep linking configuration. Due to the dynamic nature of the navigators, it is necessary to manually maintain the TypeScript and deep linking configuration to match the navigation structure. This can be error-prone and time-consuming.
To solve this, we’re adding a new static API to React Navigation 7. It’s not the same API as React Navigation 4, but it’s similar. Many apps don’t need the features that the dynamic API provides, and they can use the simpler static API instead to simplify their codebase.
The documentation is now live at reactnavigation.org, and v5 lives here.
React Navigation 6 keeps mostly the same core API as React Navigation 5, and you can think of it as further polishing what was in React Navigation 5. Let's talk about the highlights of this release in this blog post.
We're excited to announce that we finally have a prerelease version of React Navigation 6. We released React Navigation 5 more than half a year ago, and it brought a lot of new possibilities with the new dynamic API, and was met with overwhelmingly positive reaction. Since then, we've been working on incremental improvements and refinements to the library and thinking about how to make it even better. This brings us to the next major version of React Navigation.
tl;dr: We joined GitHub Sponsors, click here to see our sponsors page and become a sponsor!
React Navigation is depended on by some of the most respected engineering organizations, well-known brands, and talented startups. It's used by financial services apps like Brex and Coinbase Pro; educational apps like Codecademy Go and DataCamp; consumer apps like Shop from Shopify, Bloomberg, TaskRabbit, and Th3rdwave; entertainment apps like the National Football League (NFL) (in their main app and several others), Cameo, Tracker Network for Fortnite, and the Call of Duty companion app from Activision Blizzard. One of my personal favourite apps using React Navigation is Readwise, I love making my coffee with Single Origin 2, and managing household chores with Sweepy.
We've also seen React Navigation used in apps that help in the fight against COVID-19. Our favourites are How We Feel by Pinterest co-founder and CEO Ben Silbermann and a team from Pinterest in collaboration with leading scientists (article) and COVID Symptom Study by ZOE Global in association with King's College London (article).
React Native has made cross-platform development much easier than before, and with React Native for Web, you can reuse code across Android, iOS and Web too!
One major pain point of reusing code for the web app has been navigation. React Navigation is one of the most widely used navigation libraries for React Native, but it didn’t support web. While you could run apps using React Navigation on the Web, a lot of things were missing, such as proper integration with URLs on the browser.
We have finally added preliminary web support to React Navigation. Let's take a look at the changes.
Exactly two years ago, we published the first stable version of React Navigation. Throughout this time, the library has been actively developed by adding many new features and bug fixes. The essence of React Navigation was that it was a project that was to become not only a project of individual programmers adapting it to their requirements, but a community as a whole, hence the emphasis on versatility, extensibility, and the tendency to reconsider the assumptions if there were such needs. Thanks to this, the Library has been undergoing metamorphosis of both incremental and completely reorganized shape.
This is a guest post by the React Native Paper team. If you like this guide, check out React Native Paper for more!
In this blog post, we'll show you how to build a Twitter clone app using React Navigation v5 and Paper.