Loading video...
Video Failed to Load
Here is a patch to test CSS grid in React native.
68,544 views • 10 months ago •via X (Twitter)
18 Comments

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

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

will these work on tailwind classes now?

Yup!

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

LFG

LFG!

So so amazing! Thanks Nishan! 👌

👍🏻

Looks amazing 🤩

great job Nishan! Thank you!

🙏

😍😍

hell yeah, finally, great job! 😍

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

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 -

Thank you so much actually makes sense now

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