🔴Build your first App in React Native in under 2 hours [ Tutorial for beginners ]

Whether you're a beginner or advanced in Javascript, this is the perfect chance to follow along and add to your portfolio as your first hybrid mobile application using React Native. I'll guide you through designing the UI and explain each line of code, so you can learn modern Javascript, Typescript and best practices in mobile development.

📚 Enroll NOW in The Full-Stack Mobile Developer course and don’t miss out on your chance to become a 6-figure dev! Check out what our successful students are saying about their experience:

💬 Join the notJust Development gang and let's build together:

Timecodes::
00:00 Intro
02:07 What will you learn?
03:04 Who am I?
04:14 Prerequisites
06:52 Init the project
17:00 Render your first content (View, Text)
25:30 Background Image
31:18 Create your first Custom Component
42:52 Button Component
54:43 React Props for Button Component
1:08:36 React Props for Car Item Component
1:22:53 Render a list of items: FlatList
1:35:26 FlatList Snap effect
1:39:02 Header component
1:47:36 DEMO

#VadimSavin #notjustdev #tesla

[hasansolak]

It is so fun to watch you coding a cool app like this and explaining the whole stuff. Thanks a lot. It might be my first time watching a coding video on 1x speed and not getting bored.

[kushagrabainsla]

I just started react native, so did it side by side and I really loved the whole project and your way of teaching, Thank you

[pasinduudara]

This is my first react app and I did it from a to z . Thank you for clear and complete instructions!

[TonyWithDaChopper]

You Made me extremely confident to start creating more apps!!!! I love this way over android studio !!!! You are the best and inspired me in not only a career but a hobby as well! thank you for taking the time to educate!

[parthapratimmanna]

Built it with you..in fact it was my first React Native project and I had no experience.
thoroughly enjoyed Vladim :))..lots of love and support.Thanks for such a nice content.

[carlosharrytravel]

I love learning along with your tutorials Vadim - keep it going sir ... great work!

[alexandergavrailovdronevid]

It's really hard to see the code. For future videos maybe you can zoom in a bit

[RadCor]

Тот момент когда русскоговорящий смотрит русскоговорящего на английском :D
За туториал спасибо!

[journeytocoding]

Nice I am learning react will jump to your tutorial later. this is the best day I got your tutorials. I am now your subscriber.
Thank you for sharing knowledge.

[whatsnewnow]

one of the best guide after reading documentation in react native. Best Kickstarter for app development.

[arpit]

Thank you so much, I am just starting and this is the first tutorial that i was able to follow and understand properly.

[keithlamontdavis]

This was truly excellent. Excellent balance of not too much handholding but not too difficult for beginners (with some javascript experience). Thank you for this. Subbed!!

[MADPURO]

This was a really engaging project. I started learning react native seriously on Dec 1st. Every day ive been taking several hours to get the basics down and learning how to use props, state, as well as getting comfortable with making my own tags. Aside from the course i am taking, i seen this video cause i was looking into others teaching state, so i noticed how long its gonna take, which wasnt much time really, and dived in. The more we make these projects, the easier it gets.

One thing i do want to point out is that i am using a pixel 4 emulator and the images are still slightly cut off. On the iphone it was perfect but not the pixel device. Would you know how to fix that? I tried ‘screen’ instead of ‘window’ but then one image looked funky, but the others were just right.

[marshalclink]

This is an excellent tutorial, thank you for uploading. For someone looking into React Native for the first time, this is a great resource.

[raphaelfr]

I’ve learned a lot from this one video. Love it.
Can you PLEASE make a part 2 video to show how to display a menu when you click on the hamburger icon and how to redirect to another page? It will be very helpful to me.
I am just starting out and find your explanations very understandable.

[hbarcellos]

@Vadim, congratz for the video. I used it to teach my son how to code (using modern tools). Do you have any other video (or resource of any kind) teaching how to create several views and navigate back & forth between them? Like most apps, (i.e. navigation bar at the bottom with different screens for each item).

[Reektrades]

Just completed, took me 6 hours - thank you its my first React App

[notchad]

For anyone wondering why it shows borders at the final of the screen is because of the aspect ratio of the phone.

Check this out for more information


Basically you need to install this package via the command:
npm install --save

After that import this:
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from

Now change in carContainer with the following lines:
carContainer: {
width: wp('100%'),
height: hp('110%'),
//for me this is the perfect dimension (Pixel 4A)
},

You can adjust how much you want and it will resize for smaller devices exactly. Hope this helps someone

[zeyuwang]

SUBSCRIBED! This is amazing! Could you please please do an Airbnb clone with react native if possible? I would greatly appreciate that.

[bkosimi]

Looks great on my iPhone, bud! Thank you for this great tutorial. Love it!!!