Learn Smooth Navigation in React Native!

#5 - Add React Navigation | React Native open-source eCommerce App

AI-generated summary and notes. Check quotations, numbers, and important claims against the source video. Captions may contain errors.

Watch the source video on YouTube

Estimated reading time: 5 minutes for the text on this page.

Summary

In this insightful tutorial, Dima Portenko walks us through the process of adding navigation to a React Native open-source eCommerce app using the React Navigation library. The video starts by guiding viewers through installing the necessary dependencies, including the setup for Expo and the installation of pods. Dima emphasizes the importance of importing the react-native gesture-handler before loading the root component and wrapping the navigation inside the NavigationContainer. He demonstrates creating components for stack navigation, importing the necessary modules, and rendering the components to display a basic home screen. Dima concludes with organizing routes into separate files, adjusting titles using screen options, and a promise of more tutorials in the future.

Highlights

Adding navigation with the React Navigation library is straightforward when following simple steps. 📘
Installing necessary dependencies is crucial, especially when using Expo and pods. 🔧
Creating separate components for navigation helps in maintaining a clean project structure. 🏗️
Utilizing stack navigation allows for an organized screen management system. 🗂️
Title customization can be done seamlessly using screen options, elevating the user interface. ✨

Key Takeaways

You'll learn how to integrate React Navigation into a React Native e-commerce app. 🚀
Understand the organization of navigation components within the code structure. 📂
Discover how to create stack navigation and manage routes efficiently. 🛤️
See the practical use of screen options to customize the display titles. 🎨

Overview

Welcome to Dima Portenko’s video, where he unveils the magic of adding navigation to your React Native app using the powerful React Navigation library. He starts the session by showing how easy it is to get started with a few installations, primarily focusing on the expo and pod configurations.

Dive into the details as Dima guides you through the setup process. He meticulously crafts a directory and separates components to enhance the project’s scalability and readability. Witness the transformation from an ordinary app to one equipped with dynamic navigation using stack navigation for optimal screen transitions.

In the final stretch, the focus shifts to refining the navigation experience by tweaking screen titles and organizing routes into dedicated files. This setup not only tidies up the code but also makes the app more intuitive for both developers and users. Stay tuned for more as Dima promises to dive deeper in upcoming videos!

#5 - Add React Navigation | React Native open-source eCommerce App Transcription

00:00 - 00:30 hello everybody in this video i'm going to add navigation i'm going to use react navigation library so let's check it stocks and getting started so to add we need follow the steps let's do this
00:30 - 01:00 and simply install required dependency it's for the expo and we need this copy install then we need to install pods
01:00 - 01:30 and we need import react native gesture handler before our root component loaded let's add it to the index.js before up component and we need to wrap
01:30 - 02:00 our navigation in the navigation container let's create a separate component for this let's create src directory and navigation and here component
02:00 - 02:30 navigation let's pass the code from example here and next we need to add some screens here i will use stack navigation for start
02:30 - 03:00 so we also need to install it and here is the sample we can just copy it import view and
03:00 - 03:30 text from react native create stack and let's put our stack and separate
03:30 - 04:00 component let's name it root stack and render it inside navigation container okay
04:00 - 04:30 look like this let's run it and we should able to see home screen with home header and home screen text need to wait for build okay it's built it
04:30 - 05:00 and yeah we still see our objects code we don't need it anymore here so we can just place navigation component instead we don't we're not using styles anymore
05:00 - 05:30 so just delete it insert our import of component and let's check okay we see header with title and our home screen component okay let's create separate screen component we will start with
05:30 - 06:00 category screen so let's do this directory components and let's name another directory categories and component continuous screen
06:00 - 06:30 let's just put the output of it let's rename it categories it looks correct remove home screen here import category screen
06:30 - 07:00 and name it's also route so i want to put all my routes in separate file let's name it routes and just export const
07:00 - 07:30 navigation diggers route and simply same string okay and let's use it let's import all routes first
07:30 - 08:00 and use it instead of name routes navigation category route yeah we see it's working but now title is not what we want to see let's fix this and go to the documentation again search for title and
08:00 - 08:30 yeah we can use options for screen component let's add our options here and put titles categories yeah and now it's categories that's it we'll see you in the next videos