React Navigation with TypeScript in React Native Mobile App

An introduction to React Navigation in a React Native mobile app project using TypeScript. Learn how nested navigation in TypeScript works and the basics of maintaining consistent navigation.

In this React Native tutorial Jess Stodola, Developer at Headway will teach you everything you need to know to understand nested navigation and avoid any unexpected navigation behavior. 🙌

Learn how to set up React Navigation in a React Native project using TypeScript, routing for modals and nested navigation, type declaration for navigation, and route props.

Access the Code From This Video

Segments:
00:00 - Introduction
00:10 - Agenda for This Tutorial
00:45 - Types of Navigators
01:55 - Walkthrough
18:00 - Questions
18:17 - Common Mistakes with React Navigation
20:07 - Expo or Vanilla React Native?
20:28 - Tips for Developers Coming to React Native from React Web
20:58 - Typescript vs JavaScript
22:17 - Going from React to React Native
23:33 - Resources for React Native and TypeScript
28:26 - Microsoft CodePush for Testing
28:50 - Jess' Journey into Development
33:40 - Event - From Idea to Venture Launch

Event Link -

============
Resources
============
Typescript Documentation
Nesting Navigators Documentation
Modal Documentation‍

TypeScript Weekly
The best TypeScript links every week, right in your inbox.

React Status
A weekly roundup of the latest React and React Native links and tutorials.‍

React Native Testing Tools
BitBar
Testing Intelligence for DevOpsThe most flexible cloud-based mobile app testing solution. Use any framework to run manual or automated tests on thousands of real devices. With unlimited users and unlimited concurrency, adapting seamlessly to your existing CI/CD processes and tools.

CodePush
A cloud service that enables Cordova and React Native developers to deploy mobile app updates directly to their users' devices.

[headwayio]

Access the Code From This Video

Segments:
00:00 - Introduction
00:10 - Agenda for This Tutorial
00:45 - Types of Navigators
01:55 - Walkthrough
18:00 - Questions
18:17 - Common Mistakes with React Navigation
20:07 - Expo or Vanilla React Native?
20:28 - Tips for Developers Coming to React Native from React Web
20:58 - Typescript vs JavaScript
22:17 - Going from React to React Native
23:33 - Resources for React Native and TypeScript
28:26 - Microsoft CodePush for Testing
28:50 - Jess' Journey into Development
33:40 - Event - From Idea to Venture Launch

[anknara]

OMG....finally. Someone who explains clearly. Thank you so much for this

[zb]

Really nice high-level overview walkthrough of react navigation using typescript - thank you.

[TheKrzyh]

The tutorial helped me a lot, so thank you!

Following everything was a bit hard, due to different types of navigation (and I'm a complete RN noob). How it could be easier for me to digest:
- Setup base Navigator with one screen
- Add screens step by step, explaining types along the way
- Introduce TabNavigator
- Introduce modals
I'm a fan of the iterative approach to explaining concepts, I believe such form is more newbie-friendly (one-thing-at-a-time). Nevertheless, big thanks :)

[humbertoromanojr]

thanks very much friends, this video help me a fixing error navigation

[youneshenni]

Great stuff. But cursor was too small and dark I had difficulty knowing where you are. Also increase font size in VSCode pls. Much appreciated.

[abhishekvenu]

I'm getting error for navigation.navigate()
Can you explain what is going wrong

Argument of type '["GitSearch", { screen: string; params: { url: string; }; }]' is not assignable to parameter of type '["GitSearch"] | ["GitSearch", undefined]'.
Type '["GitSearch", { screen: string; params: { url: string; }; }]' is not assignable to type '["GitSearch", undefined]'.
Type '{ screen: string; params: { url: string; }; }' is not assignable to type 'undefined'.ts(2345)

[csapiyushjoshi]

doesnt ts makes react native more difficult

[Ntamakoupa]

No offense but I feel more lost after watching 15 minutes than I did before. Might be good to be more prepared next time and go through some flow instead and explain why you're doing what you're doing instead of looking at a piece of paper and reading.