I have a view that spans 100% of its parent and inside I have a square image that needs to span 100% of that view and keep its aspect ratio without cropping. How can I accomplish this without absolute dimensions?
Here is a mock up reference image of what I want to do:
Okay figured it out, you need to have a view around your image.
<View style={{ aspectRatio: 1 }}>
<Image resizeMode="cover" style={{ aspectRatio: 1, height: 100 }} />
<View>
You can specify resizeMode on the Image tag. Some of the options maintain aspect ratio (cover, contain).
Use flex:1 in your style.
<View style={styles.canvasContainer}>
<Image
resizeMode="contain"
source={{uri: 'http://abc.def.com/hij.jpg'}}
style={styles.canvas} />
</View>
var styles = StyleSheet.create({
canvasContainer: {
flex:1,
alignItems: 'stretch'
},
canvas: {
flex:1 //This is what you want!
// width: 200,
// height: 200
}});
Live Demo: https://snack.expo.io/#xystudio/fullsizeimage
Snapshot:
Related
Image of what I am envisioning
I'm trying to add a center tick mark to a slider.
Is it possible to vertically and horizontally center View 1 with respect to View 2 and at the same time render View 2 above View 1 (using zIndex)? I can accomplish this by placing View 1 below View 2 in the Y direction and set the margin of View 1 so it appears underneath View 2 (in the Z direction). Is that the correct way to do this?
Accomplishing this by fiddling with the margins seems like it could cause problems on different size screens.
Try giving view1 and view2 absolute positions, and place them in a parent container that centers vertically and horizontally. This will allow them to overlap without having to play with margin, and will naturally place the view2 on top of view1 without having to use zIndex
export default function App() {
return (
<View style={styles.container}>
<View style={styles.specialContainer}>
<View style={styles.tall}/>
<View style={styles.long}/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ecf0f1',
padding: 8,
},
specialContainer:{
width:300,
aspectRatio:1,
backgroundColor:'pink',
alignItems:'center',
justifyContent:'center'
},
long:{
position:'absolute',
backgroundColor:'purple',
width:'60%',
height:24,
// alignSelf:'center'
},
tall:{
position:'absolute',
backgroundColor:'green',
height:'60%',
width:24,
// alignSelf:'center',
}
});
Try it out here
You can surround the Views with a parent View like so:
<View style={{ width: '100%', justifyContent: 'center', alignItem: 'center' }}>
//horizontal
<View style={{ zIndex: 1, elevation: 1, width: '100%', height: '20'% }}></View>
//vertical
<View style={{ zIndex: 0, elevation: 0, height: '100%', width: '20%' }}></View>
</View>
This will adjust dynamically depending on screen size since all height and width values are set using percentages.
I want to show any sized image data in resized image container in react native. The problem that I am facing is in resizing the image container. I have tested the contain, stretched, and cover resizes modes but I am not getting the required results. When I use contain mode the image is showing extra paddings around it, with the stretched mode, the image is stretching and compressing and with the cover mode, the image is cutting. Tried to fix with react-native-canvas, react-native-FitToImage, react-native-scale-image, react-native-image-view but getting same result while using resize mode in Image component.I want to reduce container size equal to image size click on it and here is my code given below
<ViewShot
ref={viewShotRef}
style={
{flex: 1 / 1.1,}
}
options={{format: 'jpg', quality: 1.0, result: 'base64'}}>
<Image
source={{
uri:
'data:image/jpeg;base64,' +
props.background_remove.image,
}}
resizeMode="contain"
style={
{
flex: 1
}
}
/>
</ViewShot>
For example I have a letter size viewShot with image:
<View style={{flex: 1}}>
<ViewShot
ref={viewShotRef}
options={{
format: "jpg",
width: 2550,
height: 3300,
quality: 1,
result: 'base64'
}}
style={{
width: 2550,
height: 3300,
overflow: 'hidden'
}}
>
<View style={{zIndex: 3}}>
<Image
source={{
uri:
'data:image/jpeg;base64,' +
props.background_remove.image,
}}
style={{
resizeMode: 'contain',
width: 2550,
height: 3300
}}
/>
</ViewShot>
</View>
Simple issue: Whenever I use flex on an image it simply doesn't show up when I preview my app on expo.
This is the way I'm doing it:
<Image
style = {{flex: 1, height: undefined, width: undefined}}
source = {require('./img/anyImage.png')}
/>
If I just define the height and width, no flex, they show up. Is there any particular reason as to why my images aren't showing up?
Note: I've tried giving set values to both height and width.
Thanks a lot!
passing null instead of undefined should do the trick for you.
<Image
style = {{flex: 1, height: null, width: null}}
source = {require('./img/anyImage.png')}
/>
According to your code you can use one of these two options if you want to use flex.
1.giving the flex:1 to the image with null width for taking the whole view
2.use flex with resizeMode for taking the whole view
{/* THIS IS THE FIRST OPTION YOU CAN USE */}
<View>
<View style={{ width: 100, height: 100 }}>
<Image
style={{ flex: 1, width: null }}
source={require("./img/cervecerias.png")}
/>
</View>
</View>
{/* THIS IS THE SECOND OPTION YOU CAN USE */}
<View style={{ width: 200, height: 100 }}>
<Image
style={{ flex: 1 }}
source={require("./img/Cocktails.png")}
resizeMode="contain"
/>
<Text style={styles.categoriesText}> Cocktails</Text>
</View>
I have a component that when called should display an image for the whole screen of the phone. The issue is I cannot get the image centered. It is mostly off screen to the right with some barely visible. If anyone knows what I am doing wrong your help would be much appreciated. I am using react-native-image-zoom so the image can be zoomed on and swiped down to go away.
My image component:
const FullPicture = (props) => {
return (
<View style={{ height: '100%', width: '100%' }}>
<ImageZoom
cropWidth={Dimensions.get('window').width}
cropHeight={Dimensions.get('window').height}
enableSwipeDown
onSwipeDown={() => props.closeImage()}
>
<Image
style={{ height: props.picture.height, width: props.picture.width }}
resizeMode={'cover'}
source={{ uri: props.picture.uri }}
/>
</ImageZoom>
</View>
);
};
You need to use a Flexbox. Try to add flex: 1 to your Image's container:
<View style={{ flex: 1, height: '100%', width: '100%' }}>
<ImageZoom> ... </ImageZoom>
</View>
Try these:
set flex: 1 in your container view
use justifyContent: 'center'
check this out.
I think this is the thing what you are looking for https://youtu.be/YRrji3BmHY4
you should use ImageBackground from react-native instead of react-native-image-zoom.
when you use ImageBackground don't forget resizeMode='contain' and styling the image, the image will not get off by any side.
I'm trying to create a 'focus' effect on images in React Native, but I'm unable to create this effect using Blur and Overlay.
Does anyone know how it might be done .. ?
Here's an example of what I had in mind:
You may checkout the react-native-blur library.
Their example shows a blurred background with buttons on top. You could easily place an image on the blur instead of buttons.
Hope that helps.
https://github.com/react-native-community/react-native-blur
npm i react-native-blur-overlay use this library and there are several properties to partially blur your images accordingly how you need it.
use MaskedView from #react-native-masked-view/masked-view along with BlurView from #react-native-community/blur to get this result
snack link
result:
code:
export default function App() {
const { width, height } = useWindowDimensions();
return (
<View style={styles.container}>
<MakedView
style={{ width, height, alignItems: 'center' }}
maskElement={
<BlurView
tint="dark"
intensity={54}
style={{
width,
height,
backgroundColor: 'transparent',
alignItems: 'center',
justifyContent: 'center',
}}>
<View
style={{
width: 200,
height: 200,
borderRadius: 100,
backgroundColor: '#fff',
}}></View>
</BlurView>
}>
<Image
style={{ width, height, backgroundColor: 'transparent' }}
source={{
uri: 'https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg',
}}
/>
</MakedView>
</View>
);
}