I want to change font sizes depending on breakpoints globally through redux, what is the standard way to scale typography for different screen sizes for mobile apps.
Can someone please guide me whether this is font sizes changed in accessibility settings or these are guidelines for setting font sizes for different screen sizes ie: small, medium, etc
and if yes then what exactly what is the screen size of small device and which screen sizes are defined in small. I need a standard for all break points(screen sizes)
enter image description here
I have tried scaled metrics and changing font Sizes using the dimensions library in react native but my CTO is saying that it doesn't scale properly according to apple's guidelines
I used scaled metrics and changing font Sizes using the dimensions library in react native but it doesn't scale properly according to apple's guidelines.
Related
I'm working on a react native application in a company and my manager asked me what is the best image size in pexels to upload from API (dashboard) to fit the View in the application ?
And I'm using percentage units not numbers: (width: '80%', height: '50%') I don't know what is the best sized of images to fit or the aspect ratio of the image and react native is unitless!
What should we add 'Hint' for the client in the dashboard when he upload any image ?
Or how could I know the best image dimensions to fit all screens ?
In our organisation, we usually follow the following convensions to make an image fully responsive.
Get the dimentions of the image using: const {width, height} = Image.resolveAssetSource('path-to-your-image');
Get the ratio factor of width and height by using: const ratioFactor = height/width;
Whenever you set the width of your screen by 'n' digit, set the height to 'n*ratioFactor'
In this ways the image can never be stretched or compressed. It will be fully responsive according to it's dimensions.
Preferably use image with standard dimentions as 1024 x 768 pixels.
In case the app target both iOS and Android, there is a multitude of devices with various resolutions and pixel densities from high-end iPads to low-end androids devices with smaller resolutions.
The General rule of thumb is to find the average image size which will not pixelated (look blurry) on the high-end devices but does not have a large download size in case some users will have slow internet.
You should start with 1024 x 768 pixels which is a standard dimension for iPad
Consider using resizeMode prop of react native image. With resizeMode you can manage to render image based on available space in screen.
Check it here : https://reactnative.dev/docs/image#resizemode
Since React Native uses only pixels or percentages for units, how do we handle accessibility of larger text?
I know I can disable font scaling, but that is what I specifically do not want to do.
I am asking specifically for TextInput since there are other parts of the screen which won't change even if you scale up like the bottom nav bar. Because say we set a widget for time input on the browser we can say 5em to limit it to 5 character sizes regardless of the size of the text.
One way I can think of is to use * 16 in place of em but that does not work when you scale up the font since 16 is fixed.
Also I am looking for something that works in Expo. AccessibilityInfo does not appear to provide the size and I can't find any information on accessing the value of Dynamic Type
My crazy idea at the moment is to have a transparent Text that I has an onLayout and I obtain the size of the component and set it in a context that all my custom TextInput will use as a measurement that has a size based on number of characters.
react-native-elements is utilizing a helper function called normalize for font scaling which is implemented as follows.
import { moderateScale } from 'react-native-size-matters';
function normalize(number, factor = 0.25) {
return moderateScale(number, factor);
}
export default normalize
I'm currently using react-native-size-matters on developing UIs for multiple devices along with above font scaling by react-native-elements. Works fine in almost all the time.
Check out the react-native-size-matters repo is you have doubts on the implementation. Author has a good article written on explaining his approach as well.
PixelRatio.getFontScale() allows you to get the font scale that adjusts its number based on the user's choice of dynamic type.
The number you can use as a multiplier on the widths to increase or decrease depending on the font size if a dynamic font size is used.
One thing to note though, changing the size does not trigger a re-render unlike useColorScheme() since there's no context provided that has this information.
I've got a UWP app with a map view. For some of my MapIcons, I need to set a custom image. Others use the default image. My custom image is approximately the same size as the default image. Additionally, I generated different sizes for different screen scales, and named them accordingly (for example, MyIcon.scale-200.png, etc).
I tested this by running the app on my computer, a Surface Pro, and setting the scaling to different values in the Settings app. It seems to work. As I choose larger scales, I get larger custom MapIcons, and the custom icon is similar in size to the default icon.
However, my customers report that it is not working correctly when I distribute my app. They are sending me screen shots that show the custom MapIcon either much larger, or noticeably smaller than the default one. I can't reproduce or explain these results.
What could cause this?
I'm aware that I can disable font scaling globally in my React Native app by putting Text.defaultProps.allowFontScaling = false in the constructor of the root component (i.e. in the root index.js or App.js file). However, is there a way to allow a max value for scaling, instead of disabling it completely?
I've tried adjustsFontSizeToFit = true thinking it would prevent text from scaling up to really large sizes (which it does), but now all the text becomes too small and it breaks the styling of the app.
I've tried using minimumFontScale in combination with adjustsFontSizeToFit above, since according to the docs, minimumFontScale "specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled." I set this value to 1.0 but the text still scales up to a ridiculously unreadable size (for example, if the "Larger Accessibility Size" is enabled in iOS and set to max scale) and setting it to a lower value (for example 0.25) allows the text to fit reasonably in my app, but the spacing and relative sizing becomes broken.
It would be nice if the text would remain it's default size, and still be allowed to scale up with "Accessibility Size" enabled in iOS, but only to a certain point–is there a way to achieve this?
In react native 0.58+ you can use the new prop maxFontSizeMultiplier inside the Text Component https://facebook.github.io/react-native/docs/text#maxfontsizemultiplier
You can use
allowFontScaling={false}
along with
Math.min(PixelRatio.getFontScale() * yourFontSizeBase, yourFontSizeBase)
to limit the max font size.
How can i set font Size in pixels?
Hello,
Designer send me sizes of app components. Header must be 60 pixels
, but if i put font size 60, it is very big. How can i adjust it for pixels. Thank you. (IOS DEVICE)
You cannot do pixels on mobile. You do DPI. Tell your designer to get with the tech. He's designing for web. While you can figure out how many DPI correlate to how many pixels for the current device (its a device specific thing) with the PixelRatio API - https://facebook.github.io/react-native/docs/pixelratio.html - it's putting in effort to make your design worse. DPI works great across different screens/sizes.