React Native Course for Beginners in 2024 | Build a Full Stack React Native App

Master the foundations of React Native and build your first full-stack mobile app.
If you're having trouble with the expo initial configuration with Expo v51, run this command:
npx create-expo-app@latest ./ --template blank
⭐ Appwrite: apwr.dev/JavaScriptMastery
📙 React Native Guide: resource.jsmastery.pro/ultima...
🎨 Aora Design Figma File: resource.jsmastery.pro/aora-d...
🌟 Become a top 1% Next.js 14 developer in only one course: jsmastery.pro/next14
🚀 Skyrocket your career in 4 months: jsmastery.pro/masterclass
📚Materials/References:
GitHub Repository (give it a star ⭐): github.com/adrianhajdin/aora
README (assets & code): github.com/adrianhajdin/aora/...
💻 Join our Discord Community - / discord
🐦 Follow us on Twitter: / jsmasterypro
🖼️ Follow us on Instagram: / javascriptmastery
💼 Business Inquiries: [e-mail]
Time Stamps 👇
00:00:00 - Intro
00:03:47 - Crash Course
00:14:25 - Setup
00:39:03 - File & Folder Structure
00:43:31 - Bottom Tabs
00:54:13 - Onboarding Screen
01:09:21 - Auth Screens
01:29:10 - Appwrite Logic
02:07:29 - Home Screen
02:47:37 - Trending Videos Section
03:06:29 - Search Screen
03:24:11 - Profile Screen
03:42:19 - Create Screen
04:14:20 - File picker
04:24:43 - Exercise Task

[@srvicytube]

If you're having trouble with the expo initial configuration run this command: npx create-expo-app@latest [your-app-name] --template blank@latest this will start your project exactly like in this video

[@mrsxber1916]

dude i'm o grateful, thank you so much. I was literally losing my head cuz the tutorial looked so different from what I had on my screen

[@AnkitSingh-ff6ew]

1:45:28 i'm getting this error [AppwriteException: Network request failed] when i click on sign up button i'm getting this error, i have created ios app but using android emulator

[@mr.protienewing8343]

Iam having a doubtt

[@sxve-x]

thanks man

[@Mj-ct8yo]

🤝 good man

[@GandahKelvin]

Hi @Adrian and team, I'm from Ghana and I just want you guys to know that I got a job because of the videos you put out here. Allah bless you and your team and may you keep making a difference. Thank you!!!

[@javascriptmastery]

Thank you!

[@ammynu]

How did you get a job? I want to get one too and have built projects

[@user-rl5iz1bi1c]

I'm also from Ghana ,i just started the react js tutorials

[@lonamdutyana3345]

same here im from South Africa and this is absolutely life changing

[@OldOne.OO1]

ماشاء الله

[@simonmaluleka]

Loving the pace at which we are moving in this tutorial. Your teachig style is best and easy to follow

[@2u841r]

15:58 npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar

[@white-ts5np]

thank you

[@yogeshk7922]

thanks

[@jonathanjoen6468]

ty!

[@frogo6413]

👑

[@OBGCORP]

i had a project in my mind so wanted to learn react native but had no luck with other tutorials online because they were either older videos, instructor was not clear or maybe both. then i saw your older video and loved your teaching but was losing hope since that video was also a bit older and i was struggling to keep up with what you were teaching. i was ready to give up but wanted to give it a shot for the last time and searched youtube for react native full course. and BOOM you have had uploaded this tutorial just 6 hours ago! oh boy that was a signal for me to not give up and thanks to you i have come a long way with this video man... thanks a lot & lots of love.

[@javascriptmastery]

Enjoy it, i wish you all the best!

[@CTILET]

Best channel about fullstack in youtube!

[@javascriptmastery]

Thank you!

[@steve_ade1407]

Been waiting for this! 🤩 Thanks

[@javascriptmastery]

It's finally here!!! 🤩

[@hazemalsaqaan3925]

Amazing ❤ I've been waiting for this tutorial . Thanks so much 😊

[@BriansRecaps]

Its like you have answered my comment on the last video, i have been dying to learn React Native , and i couldnt find anyone on KZbin who can explain the way you do . Big thanks for that bro 😎. We need more content like this from you

[@javascriptmastery]

Enjoy!!

[@isolapelumi2048]

We need more react native video please

[@letambossmanbarinua7980]

Exactly what I've been looking for. Thanks for all you do.

[@javascriptmastery]

Our pleasure!

[@StevenCodeCraft]

You are incredible. I have an Expo React Native app, but it's not using the latest features and this has helped tremendously

[@jagdish1o1]

Love from India 🇮🇳 I don't know the reactjs fully yet but the way you explain make it look so simple.

[@javascriptmastery]

Thank you!

[@antrasaraf1596]

hey @Adrian I'm watching your videos since 2022 thank you for making such great content and teaching the world coding in such a simple manner.

[@javascriptmastery]

Thank you so much!

[@stadworks]

You finally did it. You made a React Native course, a long waited one. Thank you adrian!

[@javascriptmastery]

Yess, finally!

[@IagoCech]

Hi, Adrian, i'm a dev who's was stuck learning Javascript and after watching your React tutorials and I'm building a diversified project with it, i feel fulfilled. Thanks so much sir

[@bikilanegasa4543]

What a generous developer! Thank you for your time and energy!

[@ennygenius8823]

Thank you very much Adrian! You are the best

[@javascriptmastery]

You are the best

[@Leesdjo]

You don't know how much your videos have helped me in my coding journey. JSM is the best. Thank you.

[@javascriptmastery]

Glad you like them!

[@_aNeaire]

Your video's are absolute wonderful man,your video in last 5 months ago about react and appwrite i did do your guide then make the app with my desire features, that video really engage me in this field THANK YOUUU 100X

[@juniormutalbe3587]

You make us feel so confident. Congratulations for amazing tutorial

[@naijadailyplus]

This is what I'm looking for all my lifetime. Thank you, God bless you and your family.

[@javascriptmastery]

Same to you!

[@l0ot3r19]

it's a shame that we can only put one thumb ;)

[@awildcatappears6804]

bro just saved my university project here, me and my friend built a tracking app using your lesson and it works really well, thx!

[@user-rc5sn1mn6g]

Hey Adrian I want to personally thank you for the videos you upload, because your videos I was able to create my own business, i appreciate you and your teams work Thank you

[@DennisIvy]

Yesss!!! Love it!

[@javascriptmastery]

Thanks, Deniss!

[@user-em7kk4ku7z]

You are absolutely amazing! ❤️❤️

[@javascriptmastery]

Thank u bro♥️

[@pranav6032]

i am really loving your projects adrian each week or two! , i am learning something new! 🤟

[@yudis10]

Amazing… 🎉🎉 I’ve been waiting for this. Thx so much.

[@javascriptmastery]

You’re welcome 😊

[@thereaper7682]

You are one of a kind react instructor and best teacher out there who always gives free content to subscribers on youtube unlike others who tried to use paid membership when they're successful on YT but I hope that you will continue grow and teach us of the upcoming technologies out there. Cheers mate 🙌🏻❤

[@javascriptmastery]

Appreciate it! I'll always continue posting free content! 🙌🏻❤

[@2ru2pacFan]

😮😮😮 I love you Adrian! Thank you! ❤

[@javascriptmastery]

Thank you! ❤

[@TheGrandChieftain]

Thank you. Taught me most of what I need to know coming from Next. Best Expo tutorial on KZbin.

[@ajaxjson3320]

This tutorial save a ton of mobile dev's life. Thanks so much.

[@olawunitemitope2738]

Thank you very much I've been expecting course on react native since last year

[@javascriptmastery]

You are welcome!

[@tuongnguyen590]

If you get to the Home Page part (around 2:45:38) where the VideoCard component supposes to render thumbnail images but it doesn't. It's because the files the author provided had exceed the access bandwidth limit. You can upload your own videos and images to the same bucket created earlier in appwrite and update the video url as well as thumbnail url. Update: Looks like Adrian and team had updated the thumbnails/videos link

[@user-ox4ot1ii4x]

I can't search links for this thumbnail images and videos, can u told me where is it

[@geldimansaku]

Amazing tutorial, really helped me refresh my React Native coding skills. Thank you very much JSM!

[@sheyx6458]

You put a lot of work in this tut. Nice bro, thx

[@joshuatolulope6368]

Thank you Adrian…you’re the best

[@javascriptmastery]

Appreciate it!

[@soumadip_skyy_banerjee]

Oh lawwrddd! Thank u Adrian ❤

[@javascriptmastery]

You're welcome 😊

[@yanquielarangogomez5384]

Thanks so much 😀 Adrian for this video. I was waiting for this 🎉

[@javascriptmastery]

It's finally here!

[@hudu4638]

Just excellent! , looking forward to joining the pro masterclass soon.

[@javascriptmastery]

Welcome aboard!

[@richysel3258]

Hi Adrian , just finished this tutorial and I must say thank you sooo much for everything. I cant wait for the deployment video. please do well to work on it . once again thank you soo much for this. You are amazing and I loved every bit of it. 👌👌👌👌🥂🥂

[@targettech2578]

how did your native wind work

[@richysel3258]

@@targettech2578 just copy the configuration in the repo. For some reason the new install didn't work for me.

[@richysel3258]

@@targettech2578 just use the configuration in the repo.

[@pleasurevp5951]

Extremely waiting for this course

[@javascriptmastery]

It's finally here!

[@iheanyichukwuaguwa6231]

Thanks for this resource. Highly appreciated

[@javascriptmastery]

My pleasure!

[@karmaakabane9273]

Carefully he is a hero ❤. Most of the tutorials were outdated. Almost had to turn to books to learn. Then comes our saviour to save the day.

[@nomodifyy]

Thank you for explaining everything in such an amazing way, The best Programming Channel on youtube! 👍👏

[@javascriptmastery]

You're very welcome!

[@simeonmwangi4033]

I have waited for this react-native update project. Much love from Kenya

[@javascriptmastery]

Hope you enjoyed it!

[@Neil_09]

Wakenya shida zenyu ni nini. Lazma mulete watu kwa vitu zenyu. Kurep nchi haikufanyi ujulikane. Toa ukoloni kwa hiyo akili yako ndogo.

[@LeoMessiEnjoyer]

@@Neil_09 shush.

[@iankabaka6529]

@@Neil_09 we shida yako ni gani pia, with all the bad energy

[@hk254lyt8]

@@Neil_09sasa umesema nini hapo?

[@Marc-fj3kd]

Amazing video as always, thank you Adrian

[@javascriptmastery]

My pleasure!

[@tonykanyamuka-yy5oc]

Thanks ,Been waiting for a long time for this

[@javascriptmastery]

Appreciate it!

[@PatsFerrer]

You are amazing.. thank you so much! Much 💛💚 from Brazil!

[@javascriptmastery]

Wow, thank you!

[@Nitin-Pandita]

Just in time !! Thank you for this video ❤

[@javascriptmastery]

You're so welcome! ❤

[@fatihaltun4763]

Thanks and congrat from Türkiye for this amazing crash course.

[@technishan7222]

All of your React Native courses are always incredible. appreciate you man!

[@javascriptmastery]

My pleasure!

[@braveitor]

At least for me, the initial steps described in the video are done automatically while installing the libraries. I mean the app folder with the _layout.tsx, no app.js file, and so on. I suppose that's a modern version which takes care for those things for us. Great video. I've learnt a lot!

[@tommyc4511]

how did you get passed this step? Im stuck with all the tsx and cant follow along... my mobile app on expo gives me a complete different landing page

[@pcodesdev]

@@tommyc4511 I am as well stuck at the same point

[@benjaminguerrieri5136]

​@@tommyc4511 clear all contents of the folder, create a new file of type .jsx:, and paste in the following code: import { StatusBar } from "expo-status-bar"; import { StyleSheet, Text, View } from "react-native"; export default function App() { return ( Hello ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center' }, });

[@mdsafikulislam9113]

Thanks Brother!

[@javascriptmastery]

You bet!

[@maulanafadilah]

I'm waiting for update of the react native for 2024. and now it's finally here, thank youu 👍👍👍🙏

[@ChriScar1979]

Awesome! Thank you very much for your tutorials! Could you make one for barber appointment bookings? Make it scalable, where many businesses can have their account by paying a subscription with their own homepage, and many clients can register to book their appointments!

[@taylanacikgoz4152]

For the error 'Creation of a session is prohibited when a session is active' I fixed the signIn function in the appwrite.js file as it below. Before creation of new session first delete current one; export const signIn = async (email, password) => { try { await account.deleteSession("current"); const session = await account.createEmailPasswordSession(email, password); return session; } catch (error) { throw new Error(error); } };

[@Jokopie-wv3zp]

thanks bro

[@clementebarros4097]

👌👌👌

[@iBiiTEx]

this will encounter a permissions error where the const account will have guest permissions and can't perform the calls to appwrite. export const userSignIn = async (email, password) => { try { if (!account.getSession()){ const session = await account.createEmailPasswordSession(email, password) return session }else{ await account.deleteSession("current") const session = await account.createEmailPasswordSession(email, password) return session } } catch (error) { throw new Error(error) } } this fixed it for me

[@venny4510]

thanks a lot

[@ac5402]

@@iBiiTEx I got an error later on. commented out the if statement fixed the issue for me. // if (!account.getSession()){ // const session = await account.createEmailPasswordSession(email, password) // return session // }else{ await account.deleteSession("current"); const session = await account.createEmailPasswordSession(email, password) return session // }

[@hooooman.]

Hey Adrian, Please teach some more complicated topics like dockerization , kubernetes , deploying on AWS(or aws skills required for a web dev) , microservice architecture in nodejs, nginx etc. Having a good knowledge about these devOps skills gives confidence to propose to some open source organisations as well as building a strong tech profile,thus increasing the package even as a fresher. Your way of teaching will definitely make these complex topics more simpler for beginners! Hope your team consider this request 😅

[@javascriptmastery]

Thank you so much for the request recommendation!

[@theintjengineer]

If that's what you wanna get into that, check *Tech World with Nana* - the best in the Business (DevOps, GitLab, Docker, k8s, DevSecOps, AWS, Terraform, Ansible, etc.) They cover all that in their GitLab CI/CD Course and DevOps and DevSecOps Bootcamp. They're a bit pricier, though, due to the size and coverage of the bootcamps. PS: no affiliation with them, whatsoever. Their content is just worth it recommending. And you can check lots of them and their quality on their YT Channel. Cheers

[@suzukikitamasi8333]

That's amazing. Thanks you. Your English is wonderful I'm from Russia and I understand you! My English level is a2-b1. But your speech so clear and pleasant. Thanks for video)

[@EfeAsiughu]

Thanks a lot @Adrian for this awesome react native crash course really helped a lot on some new concept although I faced some errors along the way trying to code alongside this awesome video but was able to resolve it within a short time. once more thanks a lot and you rock man

[@OPGAMER.]

Amazing ❤

[@javascriptmastery]

Thank you, you're always here ❤

[@gordxrohit]

One of the best ❤ Creator 😎

[@javascriptmastery]

❤ 😎

[@VICKYDEV01]

At last have been waiting for react native project Thanks

[@abdulhannan-lg6kb]

I really hope your youtube channel sky rockets the way this video sky rocketed my confidence and believe of becoming a great react native developer one day. I copied the whole app with you and then created a wallpaper app for myself just for fun and it was awesome . Subscribed to your channel may you get to a Million soon

[@castellovisiedo]

Literally yesterday I decided to build my first app with react and had no idea how to do it. Today I wake up with this. What else can I ask for?

[@javascriptmastery]

Enjoy it!

[@smartbeeinc]

YOU ARE AMAZING!!!!!!!!!

[@javascriptmastery]

You are!

[@kenshalom6098]

following your videos led me to create advanced apps funny and amazing very simple to understand thank you for impacting the world with your generous spirit and excellence.

[@firebout7675]

Finally completed this Awsome video and learnt a lot from it, really thank you sir, now going to watch your Next.js series 🔥🔥🔥🔥

[@sxve-x]

hi, followed your tutorial for a project im working on. i ran into a couple of problems. when i log in, i can still go back to the sign in page, also when i refresh app after logging in, i get taken to the landing page

[@rkk1199]

im having the same issue

[@maroofgpm]

Have you found the solution

[@yudrapawar]

Thank you so much sir for this amazing content 🙇🙇🙇 please make a video,how to deploy react native apps

[@javascriptmastery]

Will do!

[@leonalex330]

Loved it!!!! please more react native tutorials this was brilliant, best in the game

[@youssefmahmoud6268]

The Best Of All, Thanks Adrian.

[@amjadali-cs3si]

superb tutoral but i am waiting for vs code clone & fullstack banking app

[@javascriptmastery]

Coming soon

[@geoffphilippe1472]

I have to give up on this video. Looks like some good content, but I spend more time troubleshooting issues then learning the material.

[@Jokopie-wv3zp]

u good now?

[@derekprieur5258]

I'm currently making a mobile app version for my side project web app so this is perfect timing! Thanks team!!

[@javascriptmastery]

You got it, Derek! That's awesome!

[@bongumusamdeuka6079]

Great video you make something so complicated seem so easy

[@javascriptmastery]

Glad you think so!i

[@LeraMulina]

You did not mention that for reflecting CustomButton and Loader you should create an index file in components folder. Without that file the app shows the syntax error

[@8creators]

@LeraMulina I was facing the same issue so I downloaded GitHub Repository to check I was missing or what the wrong with my code ;

[@nickmercsnick624]

Appwrite's headquarter is based in isr*el. The founder is also an Israeli. As of now there isn't much information available on data transparency and privacy. But it seems to me like an isr*eli data collection campaign.

[@lonamdutyana3345]

Thanks for the heads up damnnn

[@ChukumelaWilson]

Best channel ever! Always helping us grow. Thank you.

[@javascriptmastery]

You're the best!

[@HarshalHirve555]

Speechless. Thank you so much for your 🎉 excellent video 😊

[@dellkuldeep3005]

Bandwidth limit for your organization has exceeded. Please upgrade to higher plan or update budget cap. I'm getting this err what should I do next. I haven't seen my home, I using border to verify everything is working good. Please give me solution, I go frustrated.

[@WhiteNinjaaProd]

You're using his links and he has free account so his bandwidth is gone not yours :) Upload own pictures is solution

[@emrescript]

Best person in this planet

[@javascriptmastery]

Appreciate it!

[@AhmedDegRogWave]

A LIFE CHANGING CONTENT ! Thank You for all the good Work!

[@someoneyouknow2440]

Thank you very much adrian this is what I've been waiting for, I've gotten a few job requests for mobile apps with react native but I've always declined cos I couldn't find a really good react native course. You really are the best.

[@javascriptmastery]

Great suggestion!

[@YergalemGebrearegay-kb9tv]

Please Adrian try to give other programming language courses using your amazing talent to teach.

[@javascriptmastery]

Which ones?

[@coolsai]

​@@javascriptmastery Rust

[@coolsai]

​@@javascriptmasteryor make a complex project using cpp

[@samimmanuel2452]

Spring boot

[@javascriptmastery]

@@samimmanuel2452 Noo

[@kunalsisodia7668]

Hi Adrian, I'm trying to run the create-expo-app command but it's showing different files and no "App.js" file is being created. Moreover, the app folder is automatically created inside it there are .tsx files instead of jsx. it is taking typescript by default.

[@TheThomazz1]

Have you gotten an answer for this yet? I'm also not using Typescript so would be nice to start fresh without all the Typescript in it and not have to remove it myself

[@elliotlassey3118]

kindly use the command in the pinned comment

[@chahatbhatia90]

Very few videos on react native today. Thank you ❤

[@javascriptmastery]

Yes, I've finally done another! ❤

[@Itssaqi06]

This whole series is wonderful, so much to learn but it's not beginner friendly, it's basically covering the intermediate developers.

[@PauloJsx]

wow, a good content

[@javascriptmastery]

Appreciate it! 🎉

[@koho4242]

How come i dont get the app.js file? I downloaded step by step but i never have the app.js file that you have?

[@isaacc1582]

it is being updated from time to time

[@zeinine]

Yes! This what i wanted thanks. Try giving other courses too. Your channel is literally the best when it comes to learning tech.

[@javascriptmastery]

Will do!

[@ianrequenajerez]

This tutorial is amazing! I learned SO much. Thank you very much for this amazing content and for teaching me React Native.

[@AnkitSingh-ff6ew]

1:52:28 i'm getting this error [AppwriteException: Network request failed]

[@tomasrivero4316]

Do you fixed? i have the same problem

[@AnkitSingh-ff6ew]

@@tomasrivero4316 No i'm still facing same issue

[@AnkitSingh-ff6ew]

@@tomasrivero4316 i fixed it android stimulator does have internet

[@jozsefsido9764]

@@AnkitSingh-ff6ew I'm having the same issue about the file upload. At storage.createFile it just gets stuck there and gives me this error. I am stuck with this for 2 days. 😓😓😓

[@Slayersoft]

I folllowed the tutorial step by step and I get this error when trying to run the app. ERROR TypeError: Cannot read property 'useMemo' of null Expo Go (app in my iPhone) says. Render error cannot read the property 'useMemo' of null

[@karthikshettigar4104]

I am getting the same error, I've tried multiple resources still nothing is really working for me

[@karthikshettigar4104]

A quick follow up, I just found solution for the same, actually the issue is really from the node_modules folder and expo folder installed using npx, Change expo-router version for 3.4.9 to 3.4.8 and delete node_modules, .expo and package-lock.json and then reinstall everything using yarn install That will solve the issue

[@user-iy4vy1ny3l]

thanks a lot for the solution.

[@douglaskipyegon2183]

@@karthikshettigar4104 did you have to use yarn? Because I have used npm but still getting the same error even though I did everything you said except the yarn

[@karthikshettigar4104]

@@douglaskipyegon2183 Yes the problem lies in npx itself ... Use yarn and it'll be fixed

[@danielaguero8576]

Just yesterday I was searching for mobile development, thanks so much for the video, a must watch video

[@javascriptmastery]

Enjoy!

[@ALLYSAKHAEREPESO]

You are such a gem to find! thank you so much

[@javascriptmastery]

Thank you!

[@euanbagguley8748]

is anyone else having a problem with nativewind not working? I've tried everything and nothing seems to fix it?

[@akshatsharan3345]

Yes, I'm having the same problem. Please do reply if you find a solution.

[@nishanthks3994]

@@akshatsharan3345 did you get it

[@rkk1199]

@@akshatsharan3345 same here

[@Jq-oc3gs]

did you find a solution

[@learnedjellyfish]

I have the same problem. Their website doesn’t load up at all.

[@IgbalodeDev]

appwrite is bullshit btw

[@tafadzwaaaliyahndoro338]

i agree lol

[@yruan93]

Superb content. Absolutely love the phase of these videos. Can you do a video on building the apps, testing it locally and deploying it to app stores using eas please.

[@Mariam_Fathi]

You're the best..❤ I've been waiting for this..🎉

[@javascriptmastery]

Thanks!