React Native Full 8 Hours Course (Expo, Expo Router, Supabase) 

This is hands down the best introduction to a framework, I have ever seen. You cover everything that people are wondering about and keep it concise nevertheless. And due to the pacing that is on point, I can keep watching without getting bored, which is a huge issue for me with most other tutorials.

i can't say anything, just thank you vadim for all effort what you give to us thanks a lot

00:02 Learn to build full-stack food ordering app using React Native and Supabase. 02:14 Focus on backend development with Supabase for easy implementation of features like authentication, database design, query, mutation, image uploading, and real-time updates. 06:42 Expo allows building projects without setting up Android Studio or Xcode 09:00 Running the development server and testing the application on physical and emulator devices 13:52 Using Git to manage project changes 16:13 Understanding the app directory and its relationship to screens. 20:36 Using reusable colors and importing constants for consistent design 22:49 Accessing JavaScript variables inside GSX syntax. 27:16 Creating custom components in React Native 29:28 Creating and using custom components in React Native. 33:39 Moving components to separate files for best practice 35:56 Creating type-safe components with TypeScript 40:37 Using default or fallback image for missing product image 42:49 Enabling TypeScript path AL support in app.json and creating aliases in TS config for mapping 47:15 Easy to render a scrollable list of items using FlatList 49:30 Fixing layout issues and introducing grid layout 53:56 Creating separate screen for product details 56:14 Creating deep links for mobile navigation 1:00:38 Creating dynamic routes with React Native and Expo Router 1:02:51 Creating a nested Navigator for grouping screens within the tabs Navigator. 1:07:35 Adding an index screen inside the folder is essential for navigation. 1:09:50 Configuring navigation and hiding header 1:14:19 Working with Expo router and rendering product details 1:16:31 Handling undefined products and image rendering in React Native 1:21:05 Rendering a list of items using map operator 1:23:22 Styling and layout adjustments for views in React Native 1:28:01 Using conditional styles and state in React Native component rendering 1:30:18 How to update selected item and use state variables 1:34:56 Implementing the shopping cart feature with React context for data sharing 1:37:03 Configuring header and navigation in React Native 1:41:32 Creating a context provider and consumer in React Native 1:44:02 Using card provider component to wrap screens in the application. 1:48:54 Creating and using context in React Native 1:51:16 Implementing items and add item inside our card provider 1:55:49 Creating and adding new items to the cart 1:58:03 Adding functionality to the card list item. 2:02:40 Implement logic to merge and increment quantity of card items. 2:04:57 Adding update quantity function to card context for quantity management 2:09:39 Updating and filtering items in the array. 2:12:01 Checking and updating cart items based on product and size 2:16:41 Implementing order creation and management 2:18:50 Admin side features include product creation, updates, and filtering between active and archived items 2:23:31 Understanding navigation in React Native 2:25:48 Using segments to redirect to different screens based on user actions. 2:30:27 Creating a new screen for product creation 2:32:37 Styling input and label elements 2:37:10 Adding custom input validation for forms 2:39:32 Basic input validation and rendering an image 2:44:05 Implementing image selection, editing, form validation, and setting state in a React Native app. 2:46:34 Creating and updating item screens navigation and dynamic parameters 2:51:12 Updating form validation and prefilling input forms 2:53:21 Using React Native's alert component for confirmation dialogues 2:57:42 Creating custom components and navigation structure in React Native. 2:59:50 Implementing backend and authentication with Supabase 3:03:57 Implementing screen navigation and authentication logic. 3:06:03 Creating folder structure for wers and updating layout 3:10:27 Using day.js library to parse and display dates 3:12:42 Creating the order details page and obtaining the ID from search parameters. 3:17:15 Rendering order items in a list 3:19:30 Managing scrolling with flatlist and list header component 3:23:42 Creating a selector for order status 3:25:48 Implementing nested Navigator for managing list of orders 3:30:23 Using SafeAreaView from React Native Safe Area Context 3:32:34 Implementation of backend with Supabase for mobile app 3:36:50 Setting up Superbase and configuration 3:39:04 Creating an account using the sign up flow 3:43:28 Implementing sign in functionality with Supabase 3:45:41 Creating an authentication provider for managing user sessions 3:50:17 Using session imported from Supabase Library for user authentication. 3:52:23 Implement loading state for session fetch 3:56:56 Protecting authentication screens and implementing basic authentication flows. 3:59:12 Setting additional parameters for user profiles and group-based authentication 4:03:31 Fetching profile information from Superbase and redirecting based on user group 4:05:43 Setting up admin and user profiles 4:10:25 Creating and designing the product table for CRUD operations 4:12:36 Setting up and querying a new table in Superbase 4:16:56 Protect routes for authenticated users 4:19:08 Leveraging caching mechanism with react query and query provider 4:23:34 React Query manages loading, data, error states, and optimizes queries automatically. 4:25:44 Using the custom hook 'useProductList' for querying and rendering data, making components lean. 4:30:20 Parsing and processing ID for product retrieval. 4:32:26 Implementing CRUD operations for products and admin functionality. 4:37:14 Using the insert product function to save data in the database 4:39:30 Using on success function to update the UI after creating a new product. 4:44:17 Using the update product function and passing the ID parameter. 4:46:46 Updating product details and handling related errors 4:51:37 Handling routing and error management in Superbase 4:53:58 Configuring TypeScript integration with Supabase 4:58:38 Using helper functions and types to integrate with Superbase in TypeScript. 5:01:02 Implementing CRUD operations for orders in the application. 5:05:23 Creating table for order items and defining relationships. 5:07:36 Setting up table relationships and policies for authentication. 5:11:54 Updating query and regenerating types for superbase integration 5:14:00 Implementing error handling and data filtering in React Native 5:18:30 Filtering orders based on archive status and order status 5:20:40 Using dynamic query keys based on conditions for filtering data 5:24:47 Creating orders using mutations and typing 5:27:01 Using session to automatically handle user ID in data mutations 5:31:20 Creating and linking order items to the order for relationship 5:33:41 Creating and calling a function to save order items 5:38:04 Creating and linking cart items with word items and sizes in React Native using TypeScript 5:40:06 Sorting orders chronologically based on the most recent created date. 5:44:28 Updating order items and implementing related data queries. 5:46:43 Adding required ID for table update 5:51:07 Enable real-time updates for specific tables 5:53:14 Handling new data insertion and updating state 5:57:59 Subscribing to order updates using a specific ID 6:00:08 Real-time functionality for order updates 6:04:37 Uploading and linking files using Superbase storage 6:06:51 Troubleshooting issue with image upload and display 6:11:14 Storing and displaying images using remote image on React Native with Supabase 6:13:28 Adding payment processing and advanced features 6:17:37 Updating a product image and implementing logout functionality. 6:19:38 Creating a profile screen and implementing sign out functionality 6:24:00 Install and configure Docker desktop for local Superbase setup 6:26:07 Resetting database password in Supabase 6:30:33 Setting default values for environment variables and server restart in React Native application development. 6:32:42 Database synchronization issues between local and remote environments. 6:37:10 Creating and managing admin accounts and permissions 6:39:22 Integrating stripe as a payment processor 6:43:41 Server-side processing for secure payment handling. 6:45:45 Setting up test mode and Stripe integration for development 6:50:12 Function is watching files and auto-refreshing code 6:52:29 Using server-side Stripe integration for secure transactions 6:56:55 Troubleshooting and testing payment intent creation with dynamic amounts 6:59:19 Deploy function on remote Superbase instance 7:04:03 Initialize payment sheet on checkout 7:06:14 Creating and fetching payment sheet parameters using Edge function and Supabase client 7:10:46 Implementing payment processing and error handling in the app. 7:12:57 Payments are integrated in the application with dynamic prices and test mode usage 7:17:20 Creating and applying database migrations 7:19:32 Interacting with Supabase database from Edge function 7:24:05 Fetching and handling profile data with error checks 7:26:36 Saving customer ID from stripe to database 7:31:18 Understanding the process of initializing and handling payment sheets in React Native. 7:33:24 Stripe handling payments and card reuse 7:37:49 Configuring push notifications for iOS and Android 7:40:19 Expo push notification service simplifies remote notification management for Android and iOS apps 7:44:49 Setting up configuration for Expo notifications 7:47:14 Creating a notification provider for Expo push notifications. 7:51:59 Setting up push notifications in Expo go 7:54:00 Handling push notifications and notification listeners in React Native 7:58:32 Using migrations to track changes and apply them to remote database 8:01:07 The process of storing push notification tokens and sending notifications to users' devices using Expo. 8:05:57 Updating status and notifying user 8:08:23 Sending push notifications using Expo push token 8:13:14 Sending remote push notifications using Expo push API 8:15:28 Setting up Firebase Cloud messaging for Android notifications

No one on youtube makes better RN content than Vadim NotJustDev. The videos and material are comprehensive and show just how much work Vadim has put into making this possible. Aside from that, its very clear that Vadim is an expert and knows the ins and outs. I've watched so many RU-vid videos on react native and most of them are inexperienced amateurs looking to suck your money for code and assets before even starting the project. Thanks Vadim.

I was following another RN tutor for a while, I have completed his 3 videos, totally like 15-20 hours. But your approach is just awesome Vadim. It's clear that you have spent so much time for this tutorial plus Notion part. This video alone, with Supabase part, TanStackQuery part, production part... I have joined your channel Vadim, thank you for your efforts. I'll suggest this channel of yours to every RN enthusiasts. Cheers man!🌻

2:26:44 - if you have typescript issues, with dynamic routing: //* This is a hook that returns the current route segments as an array of strings. const segments = useSegments() //* Strange behavior, but it works const productRoute = `/${segments[0]}/menu/${p.product.id}` as `${string}:${string}` return (

you are a legend. i ve been following hundreds of tutorials and imo you are among the best out there. So much material. So many explanations and the website to follow step by step a f legend.

Just finished the course, and wow! It was a lot but I wouldn't have had anyone else teach it. You made this so much fun and understandable for someone who just learned TS and React a day before. The Notion database was a huge help and you made sure to never leave us behind or in the dust by showing us your debugging process. Thank you!

I used this tutorial as a basis for my own app and it is genuinely the first tutorial that had everything I needed explained from the ground up. Thank you for the excellent video.

The moment i noticed you were implementing auth -signup and signin i subscribed, liked and kept the notification bell ON, you are a good teacher buddy. nice job.

Congrats Vadim!!! this tutorial is amazing! I am finally understanding how expo router works. Thanks for sharing such valuable resources!

I can not believe how much value he provides to all of us through amazing videos and courses like this for free here on youtube!! keep it up man!

I'm like 10 minutes in and can't believe how good this is. Thank you very much :)

Wow, What a video, i am coming from the web and i wanted to learn React Native, and holy did i learn it _so much knowledge _great pace _great resources i wish we had a video like this for everything just insane i hope you keep up the good content wish you all the best

Hey Sir Thanks , This is the best react native course ever on RU-vid

I'm about 30mins in and I just had to stop to write this comment. Thanks so much Vadim! This is great stuff!!!

Best course for react native, everything from scratch. Good explanation. I just started React native. Your course is very helpful. Thank you ❤❤. And again thanks for providing study material also which is very helpful for starting.

if i am not wrong git stash is for saving the changes temporarily, git restore is the command that should be used to get rid of changes that is not commited. thanks for the video btw

Thank you so much! When I started my internship as a React developer, I was later transferred to the React Native team. Although React is similar to React Native, there were many patterns I wasn't familiar with. Your tutorials really helped me, especially on the mobile team where I was working on a chat system using Stream. Your Stream tutorial helped me get started, and after my internship, I was able to secure a full-time position. I would love to see content that no one else cover here on RU-vid Such in app update, more animation and performance optimisation

This the best tutorial i have seen so far... Its sure a Masterclass... Thanks much Vadim.

I've been working on this tutorial for a few days, it's so so good. I've seen your sub count increase slowly but surely... congrats on 100k and thanks for the awesome videos !

I'm a newbie in React Native, and you made it easy for me to understand how to use it. I was struggling understanding the docs from Expo. Thankfully you have a video that explains it in much simpler way. 🙏 Also, I like how detailed you are through your video having prepared of list of steps laid out is very nice, it's easier for me to follow and not get lost throughout the video! Keep it up!

This was definitely the best course I've watched on react native so far. Thanks for all the efforts! There were small issues I encountered some errors that didn't happen in the video but it was also a good for education to teach people to google the error! It wasn't a bug, it was a feature!

Great Job on this course. I am 1 hr 29 min and I am able to handle it. Thanks a lot!.

Excited to begin the journey of 8 hours of intense learning

Thanks for this tutorial with Supabase. You deserve putting a "Buy Me a Coffee" in the description. If you came to Madeira Island I would pay you a poncha! ;)

You are the best. God sent. I pray for you to be successful in all of your endeavors. All I can say is a biig thank you.

Big fan of your tutorials! Could you please consider making a tutorial on building an attendance application with React Native Expo? Your teaching style is fantastic, and it would be incredibly helpful for the community. Thanks a lot!

Thank you so much for the great content, Vadim! Could you consider making these in the future: - A complete, full-featured quiz app - A Duolingo clone that's more advanced/complete (I know you did that clone in a course in the past, but it's a simple one for beginner only) And it'd be more preferrable if the backend is not AWS :)

Honestly, you are the best. I love the way you explain concepts.I will dedicate hours once more to learn about mobile development at granular level by watching this masterclass. Thank you NotJustDev :)

Man , thank you for your excelence hey . damn this is pro level, detailed and intentional . I APPRECIATE YOU and your efforts sir . im self teaching and its a journey hey. last year i had an opportunity to join a learnership to learn react and react native . it was war but i came out better and ABLE to learn and understand how to navigate challenges learning code. im constantly on youtube ect and practicing . currently my laptop is old and slow and im tired but i must tell you ,your videos inspire me to quickly sort out my laptop and wifi drama and just CODE . thank you SIR

I'm about an hour into this course and this is great stuff dude! Thank you so much.

I honestly learned so much from this course. Thank you for putting this together!

Thanks alot for this project i'm new in the react native this project teach me alot it took me 7 days to fully complete the project thanks a lot for this amazing content

A Very Big fan of your Videos! Could you please consider making a tutorial on building a Zoom Clone app with React Native CLI? Your teaching style is very good, and it would be incredibly helpful for the community. No one has build zoom clone Perfectly on RU-vid so far Thanks a lot!

国内网站没有找到相关的教程，您的教程真的太棒了！

Absolutely thrilled to have completed the entire video and developed my very first full-stack React Native app! 🚀 Huge thanks for the phenomenal content! ❤ It's been an incredible learning journey! 👏

This is my learning progression comment. I'll updated with my timestamps. Hope I can reach the final!

Thank you Vadim, I know standing there for 8 hours is not easy. I learned so dang much bro!

For others that made the "src" folder and moved their three files into it and then were a bit confused about the @ import throwing an error: You need to go into your tsconfig.json and change the line (line 7 for me) from "./*" to "./src/*" After that you can proceed as mentioned in the video. The is because the template used has been updated. A bit later into the video you will also learn more about it, it's a new feature that hadn't been added when the video was released, it can make importing a bit easier in the long-run. ( 43:02 Implementing TypeScript Path Aliases )

Long time student, just checking in! Thanks Vadim! Hope you are doing well

Thank you so much for this in-depth tutorial man. You are giving tons of value to the community. My appreciation is huge for you! Keep up the hard work man.

This is some very high quality material! Thank you for the work you put in, it's a pleasure to follow your live and tutorials. Keep it up!!

if in your tab layout you put the

Thank you so much for this course. I'm using it to build a workout tracker to help people lose weight. Great course so far !!

Vadim hermano, mi ingles no es el mejor pero me enganchó el tutorial y los disfruto y voy entendiendo... de verdad que la forma com expresas los conceptos y presentas la documentación, muestra un respeto hacia tus aprendices que habla muy bien de ti... créeme, estás cambiando vidas, incluso a un Ingeniero de 52 años como yo!!... gracias mosntruo!!

Thank you Vadim for these gems of tutorials i am silent student of your channel watched and learned alot from your videos Thank you and keep up the good work

Currently following this so far good and learned many things. Thanks

Hi , This is amazing video and loved the way you explained things bit by bit.

Well structured tutorial and clean explained 👏 thanks for your time and efforts

I am just into the video sir. It's just mind blowing.. simple understanding video sir

really loved the way you have made this content, top quality content, Thanks a million.

I think the Expo Router part is pretty outdated. What a pity. I was loving your course so far!

The content is absolute best but the problem is i dont like to use expo for building projects and i am having trouble understanding the navigation part. I am using stack navigator and bottom tab navigator to navigate. Can you make a short video explaning the best way of using stack and bottom tab navigation?

I hit HARD the suscribe button, this is quality content man 💎🙌

This is awesome!! The course has lot to teach. But I love your English even more 😊😊😊, its beautiful

vadim, the main guy👍. Always eager to give out freely!

This is a very well done tutorial. Thank You.

masyaAllah, thank you so much... btw, please create tutorial about how setting react native without expo :(

2:26:01: I had a problem with the href property of the Link after changing it to work with segments. It worked fine, but it gave me a Typescript error. it took me some time, but I finally resolved it by adding "as Href" like that: "href={`/${segments[0]}/menu/${product.id}` as Href}". The "Href" is imported from "expo-router".

Literally saved my life, thanks so much!

About to start this video, excited already

Hey there! Love your videos so much! It would be so amazing if you could make a tutorial on how to incorporate GraphQL to make queries in this react native expo x supabase app. That would be so so helpful

Hello! I love this tutorial. I'm learning so much!!!!! I have a small issue though. After implementing the products table on supabase, my app doesn't want to return to the index page. I'm stuck on the menu user side... Does someone have an idea why or experienced that?

i love the laugh at the moment when the fetched product is successfully appeared in the application view every developer will relate thank you for all the effort and work you do keep up the great work your explanation and guide is very helpfull make the learning process is very simple and great i'm learning react native newly to add it to my knowledge base coming from the web react and nextjs

wow the best tutorial i found on youtube, your work is totally awesome !

Thank you Vadim for all the shared experience and this great content, Can you please make also the delivery app 🙏

Great job with the taskboard! This really helps me follow your video and organize the steps in a structured manner!

You're awesome dude. Keep up the good work.

Waiting n waiting.........

Hello. First i want to thank you for this course. Its very,very good. Subscribed,liked and turned the bell on, because i dont want to miss your content. And second, I found out that if we choose more poructs in the cart modal, the Checkout button goes down and you can scroll and click it. How to fix that thing?

An excellent tutorial. Very well done!

You should also do a course on 1 - how to do a great tutorial/ course and 2 - how to set up an awesome Notion board.

This is AMAAAAAAAZIIIIING Thank You Thank You 🎉❤

I had trouble downloading the asset bundle. It gave me the following error: "Type Error: Failed to fetch" :( ... so I downloaded from github instead. :) Enjoying the tutorial so far, thanks!

I'm looking for a course that can provide the knowledge regarding the following: - how to choose a good option on a host service when it comes to deployment - how to choose a good option on a database More clarity: There are often multiple options for backend host service based on RAM and CPU, but I need to know how much RAM or CPU I need and foresee what I will need if the app grows. A lot of people are looking for this type of content to learn.

Keep up the good work. Ive learnt a lot from your tutorials.Thank you

👏👏👏Such great content, thank you!

thats soo awsome course fully recommended and thanks sir vadim

What an amazing tutorial!

Bravo! appreciate your hard work. 🙌

ty bro this help us a lot, shoutout from Mexico vadim

thanks and respect for uh . and because of uh i am changing to react native

Is anyone beginner in React native here ... Doing this course ? Want to connect in this learning journey

1:39:16 I am having issues displaying the cart screen as a modal. I rolled back the video and rewatched this section of the video multiple times to make sure I am not doing anything wrong but everything looks identical to the video. I also tried changing the presentation value to different values but none of them have any effect. I am not getting any errors, it's just inexplicably not doing anything.

Tnks alot for touching lives. Great content all for free

This is interesting, thanks Vadim. Do you mind making a comparison between AWS Amplify and Superbase in a short video or on notJust newsletter? I see some of your projects shifted away from Amplify lately

This is amazing, Thank you

Thankyou so much for this waiting for this

Thank you for this beautiful video, I have benefited a lot from it can you explain to me TamagUI Because I did not find enough explanation for it and also its documentation is a bit complicated (for example, adding more than one theme to the project,)

Finally, Supabase!

Finally supabase 🔥. Thank you!!

I would love to watch series on app deployments and handling large user that would be good handling crash builds even tho i am using react native for 4 years but i still have imposter syndrome about deployment

I am here chief. ❤❤❤

Thank you very much for this amazing course. You've earned a passionate subscriber. 😄😁 Hope you can be of a great support incase we need help.

I was hard stuck on getting local supabase to run, there is a problem with this supabase_vector something from working but I ran the command npx supabase start --ignore-health-check and it finally started. No idea if this will pose an issue down the road but we will see

Thank you for this content I have a question can I create (tabs) So that it is displayed within the mobile app But within laptops, for example, tabs disappear ؟ I searched for it but found no results

The best!

Hey when I transfer my app,components and constant folders to src the import in layout.txt and other files stops working specifially in line "import {useColorScheme} from '@/components/useColorScheme''"...What is the solution??

Thanks Vadim , excellent stuff. I finally got to the end of the video and I have produced my first full on React Native app. Brilliant concepts introduced - especially interacting with Stripe and the push notifications. Also great to see everything still works 4 months after release of the video - can't say that about some other tutorials I have tried!