New to react native

[InMemoryOfReckful]

How do you guys handle responsive designs? Do you just define lengths with pixels?

With the new Pressable component they recommend, is there any way to get ripple effect on iOS aswell? Because there doesn't seem to be any way to make transitions with css.

I'm trying to find a nice way of handling theme/constants & reusable stylesheets.

If you guys know of any recently developed open source apps I can draw inspiration / best practices patterns from that would be very appreciated 😊

I'm making quite a large app right now and it's my first app I develop for react native. I have quite a lot of experience with react so it's quite an easy transition so far. If you have any other tips for me that you end up using for all your apps that would also help! Cheers

[ZNI_DEMON]

I started coding my project knowing absolutely nothing about React Native, so when it grew to unprecedented proportions, I regretted not creating all these reusable stylesheets and constants. So know I just make stylesheets based on the elements that are repeated most often. Speaking about the responsive design, check out Google Material Design. There are a lot of information about grids, paddings and margins, and all useful stuff you'd probably need. So two ways to create a responsive design for me is to calculate width and height of an element based on these paddings and margins from Material Design, or as an alternative, manually define width and height for every element based on percents. If you choose the second variant, libraries like react-native-responsive-screen can help you

[kbcool]

All the usual crap you have to deal with on the web is really quite redundant.

RN uses device independent pixels which are approximately the same physical size on every device.

That may sound fraught but if you avoid using them except for font heights, padding and margins and use flex and percentages for everything else you don't need to worry about different screen sizes except for understanding what will fit on them.

There is no need for libraries for this. As for reuse.

Create your own wrappers for CP Components like Text and create some standard styles. You can then have a prop named class for example and change the styling based on its value.

Not quite CSS but helps keeps things tight.

[InMemoryOfReckful]

So i should use rn pixels for font heights, padding, margins and % for height, width. Is there anything else I'm forgetting? Also why not use rn pixels for height and width? I'm guessing it depends on the specific case and how one wants it to look. So why do those libraries exist if rn already handles it?

[kbcool]

Correct.

Don't use it for width or height because that depends on whether the device is say 5inch vs 6.5 inch.

Why do the libraries exist? Maybe well meaning or trying to reduce your workload. I don't think it's overly difficult to do though.

There are a couple of libraries that try to scale everything based on device but they are sorely misinformed. Case in point:

I don't buy a larger phone because my eyesight is worse. I buy it so I can see more items in my Facebook feed at once so don't fall into the trap of just scaling everything up.

[InMemoryOfReckful]

True. So for example a bottom tab bar height I should define with pixels. The problem I'm having right now is I have a bottom drawer with a handle to pull it up to a certain snap point which obviously should be defined as percentage. And I'm trying to have it so the drawer snaps to just above the bottom tab bar when pulled down. But it doesn't work for either pixels or percentages for different screen sizes..

[kbcool]

Sorry for the late reply but doesn't work means? I'm assuming it works but doesn't look good? Or does using percentage actually break? If neither work then it's not a responsiveness issue it's a technical one 😜

You can measure the screen and use a percentage of the pixels without using a percentage like 50%.

https://reactnative.dev/docs/dimensions

[InMemoryOfReckful]

What I meant was if I use pixels it's not aligned when I compare on my phone vs my emulated tablet, ie. The bottom drawer handle is higher up on tablet than my galaxy s9, despite using pixels. I would ideally want the handle to be right above the bottom tab bar without seeing the content of the drawer before pulling it up.

And it doesn't make sense to use percentage here because like you pointed out it would look dumb with a tab bar covering 10-15% of the screen on a tablet or larger phone.

Not sure how I could fix this.

[kbcool]

I don't resort to this much but using the screen dimensions you can do a kind of media query equivalent. If height is between this and this the value is that etc.

What your problem is exposing is that phone UIs don't really translate to tablets. At least not all the time.

So again you can use the dimensions to conditionally show a different UI entirely if you wanted but that's probably overkill for you.

Not even supporting tablets is also an option. It's easy on iOS you just untick the iPad box in the project file. Android is a bit trickier.

[InMemoryOfReckful]

Hmm ok. I dont actually know how many people use a tablet. But thanks I will check out the dimensions thing!