Comments (4)
@marudy I was going to create an issue for what I'm experiencing but this seems like a relevant issue to add it to (please let me know if you'd like me create a new one).
It may be I'm just not fully understanding something, but following a couple of vertically-responsive issues we're having I did a deep-dive into the code and calcuated %:pixel accuracy of all our elements. I can confirm that all heights have been specified using your convertHeightPercentageToDP
(hereafter hp
) function. I won't go into detail listing all the tables and stats I drew up, cause many of them were to a <1px degree of accuracy, but when it came to font size I noticed a discrepancy.
So as an example, in our app's common header we have a text element called HeaderText, which has the following style property set:
fontSize: hp( 2.8 )
Using two devices to calculate for a minute, the iPhone SE and the iPhone 8 Plus, I would expect the font to come out as follows:
SE => 667px * 0.028 = 18.676px
8+ => 736px * 0.028 = 20.608px
However, instead the fonts come out as:
SE => 39px (5.847% of screen height)
8+ => 43px (5.842% of screen height)
Now I know there is rounding to the nearest pixel done, so the decimals don't bother me, but these but the % of the screen height is actually roughly twice what I asked it to provide. I would understand if this is because the SE has a render scale of 2x, but the 8+ is a 3x render scale.
So, if I want a text element to take up 2.8% of the screen's height, what do I set the font size to?
NB: Apologies if I've made a glaring mistake - I'm still newish to the whole display scaling/DP thing
from react-native-responsive-screen.
@LukasZvikas the idea of using percentages is to have the same percentage for all the devices. Otherwise it doesn't make sense; just go use DP. If you can't make a specific percentage to work properly, then it probably means that the rest of your app is not as responsive. In this case set your break points as you have done above and use DP.
from react-native-responsive-screen.
@jcush - are you able to determine where the discrepancy comes in? Is it that hp(2.8)
is yielding wrong values, or is it that the font selected by the OS when setting fontSize: hp(2.8)
ends up being different than expected?
I am not entirely sure that iOS states unequivocally that fontSize is a function of screen height, which is what your test seems to expect. Do you know if they do? Have a link?
from react-native-responsive-screen.
Anyone can help me, in my app i set the fontSize with hp it looks nice in my phone but it does'nt look like in other phones when i run, please help me
from react-native-responsive-screen.
Related Issues (20)
- Proposed new feature GetScreenType() which returns XS,SM,M,L
- Samsung Galaxy S10 beyond 1q | 1080x2009 | 402 (dpi) font not scaled properly HOT 1
- Using heightPercentageToDP but with width keeping the same aspect ratio HOT 1
- Proposed change: Dimensions API to the useWindowDimensions hook. HOT 3
- Using the library with safe area views.
- Jest encountered an unexpected token HOT 3
- Feature Request: Able to provide viewport sizes
- ERROR TypeError: Cannot read property 'setState' of undefined, js engine: hermes HOT 4
- TypeError: 0, _$$_REQUIRE(_dependencyMap[13(...)ive-screen").widthPercentageToDP is not a function (it is undefined)
- [Feature request] breakpointGroup to return a number instead of strings
- Units size expected with styled components HOT 2
- Strange results in two different emulators HOT 3
- TypeError: this.setState is not a function HOT 6
- Which lib to use? HOT 2
- TypeError: (0, _scaling.responsiveHeight) is not a function.
- will RNRS support functional components anytime soon? this.setState undefined error is still here HOT 3
- Cannot resolve symbol 'heightPercentageToDP' HOT 4
- Feature request - is there a way to have some sort of stylesheet-based listener? HOT 1
- How to use the lor() method in the function component HOT 11
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-responsive-screen.