CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
John Stuart
John Stuart

Reputation: 1150

What is the difference between @react-navigation/stack vs @react-navigation/native-stack?

What is the difference between @react-navigation/stack vs @react-navigation/native-stack ?

Is @react-navigation/stack is only for react applications and @react-navigation/native-stack is for only react native application ?

import { createStackNavigator } from '@react-navigation/stack'
const Stack = createStackNavigator()

import { createNativeStackNavigator } from '@react-navigation/native-stack'
const Stack = createNativeStackNavigator()

Upvotes: 62

Views: 32626

Answers (2)

Max
Max

Reputation: 1715

Native Stack uses the Android and IOS native navigation systems to navigate between pages.

Native Stack Navigator https://reactnavigation.org/docs/native-stack-navigator/

Stack Navigator https://reactnavigation.org/docs/stack-navigator/

The other one does not really "navigate", but instead will mimic navigation in JavaScript and generic Views (a bit like how "Single-Page Application" web apps mimic web navigation). They say they try to make it feel like the native navigation, but it may not exactly be the same or as performant. However, it will be significantly more customizable. You can customize your transitions between pages. With the native approach its gonna be impractical to impossible to customize a lot of things. What you can customize, you will need to do once for every OS (Android, IOS) unless the navigation library provides a way to customize what you want and deals with OS differences.

Generally when people want to make cross platform apps. Wherever sensible they tend to gravitate towards javascript based solutions. Using native approaches only when absolutely necessary. It´s great that react native gives you the ability to tap into native apis. But using native approaches forces you to also use a physical phone (or emulator) to test those features (properly). Whereas everything that´s web based you can easily test in your browser, which tends to be much faster for development speed.

Upvotes: 60

Karl Adler
Karl Adler

Reputation: 16826

From the Docs, highlighted the most important things:

This navigator uses the native APIs UINavigationController on iOS and Fragment on Android so that navigation built with createNativeStackNavigator will behave exactly the same and have the same performance characteristics as apps built natively on top of those APIs. It also offers basic Web support using react-native-web.

One thing to keep in mind is that while @react-navigation/native-stack offers native performance and exposes native features such as large title on iOS etc., it may not be as customizable as @react-navigation/stack depending on your needs. So if you need more customization than what's possible in this navigator, consider using @react-navigation/stack instead - which is a more customizable JavaScript based implementation.

source: https://reactnavigation.org/docs/stack-navigator/

Upvotes: 12

Related Questions