I am implementing a "ruler" feature to my app and it is critical that the ruler size/scale, in centimeters, is consistent across multiple devices. That is, 1 'tick' must be always equal to 1 centimenter. Howerver I have not found in any documentation a way to size components using real-world units (cm, inch) like you can do in CSS; Nor have I found a way to accurately get the screen size (in inches or cm) or DPI.
Is there a way to use cm/inches in React Native or get the REAL screen DPI?
1 inch = 160 dp (Always)
Note that 1 inch is ALWAYS 160dp, independent of screen size. A dp(density-independent pixels) is a physical distance of 1/160th of an inch.
React-Native uses dp(density-independent pixels) as the unit in styling.
So, if you write:
<View style={{ height: 160, width:160, backgroundColor: 'red }}>
</View>
This gives you a red block of 1 inch X 1 inch
Dimensions properties in react native are unitless, so those properties are not available in ReactNative. The best you can do is use PixelRatio's getPixelSizeForLayoutSize() which is documented here: https://reactnative.dev/docs/pixelratio#getpixelsizeforlayoutsize
You would need to also have the pixel density (dpi) for your solution, and the formula:
https://www.pixelto.net/px-to-cm-converter
You still might run into some weird situations where pixels are split in half and other rounding errors as you're trying to fit 1cm into tiny pixels on the screen that may not always equal to 1cm, due to physical limitations.
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
I'm trying to create a 2D cross-platform game (primarily for android & ios in portrait mode, however compatibility with a tablet/desktop would be a bonus) and I'm trying to wrap my head around scaling of my sprites.
I've looked online, and I've ended up setting the following in my Project Settings > Stretch
'Mode' : 2D
'Aspect' : keep-height.
According to https://www.mydevice.io the viewport of my android phone is 360 x 640px (the standard 16:9 ratio for mobiles). But obviously phones/tablet screens come in all sorts of dimensions.
If I wanted to create a sprite with a width exactly 1/3rd of that of my screen/viewport, how should I go about doing this? Should I be creating multiple sprites of various dimensions (in say, GraphicsGale) to account for different screen sizes, or should I be purely doing this scaling in Godot?
I know there's a 'scale' property in Godot, but I can't see a way of setting my image width and height via pixels or by a percentage of the viewport.
Have you tried setting the sprite size depending on the viewport height and width ?
$sprite.size.x = get_viewport().size.x * 0.33
$sprite.size.y = get_viewport().size.y * 0.33
You can check out this reddit post if this is not working.
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.
For a simple project which will be deployed to specific devices, I am wondering if it is possible to specify measurements using native pixels, hence ignoring the device dpi (which could be, for instance, overridden by the user in Windows at system level).
Currently, the only solution seems to divide any value for pixel ratio.
Is there a simpler hence more manageable way?
React Native comes with a PixelRatio module that has a method called get. You must manually divide all of your measurements by the pixel ratio.
Start with the number of physical pixels.
Divide it by the pixel ratio (PixelRatio.get()) to get the corresponding number of logical pixels.
Use the number of logical pixels in StyleSheet.create and other layout-related methods.
React Native and the underlying native UI frameworks will convert the logical pixels back to physical pixels.
You could write a helper method for this if it were to get tedious. This is an idea for an API:
StyleSheet.create({
box: {
width: physical(100),
height: physical(75),
},
});
Most of the time though you should work with logical pixels. It's only when you want to precisely control the hardware screen or are interacting with a system without a notion of screen scale (e.g. fetching a JPEG image) that you'd want to work with physical pixels.
everybody seems to use pixels to determine screen size of a device, but it is not a good practice anymore. You can use bootstrap to create a responsive website, but it will fail on full hd screens, because a lot of pixels, don't mean big screen anymore.
My example:
on bigger screens, I don't want website to take the entire screen and on smaller screens I do. The easy solution is to use max-width, but it doesn't work if a device has a full hd screen, because it's small with a lot of pixels.
#media screen and (min-resolution: 300dpi) {
//styling which will be applied >= 300dpi
}
Source 1
Source 2