React Navigation 1.0 (goodbye, beta!)
As of today, React Navigation version 1.0 has been released! To see a list of recent improvements leading up to the release, refer to the “Renewed Path to React Navigation V1.0” issue. Thank you to everybody who has filed high-quality bug reports, submitted pull requests, and helped out fellow developers while we were in beta!
+React Navigation 1.0 (goodbye, beta!)
As of today, React Navigation version 1.0 has been released! To see a list of recent improvements leading up to the release, refer to the “Renewed Path to React Navigation V1.0” issue. Thank you to everybody who has filed high-quality bug reports, submitted pull requests, and helped out fellow developers while we were in beta!
This release isn’t meant to be interpreted as a signal that React Navigation is “finished" — work is already underway on a number of significant changes to the API that aim to make React Navigation easier to use and more powerful. These changes will be run through our new RFC process. For example, the Navigator View API RFC outlines a plan to decouple views from the router in order to make it easier for other navigation APIs, such as react-native-router-flux and react-router-native, to build on top of the same navigation views. We’re also very excited about a plan (no RFC is open yet, but keep an eye out for it) to use react-native-gesture-handler to run navigation gestures (sliding a drawer open, or swiping back on a stack, for example) on the UI thread using the Animated native driver.
Last week we released an updated version of our documentation website, built using Docusaurus. We hope that the new documentation will help newcomers get onboarded with the fundamentals of React Navigation, and serve as an ongoing resource to handle specific use cases as you come across them (under the “How do I do..?” section). Contributions to the documentation are very welcome.
Give React Navigation 1.0 a try, post a feature request if you think something is missing, open a RFC if you have an idea of how to implement it, file a detailed bug report when you encounter problems (or open a pull request if you know how to fix them)! Updating your existing installation should be easy if you have tracked releases over recent months — read the brief release notes for more information.
2.0 release candidate
Exactly two months after the release of React Navigation 1.0, we are close to another major version release. We’d like to invite developers that use the library to give the release candidate a try in your app and let us know if you encounter any issues.
+2.0 release candidate
Exactly two months after the release of React Navigation 1.0, we are close to another major version release. We’d like to invite developers that use the library to give the release candidate a try in your app and let us know if you encounter any issues.
yarn add react-navigation@^2.0.0-rc.1
The documentation for 2.0 is available at reactnavigation.org
We’re bumping the major version because some of the changes in this release are backwards incompatible. That said, this should be a fairly easy upgrade. We are improving React Navigation incrementally because we don't want to leave developers feeling stranded in an old version. If you use React Navigation in a conventional way and don't have any custom navigators, I can't imagine this update would take you more than an hour.
diff --git a/blog/2018/05/07/react-navigation-2.0/index.html b/blog/2018/05/07/react-navigation-2.0/index.html index 06ebfba954..c007b422c3 100644 --- a/blog/2018/05/07/react-navigation-2.0/index.html +++ b/blog/2018/05/07/react-navigation-2.0/index.html @@ -1,4 +1,4 @@ -React Navigation 2.0
The documentation is now live at reactnavigation.org, and v1 lives here.
+React Navigation 2.0
The documentation is now live at reactnavigation.org, and v1 lives here.
Significant breaking changes
The following changes are considered “significant” because they can’t be fixed by search and replace or something that is similarly mechanical.
navigate(routeName) in StackNavigator is “less pushy”
diff --git a/blog/2018/11/01/react-navigation-3.0-rc/index.html b/blog/2018/11/01/react-navigation-3.0-rc/index.html
index 5aeaa23101..8dc96e20cf 100644
--- a/blog/2018/11/01/react-navigation-3.0-rc/index.html
+++ b/blog/2018/11/01/react-navigation-3.0-rc/index.html
@@ -1,4 +1,4 @@
-3.0 release candidate
We are excited to announce the release candidate of version 3.0 today!
+3.0 release candidate
We are excited to announce the release candidate of version 3.0 today!
This is the first release where React Navigation depends on a native module outside of React Native core: it now depends on react-native-gesture-handler. This library provides an excellent set of primitives for leveraging the operating systems’ native gesture APIs and has enabled us to fix a variety of issues with stack and drawer navigators. React Navigation also depends on react-native-screens, but you don’t need to install the native module if you prefer not to use it (we have a blog post coming soon that will explain what react-native-screens is and why you may want to use it, or you can watch this talk by the author of the library).
We didn’t get around to every feature that we wanted to land for this release, but we also didn’t want to hold it up further because we expect that you will want to start using it right away - the release includes performance improvements, bugfixes, ergonomics improvements, some handy new features, and a re-organizing of the internals to improve support for web as a target of React Navigation.
Let’s get started with react-navigation 3.0.
diff --git a/blog/2018/11/17/react-navigation-3.0/index.html b/blog/2018/11/17/react-navigation-3.0/index.html index ddb7fbdbee..ce098ae6b1 100644 --- a/blog/2018/11/17/react-navigation-3.0/index.html +++ b/blog/2018/11/17/react-navigation-3.0/index.html @@ -1,4 +1,4 @@ -React Navigation 3.0
The documentation is now live at reactnavigation.org, and v2 lives here.
+React Navigation 3.0
The documentation is now live at reactnavigation.org, and v2 lives here.
This is the first release where React Navigation depends on a native module outside of React Native core: it now depends on react-native-gesture-handler. This library provides an excellent set of primitives for leveraging the operating systems’ native gesture APIs and has enabled us to fix a variety of issues with stack and drawer navigators. React Navigation also depends on react-native-screens, but you don’t need to install the native module if you prefer not to use it (we have a blog post coming soon that will explain what react-native-screens is and why you may want to use it, or you can watch this talk by the author of the library).
We didn’t get around to every feature that we wanted to land for this release, but we also didn’t want to hold it up further because we expect that you will want to start using it right away - the release includes performance improvements, bugfixes, ergonomics improvements, some handy new features, and a re-organizing of the internals to improve support for web as a target of React Navigation.
Let’s get started with react-navigation 3.0.
diff --git a/blog/2019/09/16/react-navigation-4.0/index.html b/blog/2019/09/16/react-navigation-4.0/index.html index 4f6607c87d..a7bc7e0ae0 100644 --- a/blog/2019/09/16/react-navigation-4.0/index.html +++ b/blog/2019/09/16/react-navigation-4.0/index.html @@ -1,4 +1,4 @@ -React Navigation 4.0
The documentation is now live at reactnavigation.org, and v3 lives here.
+React Navigation 4.0
The documentation is now live at reactnavigation.org, and v3 lives here.
In this release, we have removed the navigators from the react-navigation package. The navigators have lived in separate packages for quite a while and you could already use those packages manually, but we still bundled them in the react-navigation package. This made it difficult for us to release significant updates to navigators, because we had to then do a major version release of react-navigation too. By separating the navigator packages there is more freedom to update and improve navigators without any impact on folks that don't use them.
For example, you will find when you install the latest versions of the drawer and tab navigators that the animations are more performant because they use react-native-reanimated to smoothly animate gestures. These have been available in react-navigation-drawer and react-navigation-tabs for several months now but we delayed updating them in react-navigation itself because we did not want to force every user to update.
With this version, you now install the navigators from their respective packages, which means that you can independently update them.
diff --git a/blog/2019/10/17/react-navigation-native/index.html b/blog/2019/10/17/react-navigation-native/index.html index a2c5efa5f8..f23af37938 100644 --- a/blog/2019/10/17/react-navigation-native/index.html +++ b/blog/2019/10/17/react-navigation-native/index.html @@ -1,4 +1,4 @@ -React Navigation meets native
React Navigation steps firmly into the next level and we’re very excited to announce to you something great happening in React Navigation codebase.
+React Navigation meets native
React Navigation steps firmly into the next level and we’re very excited to announce to you something great happening in React Navigation codebase.
Make it custom
From the very beginning of React Navigation we have been following the important motto to make navigation experience customizable in every detail. We, front-end engineers, mobile developers and User Experience lovers, have a deep need to make decisions about each layout component.
Guided by this idea we (well, not necessarily “we” because I haven’t even written a single line of code this time 😄) made architectural decisions, which might appear controversial for developers with the native background.
diff --git a/blog/2019/11/04/using-react-navigation-5-with-ui-kitten/index.html b/blog/2019/11/04/using-react-navigation-5-with-ui-kitten/index.html index df40512d3f..ce6dfa8706 100644 --- a/blog/2019/11/04/using-react-navigation-5-with-ui-kitten/index.html +++ b/blog/2019/11/04/using-react-navigation-5-with-ui-kitten/index.html @@ -1,4 +1,4 @@ -Using React Navigation 5 with UI Kitten
This is a guest post by the UI Kitten team. If you like this guide, checkout UI Kitten for more! +
Using React Navigation 5 with UI Kitten
This is a guest post by the UI Kitten team. If you like this guide, checkout UI Kitten for more! In this blog post, we'll show a step-by-step guide on using React Navigation 5 with UI Kitten.
Introduction
The new React Navigation comes with several significant improvements such as improving animation performance with gesture-handler and reanimated libraries. What's more, it was migrated to TypeScript for improving the quality of your code base with type checking and more. But the biggest update is migrating to component-based API.
diff --git a/blog/2020/01/29/using-react-navigation-5-with-react-native-paper/index.html b/blog/2020/01/29/using-react-navigation-5-with-react-native-paper/index.html index aaaae9c023..28f74af412 100644 --- a/blog/2020/01/29/using-react-navigation-5-with-react-native-paper/index.html +++ b/blog/2020/01/29/using-react-navigation-5-with-react-native-paper/index.html @@ -1,4 +1,4 @@ -React Navigation v5 + React Native Paper = ❤️
This is a guest post by the React Native Paper team. If you like this guide, check out React Native Paper for more!
+React Navigation v5 + React Native Paper = ❤️
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.
Introduction
The React Navigation v5 comes with many great improvements compared to previous version. It not only provides a cross-platform native Stack, but also the API was redesigned from the ground up to allow things that were never possible before. Thanks to the component-based API, all of the configuration is happening inside the render method. This means we can access props, state and context and can dynamically change configuration for the navigator.
diff --git a/blog/2020/02/06/react-navigation-5.0/index.html b/blog/2020/02/06/react-navigation-5.0/index.html index af724af7c4..e9eafe359f 100644 --- a/blog/2020/02/06/react-navigation-5.0/index.html +++ b/blog/2020/02/06/react-navigation-5.0/index.html @@ -1,4 +1,4 @@ -React Navigation 5.0 - A new way to navigate
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.
+React Navigation 5.0 - A new way to navigate
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 led us to the moment when React Navigation became one of the most popular navigation solutions in React Native and we are incredibly proud of it.
Today is the day, when we want to mark this vision and major refactoring of the project, that has taken place over the last six months, as stable. One could say that this significant change concerned the core library, and therefore the API, which has been developed and made more dynamic.
Highlights
diff --git a/blog/2020/05/16/web-support/index.html b/blog/2020/05/16/web-support/index.html index a7d301de6b..284f9ae365 100644 --- a/blog/2020/05/16/web-support/index.html +++ b/blog/2020/05/16/web-support/index.html @@ -1,4 +1,4 @@ -React Navigation on the Web
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!
+React Navigation on the Web
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.
Integration with URLs in browsers
diff --git a/blog/2020/05/19/joining-github-sponsors/index.html b/blog/2020/05/19/joining-github-sponsors/index.html index 9ec2622ba5..e966ff47e2 100644 --- a/blog/2020/05/19/joining-github-sponsors/index.html +++ b/blog/2020/05/19/joining-github-sponsors/index.html @@ -1,4 +1,4 @@ -React Navigation joins GitHub Sponsors
tl;dr: We joined GitHub Sponsors, click here to see our sponsors page and become a sponsor!
+React Navigation joins GitHub Sponsors
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).
diff --git a/blog/2021/03/12/react-navigation-6.0-next/index.html b/blog/2021/03/12/react-navigation-6.0-next/index.html index 40b9fe7291..d9ec07f69d 100644 --- a/blog/2021/03/12/react-navigation-6.0-next/index.html +++ b/blog/2021/03/12/react-navigation-6.0-next/index.html @@ -1,4 +1,4 @@ -On the way to React Navigation 6.0
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.
+On the way to React Navigation 6.0
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.
While React Navigation 5 was complete overhaul to the API of React Navigation, React Navigation 6 keeps the same API, with some breaking changes to make things more consistent and provide more flexibility. We also tried to address some common pain points and confusions that users had.
We'll share few highlights of the release in this blog post. If you're looking for a detailed upgrade guide, you can find it here.
Highlights
diff --git a/blog/2021/08/14/react-navigation-6.0/index.html b/blog/2021/08/14/react-navigation-6.0/index.html index b043c74078..da4e2a5f09 100644 --- a/blog/2021/08/14/react-navigation-6.0/index.html +++ b/blog/2021/08/14/react-navigation-6.0/index.html @@ -1,4 +1,4 @@ -React Navigation 6.0
The documentation is now live at reactnavigation.org, and v5 lives here.
+React Navigation 6.0
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.
Highlights
More flexible navigators
diff --git a/blog/2024/03/25/introducing-static-api/index.html b/blog/2024/03/25/introducing-static-api/index.html index 839affd02d..d51f9bf2bc 100644 --- a/blog/2024/03/25/introducing-static-api/index.html +++ b/blog/2024/03/25/introducing-static-api/index.html @@ -1,4 +1,4 @@ -Introducing Static API
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.
+Introducing Static API
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 static API it’s an additional optional API. The dynamic API isn’t going away and will remain a first-class API of React Navigation. In fact, the static API is written entirely on top of the dynamic API.
Overview
diff --git a/blog/2024/06/27/react-navigation-7.0-rc/index.html b/blog/2024/06/27/react-navigation-7.0-rc/index.html index 93d5c1dff1..d62102badf 100644 --- a/blog/2024/06/27/react-navigation-7.0-rc/index.html +++ b/blog/2024/06/27/react-navigation-7.0-rc/index.html @@ -1,4 +1,4 @@ -React Navigation 7.0 Release Candidate
We're excited to announce the release candidate of React Navigation 7.0.
+React Navigation 7.0 Release Candidate
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.
You can read the full list of changes in the upgrade guide. Here are some highlights: