Loading video...

Video Failed to Load

Go Home

Here is a patch to test CSS grid in React native.

68,544 views • 10 months ago •via X (Twitter)

18 Comments

Kacper Kapuściak's profile picture
Kacper Kapuściak10 months ago

I wanted grid in RN for so long that I lost hope years ago accepted the fate that it’s just not possible but you did it you gave us hope again

nishan (o^▽^o)'s profile picture
nishan (o^▽^o)10 months ago

Thanks Kacper. Big thanks to Expo ♥️, i had enough time to work on it properly.

AGK (Ejike)'s profile picture
AGK (Ejike)10 months ago

will these work on tailwind classes now?

nishan (o^▽^o)'s profile picture
nishan (o^▽^o)10 months ago

Yup!

AGK (Ejike)'s profile picture
AGK (Ejike)10 months ago

Great, please media queries next 🥲🤝. Thank you in advance

ehsan's profile picture
ehsan10 months ago

LFG

Michał Pierzchała's profile picture
Michał Pierzchała10 months ago

LFG!

Hirvesh's profile picture
Hirvesh10 months ago

So so amazing! Thanks Nishan! 👌

Ashuuu🧚‍♀️'s profile picture
Ashuuu🧚‍♀️10 months ago

👍🏻

Neha Sharma's profile picture
Neha Sharma10 months ago

Looks amazing 🤩

niya's profile picture
niya10 months ago

great job Nishan! Thank you!

nishan (o^▽^o)'s profile picture
nishan (o^▽^o)10 months ago

🙏

alexeevayaan's profile picture
alexeevayaan10 months ago

😍😍

Giorgio Bertolotti's profile picture
Giorgio Bertolotti10 months ago

hell yeah, finally, great job! 😍

Flingex's profile picture
Flingex10 months ago

What kind of use cases could grid bring into react native?

nishan (o^▽^o)'s profile picture
nishan (o^▽^o)10 months ago

e.g. consider this simple card layout. With flexbox you can think of it as: <Column> <Row spaceBetween><Icon /><Logo /></Row> <CardNumber /> <Row spaceBetween><Name /><Expiry /></Row> </Column> requires 8 views. With grid, you can declare the layout upfront with grid column/row properties and have a single parent with 5 children. It will require 6 views. <Container> <Icon /> <Logo /> <CardNumber /> <Name /> <Expiry /> </Container> It requires fewer wrapper views when building 2 dimensional layouts, it is like flex wrap with more controls. It is a complementary system to flexbox, but no need to use it everywhere! It becomes much more intuitive for desktop layout. e.g. In X's layout i'd use grid for the main layout, the hierarchy will be more flat and easy to move things around. There could be more usecases like this one -

Flingex's profile picture
Flingex10 months ago

Thank you so much actually makes sense now

Damiano Collu's profile picture
Damiano Collu7 months ago

Hey @nishanbende is this something that will be included into the main React Native repo?

Related Videos