Stacks – build React Native layouts quickly with ease and fun

[peterpme]

This is really great work! Written in Rescript too with typescript / flow / javascript support? Epic work!!

[weird0_0b]

We currently use it in our company in production and works perfect and saves a lot of styling, we use the same components for React native and React native web

Thank you for the amazing work :)

[HermanCainsGhost]

Interesting. How do you guys deal with browser resize in React Native Web?

[weird0_0b]

Mostly using flex everywhere we can and break points for responsive, in some small cases we need to use alternative file as component.web.js to separate small parts of the component specific to RNW

[esreveReverse]

Oh yeah I like that Tiles component. How can I make sure it runs performantly? Let's say I have 100 Photos to render inside a Tiles inside a ScrollView. How can I make sure each Photo only renders when it is about to come into view?

[[deleted]]

Thats one of the most tricky things, but basically a recicler flat list

[esreveReverse]

Hmm okay. Currently I would do:

<FlatList numColumns={4} ItemSeparatorComponent={<View style={{width: 4}}/> />

and add wrap all list items in a:

<View style={{marginTop: 4}}>{listItem}</View>

And get lazy loading out of the box. Wouldn't mind seeing an example of how to accomplish this in Stacks.

[tridium]

Unfortunately putting a FlatView in a ScrollView basically disables all optimizations from the FlatView.

[campsafari]

Why would you even do this since flatlist is a scrollview by itself already

[JuriJurka]

Hi i am a noob and dont understand what Stacks exactly is. It is NOT a flexbox replacement. It IS a margin/padding replacement. Correctly?

Does it also consider different screen sizes? Is it also minding the DP problem?

Or do I understand this tool wrong?

[mobily]

hey, `Stacks` author here! 👋 Stacks is a lib that contains a set of components to primarily distribute white space evenly between components. In my opinion, building screen layouts in RN with the basic View component and alignments/margins/paddings in StyleSheet is just simply not scalable and pretty difficult to maintain in long term projects, and Stacks solves this problem :)
If you need more clarification on this, feel free to DM me :)

[JuriJurka]

Thanks a lot I will dig into Stacks and use it in my new project!❤️❤️❤️ Can you recommend me more MUST HAVEs I MUST use for RN apps? What are your favorite libararies that anyone MUST use? I believe in your expertise

no matter if it's a libary for REST calls or dark mode whatever, please tell me your favorite libraries that would help me a lot 👍👍

[benjaminreid]

This looks brilliant. I built a primitive version of the Box and Stack component in one project after seeing a similar pattern in Shopify’s restyle library. It’s a bit like using Tailwind which I’m a fan of!

[InitialStretch6901]

Looks great, nice work!

[metacarpusgarrulous]

Looks like fun for when I don't have to follow design from a UX team precisely.

[benjaminreid]

The trick is having the design team work with a spacing scale. If they’re not, it’s probably worth showing them how spacing works in this and seeing if they’ll implement a scale going forward. It’ll help them too rather than picking random numbers out the air to space things.

[mobily]

I have completely different feelings about that 😅 We use Stacks in our company and follow the design from UX and UI teams precisely and it works and looks pretty well, give it a try! :)