React Native Tutorial for Beginners - Build a React Native App

Build amazing iOS & Android apps with React Native! 🚀 This beginner-friendly tutorial gets you started.
🚀 Ready for a deep dive?
- Check out my full course: bit.ly/3f40a4l
- Subscribe for more awesome content: goo.gl/6PYaGF
✋ Stay connected:
- Twitter: / moshhamedani
- Facebook: / programmingwithmosh
- Instagram: / codewithmosh.official
- LinkedIn: / codewithmosh
💡 Why React Native?
- Build apps for both iOS & Android using your web development skills.
- Faster development than native languages.
- Huge developer community and resources.
👉 This tutorial is perfect for you if:
- You know basic React.
- Want to break into mobile app development.
- You value fast development and cross-platform compatibility.
📕 Learn React
- React Tutorial for Beginners: • React JS - React Tutor...
- Mastering React Course: bit.ly/2KVl2A3
🎁 Get the FREE goodies:
- Layout Exercises PDF: bit.ly/3dzbKDZ
- Layout Exercises Supplementary Materials: bit.ly/3fvqZQ9
📖 TABLE OF CONTENT
0:00:00 Introduction
0:02:20 Prerequisites
0:02:58 What is React Native?
0:04:33 Expo
0:06:19 Setting up the development environment
0:09:17 Your First React Native App
0:14:38 Running on an iOS simulator
0:18:02 Running on an Android emulator
0:26:48 Running on a physical device
0:27:54 Logging
0:29:16 Debugging with Chrome
0:34:27 Debugging in VSCode
0:41:39 Publishing
0:46:30 Fundamental Concepts
0:48:20 View
0:51:08 Text
0:53:50 Image
0:59:25 Touchables
1:04:21 Button
1:06:01 Alert
1:09:55 StyleSheet
1:14:49 Platform-specific code
1:18:06 Layouts
1:18:43 Dimensions
1:22:22 Detecting orientation changes
1:27:39 Flexbox
1:30:56 flexDirection
1:32:48 justifyContent, alignItems and alignSelf
1:37:22 flexWrap and alignContent
1:40:22 flexBasis, flexGrow and flexShrink
1:43:07 Absolute and Relative Positioning
1:45:59 Exercises
1:46:58 Welcome Screen
1:57:55 View Image Screen
2:02:51 Refactoring
#reactnative #reactjs #javascript #coding #programming

[@programmingwithmosh]

🚀 Ready for a deep dive? - Check out my full course: bit.ly/3f40a4l - Subscribe for more awesome content: goo.gl/6PYaGF

[@matinkafashian_]

is your react native video updated? because it is for 4 yeas ago

[@piperbates99]

For everyone having the Metro Bundler issue: The metro bundler User Interface (which you see Mosh interact with in the video at 13:08 on the browser) is no longer in use (deprecated). Instead, fast forward to 14:07 in the video and you can see how to progress in the terminal instead :)

[@usmanmbup]

thanks

[@gatorslife22]

"This is gonna take about 15 minutes of your time..." *takes me 4 hours*

[@stephenharrison4640]

That makes you the winner in a contest I didn’t know we were having :-)

[@lararifai7074]

Takes me 1 week on my old window

[@methanesulfonic]

We all gotta start somewhere, atleast you finished it instead of giving up halfway🤣

[@captaing2101]

I've never related to a comment this heavily😂

[@redagaga]

I'm your brother in these

[@kwenzathanda4854]

I'm a random learner on KZbin bro and now I know when I see your face it's a stamp of quality. Clear content, fluent accent and intuitive tutorials..!

[@vaibhav9131]

mosh's way of teaching makes us to love coding ..

[@RexGalilae]

For a split second, my heart stopped to see MKBHD in the comments lmao. Then found out it's just the profile pic

[@muhammadsairkhan7205]

Exactly

[@somnath_bagal]

even I clicked just because of pic..

[@45-shafeerahamed81]

Exactly

[@bilalyaqoob8813]

yes you are right when i was in university i hate programming and could not understand basics of programming and i some how got mosh c# tutorial (basic,intermediate,advance) and after watching these tutorials i starting understanding programming easily and now i have 4 years of experience working as a web and mobile app developer and when ever i find someone who hate programming and cannot understand programming i recommend him watching mosh tutorials. Thank you mosh for making my career

[@uxander]

I absolutely love the fact that you tell all your shortcuts during coding. Most of the youtubers dont do that. Thanks!

[@arwahsapi]

Your effort in making this tutorial is much appreciated you even put subtitles on it. Thank you for your generosity

[@noorkhorasi]

Hey Mosh. I am also an Educator and have taught 100 of professionals in person. I really appreciate your work and that you teach building an actual app which is so important to completely familiarize with a technology. This must have taken lot of efforts on your end. Wishing more subscribers to you man.

[@adlerpazhouhan2170]

He is Persian bro, Thats why ;)

[@mingxingwang2824]

I have seen many tutorials but this tutorial is the most succinct, clear, and helpful for beginners with a short time. Thank you, Mosh !!! And I hope you build more tutorials like this.

[@trendietech7200]

I like how Mosh can make concepts so easy to understand, and how He adheres to the best coding standards. After I took his React course, his style became like a template for me. You inspired me when I was starting out years ago, and now I am doing the same for struggling or aspiring web developers, my first KZbin video goes live Tonight. I hope to make you proud.

[@xyzxyzxyzxyz]

Why do you have to make this about yourself...

[@dehlanshandirkayr6182]

@@xyzxyzxyzxyz He doesn't really give a shit about mosh or any other youtuber, he's just marketing lol.

[@adlerpazhouhan2170]

He is persian bro , Thats why ;)

[@scotthorwood5558]

I have never used React Native before this course - only dabbled with a few front-end frameworks like Vue, Angular, but this is amazing! It has given me a real kickstart to learn more and enough to build a simple app. Super easy to follow and probably one of the best tutorials I have listened to. If I find the time, I will definitely do the full course. Thanks Mosh!

[@klemlloydmwenya2224]

So inspiring. Mosh, it's no doubt that you're a genius!

[@UmairAbbasi1]

Amazing course Mosh, already a big fan of you. Not only you teach us in the simplest way possible but with the best practices and so many time-saving tips. IMO, your courses are well addressed and honestly save more than 50% of the time. Worth every penny!!!

[@usmann.8656]

Hey Umair, are you available to chat a bit? I am getting into this career, need some tips to get started with.

[@fenix90ful]

Thank you, Mosh! You are seriously the best teacher I've ever met on Internet. Only from you I can understand a lot of details from different libraries, frameworks, because you know how to prepare us and to understand that feature at another level

[@aryamanjamwal8992]

Can u help me out with (10:28) part of this video?I'm unable to add the git thru the terminal?

[@mez3226]

Thank you, dude! I've looked around for a good tutorial on getting started with react-native and this tutorial IS THE BEST. Thanks again!

[@AvanaVana]

Despite this being about React Native, one of the best takeaways from this video was what is probably the clearest explanation of flexbox layouts I’ve ever seen.

[@eliaszalegas8374]

i have no words this is just AMAZING im gonna buy the full course now greetings from Argentina !

[@strik3r137]

To be honest the best tut Ive seen and everything just works out of the box. Thanks for ur efforts!

[@victorcercasin]

Mosh, my dude... Your tutorials are really good, and the fact that you provide these smaller versions for free is a godsent. Thankds bro

[@aqueelmirza1]

What an amazing way of teaching!! I am even new to Javascript and React but your way of telling things makes me feel like learning everything so quickly that all confusions related to most of the stuff is gone already. Great tutorial!

[@aebek1413]

I saw a posts on forum on code with mosh and they were talking it is outdated . Is it true ? Is it outdated still now or is it updated now

[@maryemanane2461]

Dear sir , if you're reading this , I would like to say THANK YOU ! A big big THANK you for helping me out in my career and making me believe in myself! I always thought that I would never know how to code and that it isn't my cup of tea and i would never create , or even understand any application. from your videos I really understood everything from A to Z and I found all informations I needed in your videos explained in a very simple way ! I would like to thank you from all of my heart. You're doing an amazing job ! God bless

[@adnanahmad1204]

very true

[@bmeghani88]

All of Mosh's courses are very good, I haven't learnt as much from any other programming instructor.

[@vkray]

Agreed.

[@thecoderabbi]

You teach by walking people through outstanding realworld projects and that is amazing! Thanks Mosh!

[@dbestech]

I took the the course. It's all based on simulator. You did not publish the app in the app store.

[@Secret666.]

go to the documentation of expo

[@willisbestname1203]

The reasons I chose this video over all the other ones on the internet: -It's an overview that will probably cover everything I need right now -It's really easy to follow -Mosh's accent

[@howtocode7489]

kzbin.info/www/bejne/e3OYlY1mh7V2qNE

[@codeforest9027]

Honestly Mosh's accent is the best reason.

[@justinbiebernation846]

This man is so great that he has mastered most of the progamming languages !! Hatsss off !! Love from india

[@sebastianremnerud7675]

Awesome Tutorial! Rarely I find tutorials as well covered but still being to the point.

[@JoshuaMusau]

This is awesome. I'm an experienced full-stack developer myself and I can say that you teach SO DAMN WELL... God bless yah.

[@slayeroff7798]

Can't wait for this..All of his courses are awesome..

[@Hannah-nh5gf]

For those trying to learn this it's better you also check the react native documentation since some of this are outdated and don't work... or just learn from a recent tutorial

[@saramaeks9826]

thank you so much for this. one of the best teachers on the internet, hands-down. and I also love your general vibe, you're so easygoing and it makes the whole learning process less stressful :)

[@prashoonbhattacharjee8211]

This course was amazing Mosh. Thanks a lot for making this course!!

[@aneeshkatkam8271]

Thank You so much Mosh for your amazing courses. I just heard that you are giving your most popular courses to the people who can't afford them for free. All of them will look at you as a teacher, a friend and... a PROGRAMMER!

[@meganadams7274]

I'm only 2.21 minutes in but I'm already so impressed just with how smooth the motion graphics and editing of this video is! Looking forward to watching the full video, and your smile in your display image is super contagious haha :)

[@samsilvaluebinder]

This tutorial was perfect for what I needed: something to get me started converting my react app to react native. Now I have learned some of the basics and I have started off my project with good file structures and conventions. Thank you!!!

[@wheelbarrow8649]

Thanks Mosh! You're a very gifted coder and educator. You have a natural understanding of what your students need and such a clear and concise delivery. Absolutely first rate :)

[@noormohammedshikalgar]

Hey Mosh, Thanks from the bottom of my heart and everyone who loves you and your work, your the best we have got, thank you so much for listening to us. Hope you are safe with your family and may god protect us all. Happy Ramadan Mosh. 😊

[@howtocode7489]

kzbin.info/www/bejne/e3OYlY1mh7V2qNE

[@chiplong1]

This course was EXCELLENT! It got me over the initial. "OMG I have to do a React Native app!" and in to the actual coding! The help on the set up and introduction to the environment was just what I needed! Thank you!

[@davidsoldnerdupchannel7719]

I see your comment was 2 weeks ago and was wondering if this video was outdated before getting started, everything went well?

[@hardikrajpal2410]

@@davidsoldnerdupchannel7719 I noticed your comment was 1 month ago. I'm wondering if you went through with this video and if everything went well?

[@postingbmwm3]

@@hardikrajpal2410 I noticed your comment is 2 weeks old. I'm wondering if this is still outdated and if everything went well for you?

[@hardikrajpal2410]

@@postingbmwm3 Lol. Tbh I didn't code his tutorial. I jumped into the project face first.

[@codevelop3741]

If you want to create a Pedometer App, ToDo list App,Music App, Dictionary app etc. Check out my tutorial : kzbin.info/www/bejne/e4PapJ2FbNiNmMk

[@samsonalejolowo8949]

I love Mosh's way of teaching. I always get excited. Thank you Mosh.

[@rostamm2743]

Mosh, this was an amazing video. Well put together and clearly spoken! Thank you!

[@steelwolf180]

Hi Mosh, I think for Linux you should also include it in the tools for bash_profile as well under Linux. I had a problem in running ADB in my ubuntu 20.04 so I added the tools it worked perfectly.

[@harishkalathur387]

This is the only worthwhile react native course on YT. Kudos to you mosh

[@FireBullet8697]

Great course. Love learning from you when first experiencing new software!

[@kcr6291]

this is the best tutorial I've seen on youtube

[@briandesign]

this is great! who else is learning front end right now? I'm currently learning JS

[@Abdullah-cm1tn]

Finally, u made this video. I was searching for React Native on your channel last month. Your videos are great!

[@howtocode7489]

kzbin.info/www/bejne/e3OYlY1mh7V2qNE

[@msaurabh1]

Great course Mosh! Love it . Very informative and your explanations are amazing!! Makes life simple...

[@afafadel22]

Thank you for the boost of hope you gave me Mr. Mosh I used to hate being an engineer because I didn't understand anything about programming because of the doctors and teachers who taught us but now I love programming and engineering. Thnx a lOoooooOt

[@mastermisterupload]

man, you're so good on explaining things, and i love your clear english. even english it not my first language, but i can understand your words so clearly! i'll subscribe on your classes!

[@MandolinSashaank]

Hi Mosh! Indeed a pleasure to see your courses. I had a request, if possible could you make a comprehensive course on the python flask framework? Thank you so much Mosh 😊

[@johnerys]

Your teaching style is inspiring Mosh. You show everything about where things come from and make it reasonable. Thank you so much!

[@muhammadsameer01]

I don't have words to explain how excellent this course is. 110% recommended.

[@StarBattle08]

You really made it simple by explaining things one by one. I've bought the course on your website and i have finished part 1 :)

[@gamex1306]

good

[@salonibakshi7755]

Does the course on website have more content than this youtube vedio ?

[@StarBattle08]

@@salonibakshi7755 yes

[@hoangminhduong5165]

can you please summarize the content of the whole course, I intend to enroll in this

[@StarBattle08]

@@hoangminhduong5165 You can see in the "What You'll learn" section on the website.

[@umarsiddique511]

I really appreciated your hardworking. u r the only instructor who teaches like that. please make a django course .

[@umarsiddique511]

@@programmingwithmosh thank you to reply with smile face . when will your django course come . I relly appreciated.

[@thenahidul]

There's already a Django chapter in his python course.

[@constantinyt4845]

@@programmingwithmosh I'm also waiting on that with flutter

[@Natasha-to1mh]

@@programmingwithmosh Please also consider GraphQL thanks 😊

[@Natasha-to1mh]

@@programmingwithmosh Thank you so much, your teaching is the perfect balance of practical and theoretical knowledge 👌

[@lianskopis4274]

Just bought your course after finishing this video tutorial . You are AMAZING, thank you so much for this!

[@mikepoveyrulz]

Brilliant, comprehensive vid. This has helped me greatly, thanks!

[@indraizallrius1748]

if this person teach my son who is 1yrs he could learn rovcket science too

[@visionl.3754]

I am really grateful about this video, even though I have been learning React native on my own for some time, this really helps me. Thank you so much Mosh

[@hairysome]

Mosh is AMAZING with his easy-to-understand explanations!

[@himanshupatil8051]

You are different from another youtubers out there you dont just teach technology you teach the complete environment thank you so much 😊

[@tinytutor413]

Hey @ Programming with Mosh , I just need you BackEnd NodeJs sample project you have attached with The Ultimate React Native Series - Part 2, I dont find please if you can do so or anyone from here thanks .

[@osamagamal495]

did u get it? i need it

[@techknowledgeforyou2580]

Ca you please also give me the nodejs sample project

[@osamagamal495]

@@techknowledgeforyou2580 hey it's on github just google donewithit backend And you'll find plenty of it.

[@simiyuenock6531]

need it too

[@indie_rok]

Really great tutorial! I don't usually buy courses but this one seemed really well done and well explained. Love the fact that's it not a simple TODO List app. The general wholesomeness of this was a major selling point! Also, i really need some of that React-Native Pro-Knowledge, in addition to what I already knew. So, kudos and thank you Mosh for this course. Can't wait to code the rest.

[@bold_breakdowns]

can you share the course with me?

[@indie_rok]

@@bold_breakdowns i mean... the link to the Course is right there in the video description 😅

[@bold_breakdowns]

@@indie_rok You already know why i'm asking.

[@GKHasiniRocks]

Awesome Mosh. I like your shortcuts and detailing about the each concepts

[@codemagicio]

THANK YOU for going step by step! Really amazing way to learn new things

[@wayfarer_4]

Mosh you make me fell in love with coding

[@siddharththirthala4532]

Mosh is the best teacher.I have ever come across.

[@siddharththirthala4532]

@@programmingwithmosh sure Mosh😁

[@benzouariintissar]

Man you saved my life i can't thank you enough !! God blesse you man . The best react native tutorial on KZbin.

[@raxitlakhatariya5915]

Thank you so much Mosh, It helped me a lot. I can't express my gratitude towards your work.

[@aneeshkatkam8271]

Mosh is the best programmer with the best smile :)

[@troys1426]

I like the way mosh says “At the time of recording this video”, even in dead languages. It will make him more accurate

[@codeforest9027]

At the time of recording this video, binary only consists of 0 and 1.

[@user-ys4tq9hl2y]

Your teaching skills so impressive! Very informative video, especially for beginners. Thanks!

[@techthred6595]

i love this man. Taught me react from scratch

[@AminBashiri28]

Hi mosh, so proud of you, I watched this video completely and would love to learn more, how can I buy the rest of the course from Iran?

[@crypticcoding9680]

goto description!

[@Ali_azimi]

I bought the full course yesterday because most of the other youtube tutorials are not complete as well as are very confusing. I would say, it's really worth the $99. The best teacher ever, so clear, honest, and shows a lot of useful shortcuts. I am taking my first Senior-Design class this semester, and I am very excited to complete the course and learn the skills to build my own mobile app soon. Thank you Mosh, people like you, are making the world a better place!

[@kbplays4288]

Thank you for posting this. This helped me learn React Native ❤️

[@PiyushSingh-mt2tb]

Hey Mosh! Didn't even finish the intro...stopped to say that I love it....thank you!

[@nextrie]

This is what I need, Mosh. I don't even know how to React to this. Aite, imma head out.

[@nextrie]

@@programmingwithmosh Haha!

[@ikechukwuezekiel5542]

Nice pun there

[@titusmkandawire5661]

Yeah react natively...., you've made my day!

[@rohanayush]

Took screenshot 🤟

[@pratikshares]

This spared me the trouble of trying to find a good React Native course. Still completing the React course for now. Eagerly waiting for Golang course from you Mosh. Wasted so much time and money on garbage Golang courses on Udemy and Pluralsight.

[@constantinyt4845]

@Malik Bagwala right and practice makes perfect.

[@aarishfaiz7880]

This video Stands Out at a different level in KZbin. If you are a beginner then you must go with this video. This will actually make you understand the basic you need to start with React Native development.

[@meroechill]

Hi mosh I'm so exited to start this course with you ! before dive into it want to say Thank you for That . to have this great Tutorial in youTube . lOTS OF LOVE

[@muhammadsairkhan7205]

The Best instructor out there. Even I am a Medical Student, I can also understand each and every coding concept watching him.

[@th3graduate292]

are from india or somewhere else brother?

[@muhammadsairkhan7205]

I am from Pakistan

[@adrian-4767]

@@muhammadsairkhan7205/videos can Pakistanis speak English natively?

[@yty1941]

@@adrian-4767 can Indians speak English 'natively'?

[@adrian-4767]

@@yty1941 I don't know, you tell me!

[@guitarman813]

One thing to keep in mind when testing your application on an Android emulator is the amount of RAM used. Especially by creating a virtual device using Android Studio. Definitely a hardware prerequisite is to have at least 8GB of RAM. Even that, as I'm finding out, isn't in some ways enough to run and test the application using an emulator. So therefore, 16GB may be needed if you want to go down this route. If anyone is struggling with RAM usage, it's much better to use your physical Android device whenever testing your application. Even if it's a bit inconvenient at times to always use your device. But there's quite a difference in performance and RAM usage if you do this.

[@fetchstixRHD]

That's a fair point, and something I've found out in a slightly hard way. Got a M1 MacBook Air base version to replace my older laptop (which was incredibly slow in doing anything), initially as I had planned to mostly do "lighter tasks" on it (making slides, documents, some programming) but even with that, with multiple tabs open, the RAM is often in the orange, and sometimes in the red :( Now of course I'm doing heavier development work, and I'm worried that the 8GB RAM will be a limitation and slow me down! Of course, you can't upgrade the RAM on these, might get a replacement for this one. The lighter tasks can be handled by other devices I have anyway, and there are people who may be able to make use of this laptop!

[@HandledToaster2]

@@fetchstixRHD The 8gb will definitely be limiting in the future. Thankfully you can upgrade, so just save some money down the line and you'll be okay!

[@abdullahalnayem1849]

this is the first video of your channel i watched & it made me to subscribe your channel. loved the way you explain things. Thank You, Mosh!

[@automationtesting3149]

Appreciate this video. Lots of information which is relatively new

[@vikasgupta5287]

There is a lot of people who haves confusion on real time notifications in react native cli not expo. if you publish a tutorial on that than it will be more helpful

[@guyincognito1985]

4:13 I love Mosh's use of stock photos! :) Mosh just makes things fun! The only downside to Mosh is that there is only 1 of him and he only release 1 course at a time. He needs to clone himself with AI.

[@AnujJoshi7]

or better "Refactoring" himself :p

[@gamalabomera295]

You Are So Great Mosh . I Love Your Tutorials

[@TheVIDEOOHS]

this was so easy to follow so I had to enroll to the full course. Im so excited to finish it :)

[@izeeeezi]

Hey Mosh, just a few days I finished your full 6 Hour Python course and I loved your Django web project. The question is that can you please x100 make a Django full course. Thanks.

[@1skeeta4u]

@Sergelenchimeg Enkhsaihan link?

[@ryanmarkhiluano3657]

@@1skeeta4u you're currently commenting on it. xD

[@gokulnath7862]

Go for FastAPI...

[@kashifabbas2410]

Hello Mosh , When you are planing to publish Ultimate React Native: Part 2, If possible please publish it as soon as possible Thanks ;)

[@howtocode7489]

kzbin.info/www/bejne/e3OYlY1mh7V2qNE

[@tesorocity]

Thank you, Mosh. You are the greatest coding teacher of all-time. ❤️💯👨‍💻

[@MERKYRIY-fn5rw]

I'd seen only first hour of this tutorial and bought The ultimate React Native Series, reasons very simple: - intencive studying; - practice and examples, which I love; - and one of main reason - it's a code when you're buying course. PS: pronunsiation impressing - you're talking as a native speaker. Thank You.

[@bilalbilalbilal7]

50:18 SafeAreaView only works for IponeX, for android devices with notch use: in styles: with imports {Platform, StatusBar} paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0

[@motivation_7]

Is it okay to use: "paddingTop: StatusBar.currentHeight" for both android and iOS without "SafeAreaView"?

[@user-jj8cj3cd3h]

I don't know why, but I find that I marked >>> import { StatusBar } from "expo-status-bar";

[@jarosawjusiak6716]

Thanks a lot for this tip! It works fine.

[@carolinajimenez9924]

Thanks a lot! just what I was looking for :)

[@djerroudinissim4820]

Hey, Is your react native up to date with the last releases ? Are you planning to have part 2? And finally r u going to explain how to use push notifications in a future course ? That is hard to implement

[@quoclephu9343]

Thank you, Mosh! I learned a lot of great things from you

[@KaranSingh-rm6pe]

i watched this video for 30 minutes without skipping... this is great work by mosh and found better than paid online tutorial

[@akashthoriya]

We love you, sir, Please make the same course for Flutter.

[@akashthoriya]

@@programmingwithmosh Thank you!

[@Gurdeepsingh-pv8er]

Yes we want same course for flutter please.

[@pseudonymous8702]

In the debug section - after the error ... Ctrl-M does nothing on my emulator. Shaking my device does nothing on my device. How do I bring up the developer menu?

[@vilemuse]

Did you find a solution? I'm having the same issue.

[@nguyentranngocbao]

same issue here... have been looking around but no help

[@anglerfish61]

"keyboard shortcut when your app is running in the iOS Simulator, or ⌘M when running in an Android emulator on Mac OS and Ctrl+M on Windows and Linux. Alternatively for Android, you can run the command adb shell input keyevent 82 to open the dev menu (82 being the Menu key code). The Developer Menu is disabled in release (production) builds." says reactnative.dev

[@miyurux]

We must salute this guy becoz he uploaded a comprehensive course on android app development for free.

[@matteoleccese7390]

Thank you very much for this part of the course my man. You just helped me too much. When i have the money i'll buy the full course