search

khevamann / rn-responsive-styles

Responsive styles for react-native and react-native-web
MIT License
40 stars 3 forks source link

Overrides on provided sizes. #2

Closed EthanHermsey closed 2 years ago

EthanHermsey commented 2 years ago

Hey there!

This might be a little weird, and I DEFINITELY butchered the code a bit ( so don't merge this I guess, it's for the idea ).

I'm happily using your library in a personal project, I like the idea of breakpoints. However, I don't love the idea of having to provide a style for each breakpoint, so I tried to 'fix' that.

For example: I have a main style where a View is 30% of the window width. For screen sizes smaller than SMALL_DEVICE I want to have the view be the full 100% of the window's width. Now I have to specify that in the SMALL_DEVICE styling ánd the EXTRA_SMALL_DEVICE styling.

I changed the code in the library so that it searches for the smallest provided override. If the screen is smaller than EXTRA_SMALL_SCREEN, but I only provided a style for SMALL_SCREEN, it will pick that style ( because the width is lower than it's breakpoint ). I feel like that's more like @media rules from CSS..

Like I said, this is for the idea. If you're into it you can use it.

Kind regards, Ethan Hermsey

khevamann commented 2 years ago

Thanks for submitting this and bringing the issue to my attention. I totally agree with this issue, let me think about it some more and see if I can think of a good solution to the problem. I will take your code into consideration. Ideally, it would be nice to use something intuitive, like you mentioned CSS media rules, so that you could specify >= DEVICE_SIZES.SMALL_DEVICE

EthanHermsey commented 2 years ago

Sorry for the delayed response. Great to hear, I'm interested to see what you come up with. If you could be able to specify something like >= DEVICE_SIZES.SMALL_DEVICE, as an addition to the standard sizing, that would be great, then you can have both. I like that idea :)

khevamann commented 2 years ago

Closing this in favor of #3