👉 Build your first React Native app - Todo List Tutorial Part 1

In this first video of the Todo List React Native tutorial series, you’ll learn: layouts using react native, creating reusable components, passing props to custom components, using Expo to run your react native app, styling react native components and more!
Link to source code - github.com/mattfrances/simple...
Link to Figma design - www.figma.com/file/ndTNp9FBR5...
❤️ Thanks for watching
👍 If you liked this video, be sure to give it a thumbs up
👊 Want to see more of this? Smash that subscribe button
📢 Let me know in the comments what you'd like to learn!
Follow me:
Twitter - / madewithmatt
RUclips - / @madewithmatt
What we’ll be doing: (0:00)
Setting up Expo: (0:41)
Getting started with App.js: (1:54)
Today’s Tasks section: (2:22)
Creating a reusable Task component: (5:00)
Passing props: (7:27)
Task component styling: (8:28)
DONE 🎉: (13:40)

[@bakhromkhalikulov7558]

"Thank you so much for this video, Nomi! I really appreciated how you explained simple ToDo app in such a clear and concise way. I learned a lot and can't wait to try out it. Keep up the great work!"

[@yasith2426]

Great video, well explained and a beautiful UI. Hidden gem of a channel!

[@MadeWithMatt]

Really appreciate it! Let me know if there's every anything you'd like to learn 😁

[@beko9858]

the best tutorial ever, rly i was enjoying every minute of this explanation , and wanna find out even more after this one , wish everyone has done the same job, well done and thank you friend

[@simasjanusas1766]

Nice, short and straight to the point video. Thank you. No bs, no explanation, straight diving into the code and the design, - as it should be! Also kudos for showing how to use Figma tool. Efficient Figma use + React Native = turbo speed in development! Thanks

[@MinhTran-pc4lh]

Thank you for this video! Honestly I love your teaching style and how thorough the video is!

[@steven7936]

I love the react native style sheets that you can use them in the file itself. Reminds me of the styled div components of React.

[@MadeWithMatt]

Yeah same here it's a great developer experience!

[@thomasgauvin]

Love it Matt! Love making Todo list apps to learn the basics of a new language/framework

[@MadeWithMatt]

Thanks Tom! Same here, they're one of the first things I try when learning a new framework/technology 😁

[@Manan_K]

Great video!
I already feel comfortable with react native after watching this.

[@liebestraum003]

Simple and clear tutorial, no bs and straight into points. Wish I found your channel earlier!

[@ElBlancoFinance]

Glad to see you back, keep it up Matt!

[@MadeWithMatt]

Thanks man, appreciate the support 🔥🚀

[@ddikodroid]

Looking forward to it. Keep it up
Matt!

[@MadeWithMatt]

Thanks for the support and glad you're enjoying the content 🤩

[@anum2471]

you explained it in a simplifying way👌👌👌👌best explanation ever❕❕❕

[@DaveEmtb]

I was looking for a good beginner tutorial for a long time, and this was it. Awesome tutorial. ✌️

[@MadeWithMatt]

Thanks so much Hemant that means a lot 🙌

[@laurlifts]

@@MadeWithMatt I completely agree some beginner tutorials are confusing, this helped me so much with my assignment thank you!

[@matthartstein]

I've been looking for a way to develop iOS apps on Windows 10 without a VM. React and Expo are so cool. Awesome video!

[@lrajoo11]

fantastic video! and your styling is fantastic as well

[@shourya9998]

Short and to the point , brilliant 👏

[@MadeWithMatt]

Thank you 🙌😁

[@shadon_official2510]

This is such an amazing video. Thank you so much.

[@moncefarajdal4582]

Very well explained. Thanks man!

[@Shahidulidseacademy]

A great resource for Beginner. Thank you very much

[@alikibao3744]

Thanks for this.. very easy to comprehend for a beginner like myself. Much appreciated.

[@MadeWithMatt]

Amazing, glad it helped 😁🎉

[@platinumrock]

Great video and you were able to explain it fantastically !!!

[@MadeWithMatt]

Thanks so much man means a lot 😁🚀 Let me know if there's ever something you'd like to learn!

[@user-jq6el6ys2w]

I m korean. This video speak in only English. So i skip it first.. but i watch this video now, it s amazing and nice video!! you give me confidence to study rn!!! Thank you very very much!!!!

[@mohamedamr3811]

Thank you so much, Great and simple explanation.

[@sameerpatel9172]

Loved the way you teach. Keep it up bro. You are my new teacher!

[@MadeWithMatt]

I'm really glad to hear you're enjoying the videos! Thanks for the comment 😁

[@adam_firdaus]

Nice video bruh. Hope your channel grow faster !! Keep doin' it !

[@MadeWithMatt]

Thank you so much 🙌 I'm happy you liked the video 😎

[@azeemtariq3257]

A very useful lesson for all aspiring softians

[@TechBoldy]

Very helpful video for beginners 🔥 great job 👏⭐⭐⭐⭐⭐

[@vedatsozen]

Thanks for tutorial.
This video is generally about designing. I am waiting to learn props and state management. I am passing to next video to learn it.
I designed it with your tutorial. Lets see what ll happen in next video.

[@jesusochoa6616]

what a masterpiece of channel, great video!

[@MadeWithMatt]

Thanks for the comment, I really appreciate it 🙌

[@aanyc.6198]

Thank you so much for this beginner way like really appreciate it.

[@honey78665]

This was really helpful.
Thanks.

[@vgnxjhd3447]

I really enjoyed this one, thanks!

[@MadeWithMatt]

Glad you enjoyed it thanks for letting me know 😁

[@faizanmubarak9357]

Thank You soo Sir much your videos give me a lot of confidence

[@alexiadams458]

Thanks for the video! You're a great teacher!

[@MadeWithMatt]

Appreciate it 😁 Glad you liked the video 🎉

[@elisakozlowsky5469]

Really cool! I will try this!!

[@djred8889]

you almost reach 1000 subs, keep doing, idol!

[@MadeWithMatt]

My mannn thanks for the support 🚀

[@vishalyadav8789]

Thanks For making a video, need such more video on basic of React Native

[@MadeWithMatt]

Thanks!! More tutorials coming soon 🙂

[@SpencerDavis2000]

awesome tutorial. looking forward to more. thanks :-)

[@onnyvergieansaputra3514]

Good Job !, very well explained thanks man

[@MadeWithMatt]

Thanks so much I'm really happy you like it 😁

[@goncalaocs]

Awesome Video!!! Tnks for the help

[@ChrisOkw]

Great video. Thanks man.

[@kelolettek3927]

thanks for your tutorial! helpful! hope to see your another new mobile tuto!! :)

[@jobarmure6169]

Great video to start with thx very much

[@albinsmajli1644]

It helped me so much 👍

[@sktamim_01]

I'm vary excited to complete my First mobile app....🤩

[@willayatdaniyal7864]

great sir thanks you so much.

[@SteveHarper-sw1qc]

Awesome!

[@Norogoth]

Very good content; thank you.

[@pimentsni]

thanks for the video bro, saved me from a school job besides giving me a good learning experience.
it cost! like + sub for you.

[@MadeWithMatt]

Thanks so much for the support, glad you found it valuable!

[@stackflowtwo6199]

Good Job Buddy, Keep them coming..

[@MadeWithMatt]

Thanks so much! I appreciate the comment 🙌

[@ashisbhowmik348]

Your explanation is beginners friendly, thank you❤️❤️
Please make a Deployment series of expo app in play store ... 🙏🙏🙏

[@MadeWithMatt]

I'm glad to hear that thanks so much for the comment 😁
That's a great idea, will look into it for future videos

[@williamkakooza4603]

Well done, Professor

[@ziaarfeen9992]

thankyou so much sir I'm crying you are my saviour

[@MadeWithMatt]

ahahah much appreciated, glad you like it 🙌

[@nuggets5787]

awesome video, thank You

[@mohammedaladi2996]

You are the Best!

[@salmaindrianputri164]

The reaaall bessttt

[@sunnysingha1154]

Wnt more projects like this❤

[@qhaleedk1842]

Thanks matt

[@abirsonet925]

Informative video

[@programmingwithnit5308]

Thank you so much 🎉❤

[@arfinchowdhuryarif]

You are great man .. Keep it up

[@MadeWithMatt]

Thanks man, really appreciate that 🙌

[@programmingwithnit5308]

Thank brother

[@mastercode7851]

this is amazing thanks

[@MadeWithMatt]

Thanks for watching 🙌

[@DhiaMagicien]

Super cool video

[@MadeWithMatt]

Thanks, the people like you that are watching are even cooler though 👀🤩

[@mukulthakre5966]

Great 💯

[@namanbhayani1016]

You're the best bro

[@MadeWithMatt]

Thanks bro 👊💯

[@bigfloppa6703]

Why don’t I have that metro bundler when I use expo start then select w for open on a web browser?

[@gauravm.]

Hey Matt, what is that keyboard? It sounds so good.

[@abaridria54]

you deserve more subs

[@MadeWithMatt]

ahahah thank you 🚀💯🙌

[@alipourhassan3263]

Perfect

[@TheSociate]

Hi Thanks for the tutorial however I get a blank screen when I open the web browser, in the console it says "ReactDOM.render is no longer supported in React 18"

[@DevEmpower]

Thanks bro

[@eshwargetenv1]

thank you matt

[@MadeWithMatt]

Thanks for the comment, glad you enjoyed it 😁

[@gustocoder8900]

Any note on deploying to the app store?

[@Smokinz]

I feel you

[@iputubastianadiputra5816]

best , thx master

[@MadeWithMatt]

Glad you found it valuable 🚀

[@akashsarwade2559]

sir can we use data database to strore our data , how can we do ?

[@dardanberisha4098]

Great video. I was wondering how would you do the validation of the input length in this case? any advice?

[@MadeWithMatt]

Thanks! Yeah for sure. So validate the length of the string here's what you can add to the top of the handleAddTask function:
if (task.length > 16) {
alert("The password is too long!);
return;
}
In the example above, if the length of the task is longer than 16 characters, it will show an alert to the user and return so that it doesn't actually create the task in the list. Let me know if that helps 🙂

[@dardanberisha4098]

@@MadeWithMatt Thank you! It works!
btw I love your channel, very educational

[@oguzhankalfa1259]

Good job!

[@MadeWithMatt]

Thanks! 🙌

[@jinlun4019]

Great video and great work! Can i know how do you copy all the styles and put into StyleSheet in one times ?

[@sowmocoding5740]

ALT + Mouse Click (ALT = Option on Mac)

[@adamgerber3698]

I finally understand what a prop is.

[@cyerripaws8270]

i love u. thank u so much.

[@MadeWithMatt]

Thank you 🎉🎉🎉

[@solver55]

what are the tech stack used in this video

[@Mahmoudery]

Hello, Matt. Nice video, mate!
I was applying the knowledge by my self and I got well so far in the state management and different manipulation experiences, however, I am facing a trouble with an error that I cannot resolve at all. It says: cannot be a child node of a . Please, can you help me?

[@varadasaiprakash9998]

super

[@varadasaiprakash9998]

great

[@idc20627]

The square in touchable opacity is not coming up. Any suggestions?

[@jaztinbuenaventura8127]

what is kind of database did you use for this?

[@samikshyakc875]

my ios camera says no usable data while scanning the QR code.Tried it with the QR scanner app and says invalid URL. Also cant install xcode for the simulator as is not supported by my macos version. I could open it in the web but please tell me the solution for the mobile. Thanks

[@sigfigronath]

bro you need to make more tutorials !!!

[@tikka6554]

Are you using Android studio for preview app?

[@joel_mathew]

can someone tell me the windows shortcut of how he can select MULTIPLE DIFFERENT texts at the same time?

[@aliseftali38]

hey bro, I have problem with "undefined" I did everything but its not gonna solve, I can't write on console. Can you help me?

[@jaysonlana9147]

How can I pass more value in item ?

[@mr.uneasy6805]

Thank you

[@MadeWithMatt]

Thanks for watching!

[@maximuscho3847]

just started learning react native, without any prior experience learning react... I have a solid understanding of JS and HTML so I am wondering if its possible to learn this without having learnt react.
Great Tutorial btw, very clear and much easier to understand than every other large youtuber I have seen!

[@greydock5768]

+following convo. I'm in the same boat.

[@MadeWithMatt]

Hey, great question and thanks for the feedback!
If you've got a solid understanding of JS, that's all you need to get started learning React OR React Native. Since React and React Native have very similar base concepts and implementations, once you know one it's easy to learn the other

[@leopoldomolina1763]

I wanted to start this (and actually did) in my VS Code on Arch Linux... but I faced a lot of problems and gave up. I noticed you are using Mac. Maybe the development tools like Xcode cannot be handle on arch linux?

[@user-dl9sc6zw6y]

I tried doing this but have error. It says that file components/Task does not exist...

[@MrDania101]

bravo

[@rakoahmed5439]

Great content! One question, can I run IOS simulator on windows? If yes, how?