I am using react-native-image-crop-picker in my react naive android project to crop images. After setting freeStyleCropEnabled = true in my app I am able to do freestyle cropping but after a certain limit, I am not able to reduce the height of the frame to be cropped. Any solution regarding this?
You can only do free style cropping by setting freeStyleCropEnabled = true by using
react-native-image-crop-picker library for a certain extent. for more free style cropping use react-native-image-crop-tools library.
"freeStyleCropEnabled" is allowed for only Android.
You can use cropperToolbarTitle: 'Move and Scale' for the IOS.
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 have images loading with some issue. I am using Panalleum library to load the images.
If I zoom out and see the same image, there you would see some small dots creating lines. This is related to Anti-Aliasing.
How can I fix this blurriness or lines on the image?
I want to take a screenshot of a entire (large on height) ScrollView.
I'm using Expo.takeSnapshotAsync to take the screenshot, but the returned image is truncated (croped) on height, hiding some part of ScrollView content.
This behavior could observed on both platforms, ios and android, using expo sdk v25.0.0.
Any tip is welcome.
Thanks!
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.
Using SDK 3.5.1 currently
I have some remotely hosted images that I am loading into my ImageViews. I have hires:true already set.
Here is the code I'm using:
var hasattachesThumbIcon = Ti.UI.createImageView({
width:96,
height:'auto',
top:6,
bottom:6,
right:10,
image:hasattachesThumb,
defaultImage:'/icons/placeholder_big.png',
hires:true,
});
I think the issue is that I'm not explicitly setting the height of the image. The reason is that the images are of all different sizes and aspect ratios, my only requirement is that they should fit into a block measuring 96 pixels, so i've set it as such.
Any ideas?
Thanks!
Are you trying to test 2X or 3X images? If you are trying 3X images then hiRes will not work as the support is still not present. Also as suggested by Mark, change from auto to Titanium.UI.SIZE, as auto has been deprecated. Also can you confirm whether the default image is getting displayed till the remote image is being downloaded?