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
Related
I want create a rotate icon inside a image:
<ImageBackground style={stylesNative2.image} source={{ uri }} >
<TouchableOpacity onPress={ () => { alert("handler here") }} tyle={styles.rotateImageIcon}>
<Icon name='rotate-ccw' type='Feather' style={styles.rotateImageIcon} />
</TouchableOpacity>
</ImageBackground>
const stylesNative2 = StyleSheet.create({
image: {
zIndex: 0,
position: 'absolute',
height: h,
width: WIDTH,
resizeMode: 'cover',
transform: [{ rotate: this.state.imageRotation + 'deg' }]
}
});
const styles = StylesManager.getStyles({
rotateImageButton: {
backgroundColor: 'transparent',
elevation: 0,
zIndex: 1
},
rotateImageIcon: {
marginTop: '1rem',
marginLeft: '1rem',
fontSize: '1.7rem',
color: 'white',
}
});
The icon appear but the TouchableOpacity is not working.
Any idea why it's not working?
I think it's because ImageBackgroud have a pointerEvent like this one:
pointer-events: none;
http://facebook.github.io/react-native/docs/view#pointerevents
Can you try to wrap your <TouchableOpacity> on a <View>?
Mayby it's the zIndex...
A touchable opacity is transparent so you don't have to add zIndex on it.
When we add TouchableOpacity inside the ImageBackground .
We need to add the zindex greater than ImageBackground.
like zindex:100
Elements with a higher index will be placed on top of elements with a lower index. Note: Z index only works on positioned elements ( position:absolute , position:relative , or position: fixed
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>
I'd like to be able to bottom align an image using Image or ImageBackground, but have been unsuccessful in doing so.
<View style={styles.moduleHeader}>
<ImageBackground
style={styles.image}
source={{ uri: image }}
resizeMode="cover">
<Text>text</Text>
</ImageBackground>
</View>
moduleHeader: {
height: 200,
},
image: {
width: Layout.viewport.width, //device width
height: 200,
position: "absolute",
bottom: 0,
},
Other attempts include negative top margin and padding.
I've also messed around with aspect ratio, but that needs to be more of a precise number, and I don't need that level of precision.
The inclusion of absolute and bottom have no effect that I can tell...
Basically Id like to mimic the effect background-position: center bottom; has in CSS.
I don't mind if the image is cropped horizontally, just that the bottom of the image is aligned with the bottom of the container.
I haven't been able to find with any certainty that this is even possible in React-Native, so confirmation of that theory would constitute a correct answer.
As always any and all direction is greatly appreciated so thanks in advance!
You need to remove position and bottom tag from ImageBackground style and add into style of View
Something like this
moduleHeader: {
height: 200,
width:'100%',
position: "absolute",
bottom: 0,
},
image: {
width:'100%', //device width
height: 200,
backgroundColor:"#000",
},
Please check this snack expo code
https://snack.expo.io/#vishal7008/again-bottom-ui
I would like to background black opacity.
I've wrote this code.
<Image source={require('../assets/images/test_img1.png')} style={[s.lastReviewImage]}>
<View style={s.blackOverlay}/>
</Image>
lastReviewImage: {
flex:1,
width: null, height: null
},
blackOverlay: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
backgroundColor: 'red',
opacity: 0.3
},
But, this is give me a error.
Error: The Image component cannot contain children. if you want to render content on top of the image, consider using absolute positioning.
I know what this error means but I've surely set absolute property in blackOverlay.
I've refer this guides.
Text Overlay Image with Darkened Opacity React Native
https://snack.expo.io/S15Lt3vjg
But, It's not working for me with the error.
If you want to set some background color or an image as the Screen Background, you need to use ImageBackground in place of Image.
<ImageBackground
source={yourSourceFile}
style={s.blackOverlay}>
<....yourContent...>
</ImageBackground>
I've been trying to set an image as background on a react native app, without success.
Here is my Image tag.
<Image
source={require('../img/cat.jpg')}
style={styles.backgroundImage}
blurRadius={1} />
It is supossed to contain children element, that should render on top.
The style is as it follows:
backgroundImage: {
flex: 1,
width: null,
height: null,
resizeMode: 'cover',
},
At the moment, children element are rendered on bottom of screen, after the image, and not on top of it.
How im supossed to make this work?
RN now provides the <ImageBackground> component as described in the docs and used as
return (
<ImageBackground source={...}>
<Text>Inside</Text>
</ImageBackground>
);
Alternatively, you can use position: 'absolute', top: 0, bottom: 0, left: 0, right: 0, resizeMode: 'stretch'//or 'contain'
with your Image styling.