55

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()
John Stuart
  • 950
  • 5
  • 11
  • 28

2 Answers2

53

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.

user56reinstatemonica8
  • 32,576
  • 21
  • 101
  • 125
Max
  • 1,536
  • 1
  • 14
  • 18
  • what kind of customerization is limited for native stack please? – MartianMartian Jan 07 '22 at 00:13
  • Just transitions I think. If you want consistent custom page change animations. Can´t think of anything else you´d want to customize. – Max Jan 10 '22 at 13:43
  • This comment contains misleading information. The non-native stack navigator is absolutely not using HTML to mimick native navigation; it uses native views that the team at @react-navigation have created, that are different from the standard navigation views, and use these to perform navigation. – jorgenfar Sep 19 '22 at 14:41
  • Depends on how you define as native. It would be a native react component. As in it´s written in react for react, therefore native to react. At the end of the day that means it compiles/transpiles to HTML/CSS and JS. Though, under native navigation on Android in this context I would understand it navigating between two Activities. Which that is not doing. – Max Sep 19 '22 at 15:53
  • Not saying it´s bad even people writing native Android apps (in kotlin or java) often use androidx.navigation these days which will result in a Single Activity app. Once again they do this so they are able to customize transitions. And in Androids case also to not have to worry about the Activity vs Fragment lifecycle. It´s easier to work with if everything is a Fragment. On IOS I have no idea either, so can´t give an example there. But it´s gonna be very different as neither Activities, nor Fragments exist. – Max Sep 19 '22 at 16:00
  • 2
    probs worth mentioning that native navigation being more performant means your app is less susceptible to jank (layout flickering and such). `Whereas everything that´s web based you can easiely test in your browser, which tends to be much faster for developement speed` This is completely false - emulator dev can be just as fast b/c it has hot module reloading plus it's more accurate. If you're developing native apps you should use an emulator b/c then you know what your app actually looks like on a phone. This is *very* bad advice – ICW Jan 04 '23 at 01:48
  • Use native stack navigator unless you have a good reason not too (if you care about your user and the quality of your application). If you don't care, there's not really any reason to use React Native in the first place, just make a PWA and/or wrap it in a web view. – ICW Jan 04 '23 at 01:52
9

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/

Karl Adler
  • 15,780
  • 10
  • 70
  • 88