In this course we are going to use Expo for quick and easy setup. To initialize a project with Expo you need to first install the CLI.
npm install expo-cli --global
This course is already setup with Expo but if you were to start a new project you'd run the following command and you'd be ready to go with a new React Native project.
expo init project_name
The docs of React Navigation are solid and walk through what you need to install Installation Docs.
But we'll walk through what you need to install and what each view is used for.
First we need to install the latest base of React Navigation which is the @react-navigation/native package.
yarn add @react-navigation/native
Once installed use the expo install command to install the rest of the dependencies. The reason we use the expo install command rather than yarn or npm is that when dealing with the "Managed Workflow" in Expo the Expo app ships with specific dependency versions.
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
yarn add @react-navigation/stack @react-navigation/drawer @react-navigation/bottom-tabs
The @react-navigation/native is the base of all the other navigators. It defines course sets of principles that can be used to create even your own navigators if the ones provided do not suit your needs.
The react-native-gesture-handler is a native gesture handling library built by Software Mansion. It provides native-driven gesture management that allows React Navigation to provide truly native detection of gestures for smoother transitions for you and your users.
The react-native-reanimated is another library built by the folks at Software Mansion. It provides a set of primitive to declare native animations. This allows for minimal bridge traffic. Not only that is it integrates with react-native-gesture-handler. So combined the gestures and animations in React Navigation are all native.
At the time of writing this React Navigation still uses Reanimated 1, but I imagine will transition to Reanimated 2 at some point. But there are some hard requirements for Android (like only supporting Hermes engine).
The react-native-screens is unlikely to be used but if you use createNativeStackNavigator then you will be utilizing react-native-screens. 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.
With all the new types of phones with different types of notches, the react-native-safe-area-context provides a way to get all the necessary information to render the navigation views without issue. It will return insets top, left, right, and bottom for where React Navigation can safely render. If necessary your own app can hook into it.
The @react-native-community/masked-view package is used primarily for matching native style transitions for back buttons.
The @react-navigation/stack is used for classic navigation structures. A set of screens of which each can be given a name. Each screen that is declared are pushed onto a stack, like a stack of cards. The order is kept, and you can add a single screen to the stack or many of the same screen.
The @react-navigation/drawer is used for swipeable drawers, both left, and right hand sides.
The @react-navigation/bottom-tabs and other tab libraries are used to provide a set of views where the navigation controls are on the bottom/top.
In this course we are going to use Expo for quick and easy setup. To initialize a project with Expo you need to first install the CLI.
npm install expo-cli --global
This course is already setup with Expo but if you were to start a new project you'd run the following command and you'd be ready to go with a new React Native project.
expo init project_name
The docs of React Navigation are solid and walk through what you need to install Installation Docs.
But we'll walk through what you need to install and what each view is used for.
First we need to install the latest base of React Navigation which is the @react-navigation/native package.
yarn add @react-navigation/native
Once installed use the expo install command to install the rest of the dependencies. The reason we use the expo install command rather than yarn or npm is that when dealing with the "Managed Workflow" in Expo the Expo app ships with specific dependency versions.
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
yarn add @react-navigation/stack @react-navigation/drawer @react-navigation/bottom-tabs
The @react-navigation/native is the base of all the other navigators. It defines course sets of principles that can be used to create even your own navigators if the ones provided do not suit your needs.
The react-native-gesture-handler is a native gesture handling library built by Software Mansion. It provides native-driven gesture management that allows React Navigation to provide truly native detection of gestures for smoother transitions for you and your users.
The react-native-reanimated is another library built by the folks at Software Mansion. It provides a set of primitive to declare native animations. This allows for minimal bridge traffic. Not only that is it integrates with react-native-gesture-handler. So combined the gestures and animations in React Navigation are all native.
At the time of writing this React Navigation still uses Reanimated 1, but I imagine will transition to Reanimated 2 at some point. But there are some hard requirements for Android (like only supporting Hermes engine).
The react-native-screens is unlikely to be used but if you use createNativeStackNavigator then you will be utilizing react-native-screens. 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.
With all the new types of phones with different types of notches, the react-native-safe-area-context provides a way to get all the necessary information to render the navigation views without issue. It will return insets top, left, right, and bottom for where React Navigation can safely render. If necessary your own app can hook into it.
The @react-native-community/masked-view package is used primarily for matching native style transitions for back buttons.
The @react-navigation/stack is used for classic navigation structures. A set of screens of which each can be given a name. Each screen that is declared are pushed onto a stack, like a stack of cards. The order is kept, and you can add a single screen to the stack or many of the same screen.
The @react-navigation/drawer is used for swipeable drawers, both left, and right hand sides.
The @react-navigation/bottom-tabs and other tab libraries are used to provide a set of views where the navigation controls are on the bottom/top.