I want to set my image according to screen size and
dimension but I am not able to do it please help me out
If I rotate the phone it should set accordingly
<View style={{flex: 1}}>
<Image source={img1} style={{flex: 1}} />
</View>
There are 3 ways you can try to do scaling of your images:
resize mode (https://reactnative.dev/docs/image#resizemode)
resizemethod (Android Only)(https://reactnative.dev/docs/image#resizemethod-android)
Dimensions & Pixel Ratio (https://reactnative.dev/docs/pixelratio)
Using Dimensions and Pixel ratio you can set the height and width of the image based on your device.
Note: You can comment down if you need additional information.
Related
I used hd image but my image have bad quality (large and pixelated) whit this code:
<Image source={require('../../assets/images/logo.png')}/>
When i resizeMode: 'center' the quality is good, but image is small.
<Image style={{resizeMode: 'center'}}
source={require('../../assets/images/logo.png')}/>
My actual image size is:
153px x 43px
You know the dimensions of the image. So set style={{ resizeMode:'stretch', width:XXXX, height:XXXX }} where width and height maintain aspect ratio. Using stretch has the added benefit of the image's View container being perfectly fit to it, so you can position the element perfectly.
My issue right now is when videos that were recorded in portrait mode get cut off or zoomed in when watching them in landscape. What is happening is the user has to scroll down to see the length of the video because the width is set to 100%. I am able to add 35% left and right padding to the view styling to make the video fit the screen but it doesn't seem very robust as it still gets slightly cut off on different devices. Is there any styling advice for this situation? I am new to this so if you want any more information regarding the problem let me know.
You can try wrapping up the <Video /> component inside a parent <View /> with flex: 1. Something like this will work -
<View style={{flex: 1}}>
<View style={{flex: 1}}/>
<Video style={{flex: 1}} resizeMode="contain" />
<View style={{flex: 1}}/>
</View>
resizeMode="contain" will maintain the aspect ration of the video and the other two <View />s will occupy equal space causing the portrait video to render in landscape.
I can't change the default size of the thumbnail from NativeBase. I can display the default circle, which is the small and the large one, but I want to display a bigger circle than the default size. Here's my code for the thumbnail :
<Thumbnail size={200} style={{margin: 30}} source={require('../../../public/images/profile/yellow.jpg')} />
The props size doesn't work, the thumbnail remains small.
My NativeBase version : 2.3.5
Native Base Component doesn't have a size props, you should add width and height, and one more thing you shouldn't forget please add borderRadius divided by 2 to ensure the shape is retain Circle
<Thumbnail style={{width: 30, height: 30, borderRadius: 30/2}} source={require('../../../public/images/profile/yellow.jpg')} />
You can simply increase the Thumbnail size by using this trick. Just take the property of scale with <Thumbnail/>.
Just copy-paste the below code in your app
<Thumbnail
scaleX={3} scaleY={3} style={{margin: 30}}
source={require('../../../public/images/profile/yellow.jpg')}/>
You can change the scale values as per your need. Let me know if this fixes your issue.
The Thumbnail component from NativeBase doesn't have the size attribute. Try to set width and height properties of the style attribute
<Thumbnail style={{width: 100, height: 100, margin: 30}} source={require('../../../public/images/profile/yellow.jpg')} />
NativeBase Thumbnail component comes with small and large props for size. You can also set width and height to have image with other dimensions
I have an image that is very tall, but not very large. I want to print it in a scrollview, so you can see it all on one screen, but nothing works.
after playing with widths and heights and flexs for my scrollview and my image, the best result I get is when I have on of them with style={{width='100%'}}, like that
<ScrollView style={{width: '100%'}}>
<Image
source={require('./assets/skeleton/fullSkeleton.png')}
resizeMode='cover'
/>
</ScrollView>
which prints the image at full width, but the scrollview's height is the original image's height, which doesn't let me see the whole resized image.
Here, a bad drawing to represent my image, and what I want to see on my phone screen
EDIT:
With this bit of code:
<ScrollView
contentContainerStyle={{alignItems: 'center'}}>
<Image
source={require('./fullSkeleton.png')}
resizeMode='cover'
/>
</ScrollView>
I end up with
Which can be scrolled down to see the rest of the Image. As you can see, it can be navigated vertically, but doesn't take the whole screen's width
This kind of thing in Reat Native is actually quite tricky. But you can do it easily; First get picture dimensions:
const FullWidthPicture = ({ uri }) => {
const [ratio, setRatio] = useState(1);
useEffect(() => {
if (uri) {
Image.getSize(uri, (width, height) => {
setRatio(width / height);
});
}
}, [uri]);
return (
<Image
style={{ width: '100%', height: undefined, aspectRatio: ratio }}
resizeMode="contain"
source={{ uri }}
/>
);
};
And use it like this:
<ScrollView style={{flex: 1}}>
<FulWidthImage uri={pictureUri} />
</ScrollView>
The following may help:
You can use contentContainerStyle to style the contents of the ScrollView. Like this (essentially what you have):
<ScrollView
contentContainerStyle={{alignItems: 'center'}}>
<Image
source={require('./fullSkeleton.png')}
resizeMode='cover'
/>
</ScrollView>
That works for me - I can scroll down the whole image and at the bottom it stays visible.
NB: To make the image cover the whole screen while maintaining the height required, you will need to set the width specifically. In my case on iPhone 7+ that meant adding style={{width: 414}} to the Image component AND changing resizeMode to 'stretch'.
Here is the official take on Image resizing...and getting device dimensions will be useful here too.
I am using below lines of code to display an image in full window in my application
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Image source={avatarSource}
style={{width, height}}
resizeMode={Image.resizeMode.contain} />
</View>
The avatarSource is a base64 encoded image string. When the app starts, only thumbnails are downloaded for all the images and if the user clicks on the avatar, the full image is shown similar to Whatsapp. If the full image is not present, initially the thumbnail is loaded on the full screen and the full image is downloaded from the server and then once the full image is downloaded, the avatarSource is updated and as a result, the full image is shown in the view. This thing works seamlessly on iOS but on Android, once the full image is downloaded, the Image component updates itself but doesn't render anything and I just see a white screen. If I remove the resizeMode from the Image, then the Image component updates correctly but I think the default resizeMode is cover due to which some parts of the image are clipped.
If you have come across this problem or/and have some solution in mind, please share. Thanks in advance!
use resizeMode: "contain" as part of the style, so:
style={{width, height, resizeMode: "contain"}}