Margin styling about react-native-responsive-screen HOT 8 CLOSED

Hi @mozamonkey,

thanks for communicating that the library has been very helpful for you! It's my first open source package and I'm really glad to be able to help fellow developers 😃

Now regarding your questions, I believe both of them are answered in the Usage section of the README, but maybe i not clearly enough or there are not enough examples ?! I would like your feedback on that.

So regarding the 1st question, I will quote the 3rd bullet of Usage/Readme:

Methods widthPercentageToDP and heightPercentageToDP can be used for any style (CSS) property that accepts DP as value ... Use the exposed methods for all of the type number properties used in your app in order to make your app fully responsive for all screen sizes.

So yes you can do that, I do it all the time for font-size and maybe margin, padding etc, if I need to. Font-size is a good example and I implement it like that: I receive the design delivered and I use percentage values (i.e. widthPercentageToDP('3%')) to achieve the same visual result. I usually do all the app's font-sizes with only one method (either the width one of the height one) and that makes it very easy to have a reference among screens and different size cases. After a while I get accustomed and it becomes easy to config a new font size. please elaborate on that.

Regarding your 2nd question I will quote the 5th bullet:

The package methods can be used with or without flex depending on what you want to do and how you choose to implement it.

When I develop a RN UI, I always use flex. It's the suggested approach from RN anyways, so I combine them. I use flex for aligning things and percentages wherever I need DP values and flex cannot work as I would like to. I.e. my containers are always flex: 1. And probably it's better to go with flex if possible - but it can't do anything. Now on how to use it properly that's kind of another topic, but I can share a couple of specific examples if you would like to.

I'm sorry but I don't understand the question about my article. where do I write about 68? Can you elaborate on that?

BTW can you share some info/screenshots over the app you are working on? I would like to have a section where I will showcase apps that use this package! Thanks

from react-native-responsive-screen.

I'll address everything you've written very soon! Thanks for your detailed response!

Can I use width or height for styling like margins, fontSize, etc? From what you wrote it sounds like it doesn't matter. Why wouldn't it matter for scaling? Like if my fontSize: 30, then its scaled to either 8% if its an iPhone 6 and 4.497751% if i calculate using height dp. Does whether or not I use wp or hp matter?

I'm currently rendering the app off a iPhone 6 but when I simulate on an iPhone X the sizing is off. I'm using your library to improve sizing. For the dp values, googling them is okay right? For example the iPhone 6 is 375 (w) and 667 (h) correct?

And if I wanted to convert my entire project, I have to just do the math manually correct (or make a function, etc)?

Thank you for your time.

from react-native-responsive-screen.

No worries, glad to have this conversation and improve things from my side as well if needed.

Maybe I didn't explain it properly. It does mater to use the lib instead of having raw DP, especially for scaling. And as I said, I always use it for font-size. But regarding other CSS properties, like margin, padding you may want to use "normal" percentage with a relative value to the parent element (if this is the use case). Or you may prefer to achieve your end goal with flex. And yes try to avoid the raw DP as much as possible if you want the "scale" effect over your UI across devices.

You can do the conversion with the way you propose but to get the screen's width/height i do it with RN API instead of Googling. I do it like that in the 1st screen of my app. You can console.log the values..

  const deviceScale = Dimensions.get('window').scale;
  const deviceWidth = Dimensions.get('window').width;
  const deviceHeight = Dimensions.get('window').height;

But now to convert from a specific device, we need to take into consideration the scale factor. You need to include this in your calculations. And then you have:

const scaledWidth = ${Math.round(deviceWidth) * scale}
const scaledHeight = ${Math.round(deviceHeight) * scale}

So now these are the final width/height that you need to use to calculate your percentage values. So if you have a font size of 30 DP already and you use height, then your percentage becomes 30 / scaledHeight .

from react-native-responsive-screen.

Thanks! That makes lots of sense. Just for some more clarity:
const deviceScale = Dimensions.get('window').scale;

What value does deviceScale collect?

And if we're scaling fontSize: 30, does it matter whether we called the wp or hp function?

from react-native-responsive-screen.

I have many properties like marginTop, marginBottom, marginLeft, padding, shadowRadius, elevation, and shadowOpacity. Could I apply hp/wp to these?

I'm quoting:

You may want to use "normal" percentage with a relative value to the parent element (if this is the use case). Or you may prefer to achieve your end goal with flex.

This means I could use your library for these properties effectively correct? Thanks for all the help.

from react-native-responsive-screen.

Hey,

1. deviceScale is the device's scale factor. It is a number, that represents how many screen pixels the device is using to represent 1 independent pixel. You can have a more extensive read about it and links to other sources to this article of mine.

2. If you are scaling fontSize, it doesn't matter if you are using hp pr wp. I just stick to 1 of them (i.e. hp) for consistency and reference across the app.

3. I am using the lib for margin, padding properties myself as well. For shadowRadius, elevation, and shadowOpacity properties I haven't used it but all these properties accept numeric values, so you can use the lib for them as well. I would like to see a css example of yours after implementing it 😃

No worries, glad to help! Looking forward to your complete reply on my 1st reposnse!

from react-native-responsive-screen.

Hey @mozamonkey,

I hope you found my replies helpful. I will be closing this issue if there is no objection.

Is it possible that you share some info/screenshots over the app you are working on? I would like to have a section where I will showcase apps that use this package! You can always email at [email protected]

Thanks

from react-native-responsive-screen.

Closing issue, since this is answered.

@mozamonkey, I would still love to get your feedback.

Thanks,
Tasos

from react-native-responsive-screen.