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

Question

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 ?

• @react-navigation/stack - 301,111 Weekly Downloads
• @react-navigation/native-stack - 24,830 Weekly Downloads

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

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

Answer 1

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 mimick navigation in HTML/JavaScript (SPA essentially). 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 inpractible 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 easiely test in your browser, which tends to be much faster for developement speed.

Answer 2

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/