Newby Coder header banner

React Native Navigation

Navigation refers to the interactions that allow users to be routed across different parts of content within an application

Navigation between different screens or pages in an application is typically a core part of user experience

Navigation can be associated with states, or can act like links to route to different views

Applications with Navigation

Following are some Navigation related applications

Navigation Drawer

A navigation drawer is a UI panel which displays a menu typically containing the primary navigation options for an application

The drawer is hidden by default and appears when a user touches any visible drawer icon or through a gesture like swipe

Platform: Android & iOS

cl-react-native-navigationcm-react-native-navigation-drawer-as2

Check Navigation Drawer application

Tabs

Tabs allow to group content according to some criteria which can be a factor for smooth user experience

Platform: Android & iOS

cl-react-native-tabs-appcm-react-native-tabs-as2

Check Tabs Application

Viewpager

A Viewpager allows to view the pages of an application by scrolling horizontally or vertically

Platform: Android & iOS

cl-react-native-viewpagercm-react-native-viewpager-as2

Check Viewpager Application example code

Passing data between screens

There are multiple ways of passing data between screens like using props of components and implementing local storage

Platform: Android & iOS

cl-react-native-screen-data-transfercm-react-native-screen-data-transfer-as5

Check Viewpager Application example code

Video

Getting Started with React Navigation v5 - Stack, Tabs, Drawer, Authentication

React Navigation Setup