SERIES: React Native (Step by Step) — Nested Navigation, Persistent Redux Store and Returning Users

Nested Navigation inside a screen

  • @react-navigation/material-top-tabs
  • react-native-pager-view
  • react-native-tab-view
expo install @react-navigation/material-top-tabs react-native-pager-view react-native-tab-view

Nested Navigation inside a navigator as a screen

expo install @react-navigation/bottom-tabs

Adding Persistence to our Redux Store

expo install redux-persist @react-native-async-storage/async-storage

Persisted Login in our Navigation Flow

  • => start with Auth Stack
  • Splash
  • AppCheck
  • Login/SignUp (skip when already logged in)
  • AppLoading
  • => switch to App Stack
  • Home / Settings / etc

A new slice for our store

Navigating based on state

Wrapping Up

Some words about me:

--

--

--

I’m a Web / App Developer & father 👨‍👩‍👧 doing freelance and part-time agency work since 2003, 💻 building stuff on the side 🕹 and attending conferences 🎟

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

State Management with React Hooks and Context API

State Management with React Hooks and Context API

New Service: Photoview!

Build beautiful React Components from NPM Packages in minutes

HTML5 Canvas Rectangles and Colors

Essential Tooling for Javascript Developers: Advanced Webpack and Babel

Configure i18n with Angular 12

Free Online Courses for Learning JavaScript

Helping asylum representatives build winning cases for refugees

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Konrad Abe

Konrad Abe

I’m a Web / App Developer & father 👨‍👩‍👧 doing freelance and part-time agency work since 2003, 💻 building stuff on the side 🕹 and attending conferences 🎟

More from Medium

How to configure ESLint and Prettier for Expo projects

How to fix “RNCSafeAreaProvider” was not found in the UIManager Error

Workflow: From excel translations to multi-language React (Native) app

REACT NATIVE & Its Working Principle