<!-- mobian-agent-page publisher="dailydev" canonical="https://daily.dev/posts/react-navigation-5-0---a-new-way-to-navigate-jwjltesri" -->

---
title: React Navigation 5.0 - A new way to navigate | daily.dev
description: React Navigation 5.0 introduces a full rewrite with component-based dynamic configuration replacing static navigationOptions, new hooks, a setOptions method...
canonical: https://daily.dev/posts/react-navigation-5-0---a-new-way-to-navigate-jwjltesri
twitter:card: summary_large_image
twitter:site: @dailydotdev
og:type: website
og:site_name: daily.dev
og:title: React Navigation 5.0 - A new way to navigate | daily.dev
og:description: React Navigation 5.0 introduces a full rewrite with component-based dynamic configuration replacing static navigationOptions, new hooks, a setOptions method...
og:url: https://daily.dev/posts/react-navigation-5-0---a-new-way-to-navigate-jwjltesri
og:image: https://api.daily.dev/og/posts/JWjltEsrI.png
og:image:alt: React Navigation 5.0 - A new way to navigate
og:image:width: 1200
og:image:height: 630
og:locale: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# React Navigation 5.0 - A new way to navigate

**[React Navigation](https://daily.dev/sources/react-navigation)** · 7 min read · 0 upvotes · 0 comments

## Summary

React Navigation 5.0 introduces a full rewrite with component-based dynamic configuration replacing static navigationOptions, new hooks, a setOptions method for updating screen options from within components, a revamped theming API, first-class TypeScript support, Redux DevTools integration for navigation state, a new native stack navigator using react-native-screens, and native backends for the Material top tab navigator. The new API is largely incompatible with version 4, but the 4.x branch will continue receiving bug fixes and compatibility updates. An upgrade guide is provided, along with notes for developers who used the alpha releases (renamed imports and changed deep linking config format).

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://reactnavigation.org/blog/2020/02/06/react-navigation-5.0>

## Questions this post answers

### What changed in React Navigation 5 compared to version 4?

React Navigation 5 replaces the static createXNavigator and static navigationOptions configuration with dynamic, component-based configuration, giving access to props, state, and context inside navigators. It also adds new hooks, a navigation.setOptions method, a revamped theming API, ground-up TypeScript support, Redux DevTools integration, and a native stack navigator built on react-native-screens. The new API is largely incompatible with version 4.

_Teams planning a React Navigation upgrade can track breaking API changes like this on daily.dev._

### Is React Navigation 4 still supported after version 5 released?

Yes, React Navigation 4 continues to receive bug fixes and stays compatible with the latest React Native versions, with its code maintained on the 4.x branch on GitHub. New projects are recommended to start on version 5 to take advantage of the new APIs, and an upgrade guide is available for migrating existing 4.x codebases.

_Developers weighing when to migrate a codebase follow library support timelines like this on daily.dev._

### What should I fix if I was using React Navigation 5 alpha before it stabilized?

Remove @react-navigation/core from dependencies and replace those imports with @react-navigation/native. Rename NavigationNativeContainer to NavigationContainer, and rename the old NavigationContainer to BaseNavigationContainer. Also update deep linking configuration, since the nesting format changed between the alpha and stable releases.

_Anyone untangling breaking changes between alpha and stable releases can find guides like this on daily.dev._

## Similar posts on daily.dev

- [React Navigation 8.0 - July Progress Report](https://daily.dev/posts/react-navigation-8-0---july-progress-report-zwpb6nosh) · React Navigation · 7 upvotes · 2 comments
- [React Navigation 8.0 Alpha with Native Bottom Tabs, Reworked TypeScript Inference and History](https://daily.dev/posts/react-navigation-8-0-alpha-with-native-bottom-tabs-reworked-typescript-inference-and-history-baby9kbnm) · InfoQ · 6 upvotes · 1 comments
- [Making React Native actually native](https://daily.dev/posts/making-react-native-actually-native-bdan1xdzt) · Bytes by ui.dev · 2 upvotes · 0 comments
- [Less Boilerplate, More Type Safety: React Navigation 8's Typed Hooks](https://daily.dev/posts/less-boilerplate-more-type-safety-react-navigation-8-s-typed-hooks-kriqcazi2) · Callstack Blog · 1 upvotes · 0 comments

---

Tags: [#react](https://daily.dev/tags/react), [#mobile](https://daily.dev/tags/mobile), [#typescript](https://daily.dev/tags/typescript), [#react-native](https://daily.dev/tags/react-native), [#react-hooks](https://daily.dev/tags/react-hooks)

[View this post on daily.dev](https://daily.dev/posts/react-navigation-5-0---a-new-way-to-navigate-jwjltesri)

```json
{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]}
{"@context":"https://schema.org","@type":"TechArticle","headline":"React Navigation 5.0 - A new way to navigate","url":"https://daily.dev/posts/react-navigation-5-0---a-new-way-to-navigate-jwjltesri","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/react-navigation-5-0---a-new-way-to-navigate-jwjltesri"},"datePublished":"2026-08-23T12:22:38.452Z","dateModified":"2026-08-23T12:48:22.146Z","description":"React Navigation 5.0 introduces a full rewrite with component-based dynamic configuration replacing static navigationOptions, new hooks, a setOptions method...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/2cb5a266a09c2095f5194cd07eb12a75?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/2cb5a266a09c2095f5194cd07eb12a75?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"React Navigation","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"React Navigation","logo":"https://media.daily.dev/image/upload/s--d1x9LTh1--/c_limit,w_256/f_auto,q_auto/v1787487486/logos/react-navigation?_a=BAMAMicg0","url":"https://daily.dev/sources/react-navigation"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/react-navigation-5-0---a-new-way-to-navigate-jwjltesri","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"react,mobile,typescript,react-native,react-hooks","timeRequired":"PT7M"}
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"React Navigation","item":"https://daily.dev/sources/react-navigation"},{"@type":"ListItem","position":3,"name":"React Navigation 5.0 - A new way to navigate"}]}
{"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/react-navigation-5-0---a-new-way-to-navigate-jwjltesri#faq","mainEntity":[{"@type":"Question","name":"What changed in React Navigation 5 compared to version 4?","acceptedAnswer":{"@type":"Answer","text":"React Navigation 5 replaces the static createXNavigator and static navigationOptions configuration with dynamic, component-based configuration, giving access to props, state, and context inside navigators. It also adds new hooks, a navigation.setOptions method, a revamped theming API, ground-up TypeScript support, Redux DevTools integration, and a native stack navigator built on react-native-screens. The new API is largely incompatible with version 4. Teams planning a React Navigation upgrade can track breaking API changes like this on daily.dev."}},{"@type":"Question","name":"Is React Navigation 4 still supported after version 5 released?","acceptedAnswer":{"@type":"Answer","text":"Yes, React Navigation 4 continues to receive bug fixes and stays compatible with the latest React Native versions, with its code maintained on the 4.x branch on GitHub. New projects are recommended to start on version 5 to take advantage of the new APIs, and an upgrade guide is available for migrating existing 4.x codebases. Developers weighing when to migrate a codebase follow library support timelines like this on daily.dev."}},{"@type":"Question","name":"What should I fix if I was using React Navigation 5 alpha before it stabilized?","acceptedAnswer":{"@type":"Answer","text":"Remove @react-navigation/core from dependencies and replace those imports with @react-navigation/native. Rename NavigationNativeContainer to NavigationContainer, and rename the old NavigationContainer to BaseNavigationContainer. Also update deep linking configuration, since the nesting format changed between the alpha and stable releases. Anyone untangling breaking changes between alpha and stable releases can find guides like this on daily.dev."}}]}
```