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.
Related
Everybody.
I am going to make one screen (top: flatList, bottom: some component), but the component should be posited at the bottom of the screen.
I tried several times like this, but I could not do that.
I tired:
bottom component style:
position: 'absolute',
bottom: 0,
padding: 20,
But not working for me and this component just hidden.
I am not sure why this happened.
Please help me...
Thanks
You can do something like this. The flatlist would be scrollable, you can place the view above or below based on your requirement.
//data=['aa','bb','cc']
<View style={{ flex: 1 }}>
<View style={{ backgroundColor: 'blue', height: 100, width: '100%' }} />
<FlatList
style={{ flexGrow: 0 }}
renderItem={({ item }) => (
<Text style={{ height: 100 }}>{item}</Text>
)}
data={data}
/>
<View
style={{
backgroundColor: 'red',
height: 100,
width: '100%',
marginTop: 'auto',
}}
/>
</View>
Explanation
flexGrow: 0 will make sure that the flatlist will use only available space otherwise it will grow and take the full screen.
marginTop: 'auto' will move the view to the bottom part this works for marginLeft and marginRight as well which can help when moving item to corners.
So the view at the bottom would take height:100 and full width and move to the bottom and flatlist would take the rest.
Output will be like below
Do you mean something like that?
<View style={{ flex: 1 }}>
<FlatList
style={{ flex: 1, .... }}
...
/>
<SomeComponent style={{height:80, width:'100%'}}>
...
</SomeComponent>
</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 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:
I have some code to have an image of random size spread to the full width of a container + vertically center inside the container. But what I need is to anchor it at the top.
In CSS i would use background-position, but it's not supported in React Native. I feel I've tried every combination of resizeMode, absolute positioning, etc - but still haven't been able to figure it out.
<View style={{
flex: 1,
height: 120,
}}>
<Image source={{uri: source}} style={{
flex: 1,
width: '100%',
resizeMode: 'cover'
}}>
</Image>
</View>
It seems crazy that there is still not a standard way of anchoring an image in React Native as there is in regular css (at least if there is, I stall haven't found it). But this lib does the trick for me:
react-native-scalable-image
Hope it helps!
If you can get the height of the image h, then you can show the full image first then hide the bottom part with a view container of static height eg. 250:
<View style={{ height: 250 }}>
<Image source={{ uri: source }} style={{ width: null, height: h }} />
</View>
I have found a trick to do that
You need to wrap the wanted height in a View with a overflow hidden
And set a large height in the image style
const WANTED_HEIGHT = 170
<View style={{ height: WANTED_HEIGHT, overflow: 'hidden' }}>
<Image
source={{ uri }}
style={{
width: '100%',
height: 500,
}}
/>
</View>
return (
<View
style={{
flex: 1,
height: 120,
justifyContent: "center",
alignContent: "center"
}}
>
<TouchableOpacity onPress={() => alert("Hello ")}>
<Text style={{ alignSelf: "center" }}>Anchor Tag</Text>
</TouchableOpacity>
<Image
source={{
uri: "https://shoutem.github.io/img/ui-toolkit/examples/image-3.png"
}}
style={{
width: "100%",
height: 100,
resizeMode: "cover"
}}
/>
</View>
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>
);
}