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

React JS Sharif Ahmed

Native Stack Navigator and Stack Navigator are two types of navigators for React Applications.


Stack Navigator: Stack Navigator allows your app to transition between screens by stacking each new screen on top of the previous one. It's highly customizable, and it's written in JavaScript. While it uses natively to run animations and gestures, the performance may not be as good as a native implementation. It does not really "navigate", but instead will mimic navigation in HTML/JavaScript. They say they try to make it feel like the native navigation, but it may not exactly be the same or as performant.
You need to import it in this way,

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

Here is the official documentation of Stack Navigator


Native Stack Navigator: Native Stack uses the Android and IOS native navigation systems to navigate between pages. This navigator uses the native APIs UINavigationController on iOS and Fragment on Android to ensure that navigation generated with createNativeStackNavigator behaves precisely like apps developed natively on top of those APIs and has the same performance characteristics. If you need more customization on your navigation it is hard to customize.
You need to import it in this way,

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

Here is the official documentation of Native Stack Navigator


Thank you for reading the article. If you have any suggestions or queries you can comment below. Your comment is always important to us.