I am bringing in an image on my RN app. It's an image of the Simpsons family. When I set the width and height to 100%, the image becomes too big for my simulator. I want it to be centered and formatted to the center of my screen. However, when I adjust the percentages, the image starts getting cutoff (obviously). Another thing, the image itself is not centered despite me stating it in the code (see below). Do any of you have any recommendations? This png image is going on top of a background image already (jpeg).
<Image
source={{
uri:"https://upload.wikimedia.org/wikipedia/en/0/0d/Simpsons_
FamilyPicture.png"
}}
style={{ width: 100 , height: 120, justifyContent: "center", alignContent: "center" }}
/>
Try change resizeMode for contain.
justifyContent and alignContent needs to be style attributes of the container. Something like this:
<View style={{flex: 1, flexDirection: 'column', justifyContent: "center", alignContent: "center"}}>
<Image
source={{
uri:"https://upload.wikimedia.org/wikipedia/en/0/0d/Simpsons_
FamilyPicture.png"
}}
style={{ width: 100 , height: 120}}
/>
</View>
Related
I have to achieve Below output :
What I achieved
Here is My source code :
return (
<ImageBackground source={require('../../assets/images/home_bg.png')} style={{
height: 185,
width: '100%',
}}>
<Header style={{
backgroundColor: 'transparent'
}}
androidStatusBarColor={"#EB7D16"} >
<View style={{ flex: 0.5, alignItems: 'center', alignContent: 'center', alignSelf: 'center' }}>
<Left>{LeftIcon}</Left>
</View>
<View style={{ flex: 4, justifyContent: 'center', alignItems: 'center' }}>
<CustomSearchBar />
</View>
<View style={{ flex: 0.5, alignContent: 'center', alignItems: 'center' }}>
<Right>{RightIcon}</Right>
</View>
</Header>
<View style={{ alignItems: 'center', justifyContent: 'center' }}>
<Image resizeMode="contain" source={require('../../assets/icons/logo.png')} style={{ height: '50%', width: '50%', marginTop: 20 }}>
</Image>
</View>
</ImageBackground >
);
I used Image Background and then Set Header component on that module.
Here, I set ImageBackground height: 185, width: '100%', which is wrong way and it's not responsive for all devices. I also use windows.height and windows.width but it's also not working, Kindly share proper way for setting this background Image and How to achieve may targeted output.
Thank you in advance!
you need to make status bar "translucent" so that background image starts from top.
try this and add in your main render of screen
import { StatusBar } from "react-native";
...
<StatusBar translucent backgroundColor="transparent" />
I resolved it by my slef.. actually issue with background image.
Thank you all for time!
I'm currently trying to set up an image inside TouchableOpacity. It isn't showing and I'm stuck on why that is. Please let me know if you can help. TIA!
I've basically copied this: https://facebook.github.io/react-native/docs/touchableopacity from the official docs, but to no avail.
Thought maybe my TouchableOpacity element wasn't full screen but that's not the case (when I set the background color, I see it fill the screen).
<TouchableOpacity style={styles.button} onPress={this.onWaitingButtonPress.bind(this)}>
<Image style={styles.imagestyle} source={{uri: "https://www.dollargeneral.com/media/catalog/product/cache/image/e9c3970ab036de70892d86c6d221abfe/0/0/00870101.jpg"}}/>
</TouchableOpacity>
const styles = {
button: {
flex: 1,
alignItems: "stretch",
backgroundColor: "red"
},
imageStyle: {
flex: 1,
resizeMode: "contain"
}
};
I get the red background to fill the whole screen, but the image does not.
flex: 1 cover the entire width and height of its container. probably your view's dimensions are 0.
if your touchable is showing, try this;
imageStyle: {
width: "100%",
height: "100%"
}
if it's not;
button: {
width: 100,
height: 100
}
or,
button: {
width: "100%,
height: "100%"
}
so, you can understand the difference between them when trying these
Flex:1 in parent covers entire area but flex1 in image cover only height of entire screen. Here width becomes 0 since flex direction is column by default. Try setting some width lfor image ike "100%' 0r any other value.
Edited after the comment:
If it doesn't not work then add width to touchableopacity also
I am building a react native app using crna/expo. I want to display an image that already uploaded from API. Since the image is uploaded, I need to use require instead of uri as a source. But I failed to call the image when I put this code:
<Image source={{require('this.state.user.picture')}} style={{ width: 75, height: 75, borderRadius: 37.5 }} />
Also when I changed it to uri, it didn't show anything either.... (not error tho)
<Image source={{uri:this.state.user.picture}} style={{ width: 75, height: 75, borderRadius: 37.5 }} />
Can anyone please help me? Thank you so much!
If your answer is a data type image, you have to do like this:
// include at least width and height!
<Image
style={{
width: 51,
height: 51,
resizeMode: 'contain',
}}
source={{
uri:
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
}}
/>
changing the uri with your this.state.user.picture
Use `` for call images from variables
<Image style={{ width: 50, height: 200 }}
source={{ uri: `${item.image}` }} />
what I suggest is that modify type according to some condition for eg.
note: require need d local path of image and uri require http link
let image = {uri:this.state.user.picture};
if(something){
image = require('../../demo.jpg');
}
<Image source={image} style={{ width: 75, height: 75, borderRadius: 37.5 }} />
The problem in your code is that you are using double curly braces, when you only need one pair.
Try like that:
<Image source={require('this.state.user.picture')} style={{ width: 75, height: 75, borderRadius: 37.5 }} />
Remember that the double curly braces are just an object literal inlined in the prop value.
I was getting the same behavior. Just adding a width and height to the image worked for me.
I'm trying to show an image whose width adjust according to height I'm using resizeMode="contain" for this purpose but it shows space before and after image. I tried setting margin, padding, left, right but none of them worked.
<View style={{ flex: 1 }}>
<ScrollView horizontal>
<View style={{ borderColor: "#f00", borderWidth: 2, height: 300 }}>
<Image source={images[0].uri} resizeMode="contain" style={{ height: 300, width: 300 }} />
</View>
<View style={{ borderColor: "#f00", borderWidth: 2, height: 300 }}>
<Image source={images[1].uri} resizeMode="contain" style={{ height: 300 }} />
</View>
</ScrollView>
</View>
As resizeMode="contain" scale the image evenly (maintain the image's aspect ratio) also set the width aspect ratio equivalent to the height you want to give the image.
For example, if you have an image of 210x300 and you want your image to have a height of 100. You need to set the width to the same aspect ratio as 70.
<Image style={{height:100, width:70, resizeMode:"contain"}}/>
Otherwise, you will get a width spacing of the original aspect ratio of the image.
resizeMode="contain" is 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, and it means ( on your image ), stretch height and width until the height=300 but keep the aspect ratio. So the width will never cover the screen because it's smaller than height.
If you want the width cover all screen, use stretch or cover.
Maybe I don't understand your question correct. If it is, let me know and I delete my answer.
The problem I'm having is that the image inside the image, is on top of the outside image, the outside image is a half transparent image so I want it to be ON TOP of the nested image, as an overlay image, what can I do?
<Image
style={it}
source={require('../../img/Rarities/red.png')}
>
<View>
{
item[2] != null ?
<View style={{ width: 15, height: 15, backgroundColor: item[2].Color }} />
: null
}
<Image
style={{height:'70%',width:'70%'}}
source={{ uri: item[1].base64 }}
/>
</View>
</Image>
I tried:
changing the zIndex of the images didn't work..
In React Native, components are rendered in the order they are defined - therefore it can be tricky to reverse the order and render a parent on top of a child.
Instead, you can render the images as siblings, and use a parent container component with a little position: absolute trickery to get the images to align on top of each other.
For the following view structure:
<View style={styles.imageContainer}>
<Image source={{uri: image1}} style={styles.bottom} />
<Image source={{uri: image2}} style={styles.top} />
</View>
You can achieve this effect with following styles. See inline comments for explanation:
const styles = StyleSheet.create({
// The container controls the top image size
imageContainer: {
width: 200,
height: 200
},
bottom: {
// horizontal margin: (100% -width) / 2
marginHorizontal: '15%',
// vertical margin: (100% - height) / 2
marginVertical: '15%',
width: '70%',
height: '70%'
},
top: {
// positioned absolutely
position: 'absolute',
opacity: 0.5,
// full width/height of imageContainer
width: '100%',
height: '100%'
},
});
You can see it in action in this Snack demo.
I'm not sure that i understand what are you meaning correctly but you can use the Image components like this if you want to have them inside each other:
<View>
<Image
style={{flex:1}}
source={require('./img/favicon.png')}
/>
<Image
style={{height:'30',width:'30', position:'absolute'}}
source={require('./img/favicon.png')}
/>
</View>
Note: the Image sources and the dimensions should be replaced.