When I display my images in the horizontal scroll-view with paging enabled the performance of app decreases. I know it is due to high resolution of the image. I want a good way so that I can load image with out degrading it's quality.
Thank you in advance.
First, using a FlatList instead of a scroll view will probably improve performance, since off-screen images will not be rendered.
Second, using images with resolution that is greater than the screen is just wasteful, since they will get resized anyway. You can pre-compute several sizes and use the most appropriate one computing the actual screen resolution using PixelRatio
var image = getImage({
width: PixelRatio.getPixelSizeForLayoutSize(200),
height: PixelRatio.getPixelSizeForLayoutSize(100),
});
<Image source={image} style={{width: 200, height: 100}} />
See the PixelRatio documentation for more detailed on fetching an appropriate size image.
Related
I built an iOS app with React Native. I used Expo to build it. In dev mode, I have an image that I manipulate and it works as expected. In production mode the image is zoomed in and cut off. Here is the code:
<Image
source={require("../assets/Logo.png")}
resizeMode={"center"}
style={{
resizeMode: "center",
transform: [{ scale: 0.8 }],
width: 250,
height: 75,
}}
/>
The reason I have both the resizeMode prop and the style is because it wasn't working earlier so I just added both in hopes that one of them would work. Please let me know if you know what the problem might be. Thanks.
There is the issue with center resize mode in iOS, see the issue for details.
Use contain instead, which is probably the right approach anyway in this case.
contain: Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).
See all options for resize mode.
I am trying to figure out how to precisely position an image in a container in React Native.
Right now I have what is on the left, and I would like to be able to position the image like the example on the right. (and not justifying center as the part of the image I want to show is not necessarily the center of the image)
To be more clear what I want is to be able to re-position the part of the image that is showing. (ie: move it to the right but keeping it only taking up the same space)
and here is a snack:snack.expo.io
As far as I understand, what you are looking for is resizeMode property.
resizeMode = "cover"
Scale the image uniformly so that both
dimensions of the image will be equal to or larger than the
corresponding dimension of the view.
Try this. Note that I added resizeMode="cover".
<Image style={styles.image} resizeMode="cover" source={{uri: 'https://www.gstatic.com/webp/gallery/1.jpg'}} />
So... I did find that I can get the result I want if I add:
width: '170%'
image:{
flex: 1,
height: '100%',
width: '170%'
},
My assumption would be that this would stretch the image out but it just seems to re-position it. I am not sure why this behaves this way. I would think that there would be a better way to approach this problem but I haven't found anything.
My current homepage banner scales down to mobile and the image & text shrinks to a size that's unreadable.
How can you make it so that after it scales to a certain point the image stops scaling and it just cuts off the width of the image?
My site: www.riotsociety.com
Example site: sunglass.la
Add this into your CSS files.
This will make your slider 70% of the viewport height. So it will take 70% of any device's height.
this will solve the image problem
.fullwidthbanner-container {
height: 70vh; //please work around this value
}
Now the thing is that the Slider's JS is calculating and giving to each element sizes and styling's.
The buttons content becomes 3px in size on mobiles.
Now I see 2 solutions for this.
Read the documentation of the slider library or plugin if there is any and try to make it not give heights and values for the responsive part of the slider and just do it by your own. You'll need a little bit of CSS.
Or, let it as it is and write on top CSS.
Do you have access to the code? Or it's just a shopify website? I can see that the slider is owl_carrousel
When you Share a video from YouTube it asks you for a size, in px. How do you then make that video scale as the screen gets smaller?
It's pretty straight forward you just need to add width: 100% on the enclosing div or to the iframe and it will resize automatically. If you add height 100% it will squash the video pretty bad so from my experience just adding width is enough.
I'm designing a responsive site using edge reflow with the following rules for breakpoints:
<480px, <768, 1024>
I'm using a different background picture for each breakpoint of respective widths. However when I add them to Reflow with contain for scale-x it seems as if the image I created is not that size. Most of them were at least 200 pixels shorter than designed.
So my question is what dimensions should I use background images for each breakpoint as well as any other guidance for this using Reflow or suggestions of I'm doing something wrong.
Normally I'd use cover rather than contain but then the image scales and doesn't show what I need it to from device to device.
Thanks