React Native Tutorial #14 - Flexbox Basics

Hey gang, in this React Native tutorial we'll take a look at Flexbox, which can be used to layout the different components in our app.
Flexbox course - • CSS Flexbox Tutorial
----------------------------------------
🐱‍💻 🐱‍💻 Course Links:
Course files - github.com/iamshaunjp/react-n...
🐱‍💻 🐱‍💻 Other Related Courses:
+ Complete React Tutorial - • Complete React Tutoria...
+ React Hooks & Context Tutorial - • React Context & Hooks ...
+ Modern JavaScript Tutorial - • Modern JavaScript Tuto...

[@alyssaflores8230]

THE BEST FLEXBOX EXPLANATION ON EARTH!
THANK YOU!

[@sanketgore2515]

Its altogether a different feeling when we see our own app run😀

[@alvin_lal]

This is the best explanation about flexboxes i have found on the web so far!!, thanks so much

[@ojitelikenechukwu3895]

Wow, this is the BEST flex box tutorial, I have ever come across
In 18+ minutes, I have understood what I have been having issues with for a long time

[@chemedev]

Awesome tut! Just wanted to point that the default for align-items is 'stretch' :) (11:40)

[@angelarojas1603]

Thanks for making such a great tutorial series! Easily my fav :)

[@NetNinja]

Thanks Angela :)

[@hassanmehmood7101]

yo your the best at explaining flexbox i couldnt understand these properties for weeks

[@jeanjoulia1386]

Amazing work as always!

[@TP29]

Thanks, Brooo, simple and quick tutorial, especially if you already know how to use React.

[@ecodedesign]

Thank you teacher from the bottom of my ♥.
Awesome explanation..

[@rekahorvath3759]

Wow! Thank you for the best explanation of flexbox 🙏

[@nidharshanaranganathan289]

YOUR VIDEOS ARE SO SO GOOD :") IT'S VERY HELPFUL

[@RezaKhareisaPutra12]

this is what i'm looking for. great!

[@elgizhasanzada]

All of your tutorials are just AWESOME *_* . Thx The Net Ninja

[@user-kp1ym2wl2j]

Thank you, master!

[@shadon_official2510]

SUCH AN AMAZING TUTORIAL

[@waliahmed3035]

this is a video before covid 19 - such a good year .. i miss it

[@mohamedmostafa2334]

Great video, just pointing out at 11:36 the default value for align items is stretch not flex-start :) flex-start is the default for justify content only

[@prawiraadam]

Well explained, thanks a lot!

[@MrVipulLal]

Man, you are good! Thanks for this video.

[@nallaperumalthanthondri3817]

Wonderful content. Thanks a lot

[@CristianSanchez-zu5sl]

Amazing tutorial

[@youngun550]

Thanks so much for all your brilliant work Shaun. I wanted to ask, when you were talking about the scrolling problem. Was that essentially the equivalent of an overflow problem? My understanding so far is that flex stops the list container from overflowing at the bottom of the screen. Is that the right way to think of it.
With flex:1 it might get easy to be lazy about it and just trial and error it until it does what you want haha, would be cool to figure out what use cases it shines for and when not to use it. This is deffo a good one though :)

[@oshabzsam9773]

This is great

[@doniaelfouly4142]

very informative ,thanks

[@ecodedesign]

My all time favourite #The Great #Netninja.. love from 🇮🇳

[@shadon_official2510]

awesome tutorial

[@daminduliyanage]

Thank you great tutorial

[@wilsonb4175]

Thank you sensei

[@whoami-so2hy]

thanks for sharing 😁

[@charlesorafu490]

You are awesome. Thank you

[@shishirchitre1945]

What a nice video!!

[@DrNabeel20]

Thank you 💚

[@narharos4974]

Thank you very much

[@jayanisumudini6662]

Thank you.

[@amirazouak5298]

I love how he says "Axis"....best accent ever :)

[@manangupta1789]

You're the best !

[@muhebollahkhandaker]

Good presentation

[@kayan_dev]

love it

[@mohsol86]

Thanks!

[@RizaHariati]

Thank you

[@manoj-k]

🔥🔥🔥

[@joeharris4737]

Sorry to keep going on, but this is such a good series, better than the paid ones on Udemy by a country mile

[@NetNinja]

Thanks so much :)

[@nfaical3]

Thanks

[@abhishekgadewar4616]

one doubt i have is after I save my changes everytime the todolist does not get refreshed. It stays to what it was after adding or deleting todos

[@MrDania101]

thanks

[@DiabloVal]

Why is item passed in an object and we need to destructure it to access it in the flatlist renderItem prop

[@vuongqtvn]

❤️

[@parimalbhattarai3920]

why is the flex property not working on my react native ??? can anyone explain please ?

[@sujaysingh3803]

Hi, if the todo item is tool long it is going outside the list container. Please help

[@xiaoweiwu7069]

Hi Ninja，just ask a question which one you prefer ，flutter or react native

[@davidfield2030]

You mention that you have also used Flutter. Which do you prefer?

[@alperari9496]

Calling components as widgets, flutter devs feel you man

[@SunriseBusinessClub]

How to clear textinput after adding TODO?

[@DrFaseehAhsan]

Why is the flatlist not stretching to the bottom of the screen?? When we use 'flex:1', it is supposed to flex till the end of screen right?? We haven't added any margin toooo.........Is that a default behaviour??

[@farook_]

Same question 🤔

[@TheThirdWorldCitizen]

Because of the padding of the content element which is wrapping the form and the list. It's set at 40 in the tutorial. I now it's a late reply but probably useful for someone else just starting on the series.

[@judyg6988]

what is the difference between height:100% and flex:1
why view will not scroll if i set the height:100% while it dose if i set flex:1 ??
it is a little bit confusing to me

[@sankalpjain4841]

if we do like this in container why is it not working,
flexDirection:'column',
justifyContent:"flex-end",

[@sankalpjain4841]

Got it,we have to do flex:1 to make it work

[@furkanaydogan821]

Hi, Where can I find to codes of backgorundColor ?

[@furkanaydogan821]

@@Kiran_C_Nayak Thank you .

[@arie7135]

why in 14:19 box 1 and box 3 are not equal? Both of them have flex: 1

[@arie7135]

I see.. because if padding

[@yahyazuberi2597]

Your github link doesn't contain any lesson code. Please check

[@NetNinja]

Hey it's not empty - you just have to select the correct branch for each lesson (top left, drop down on the repo) :)

[@andreas_bergstrom]

14:37 box one and three are clearly not the same width

[@kiranpawar2463]

𝓣𝓱𝓪𝓷𝓴𝓼 𝓯𝓸𝓻 𝓰𝓻𝓮𝓪𝓽 𝓻𝓮𝓪𝓲𝓬𝓽 𝓷𝓪𝓽𝓲𝓿𝓮 𝓼𝓮𝓻𝓲𝓮𝓼 👍🏻

[@punjabiwithjasman135]

Plz upload more flutter related content....plz

[@dolfinho87]

Thanks!