I have used borderRadius in Image and loop it. It works in some images however others are rectangular. If I touch it then it shows the radius and disappears as soon as it is untouched. Using overflow hidden doesn't do the trick as well.
I'm confused I used the same style but the result is different. I've tested it on Android devices only.
https://snack.expo.io/#codebyte99/multiplearrays
code:
<TouchableOpacity activeOpacity={0.8}>
<ImageBackground
source={{
uri: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREX0q18KDbtN-obe1EFxAwNg27xgR_KItZ7U8MkXnH7zBCEr_ASQ",
}}
style={[
{
width: 200,
height: 80,
resizeMode: "center",
justifyContent: "flex-end",
alignItems: "center",
margin: 5,
marginRight: 0,
marginTop: 0,
marginBottom: 5,
borderRadius: 6,
overflow: "hidden",
},
]}
>
<Text>{childItem.title}</Text>
</ImageBackground>
</TouchableOpacity>;
You have to set the borderRadius to Image, not in style:
<Image source={{...}} borderRadius={6} .../>
And you don't set overflow: 'hidden' in image style, but in the View:
<View style={{ ..., overflow: 'hidden' }}>
<Image ..../>
</View>
Wrap the Image in a View with overflow: "hidden" and apply borderRadius to that, e.g.
<View
style={{
width: 30,
height: 30,
borderRadius: 15,
overflow: "hidden",
}}
>
<Image
style={{ width: 30, height: 30}}
source={{ uri }}
></Image>
</View>
(I could not find a way to get borderRadius to work on the image directly on Android.)
Applying the same fixed height and width to the image and borderRadius as half of the (height/width) will solve the border issue for android in react-native. Note: Make sure you have resizeMode as 'cover'
<Image key={index} source={{ 'uri' }} resizeMode='cover' style={{ height: 40, width: 40, borderRadius: 20 }} />
Related
Any ideas how to add borderRadius to the image that has resizeMode set to contain, and no knowledge of height and width?
The code currently looks like this, but this doesn't work.
<View
style={[
styles.imageContainerWrapper,
{ width: width },
]}
key={i}
>
<Image
source={{ uri: url }}
borderRadius={normalize(20)}
resizeMode="contain"
style={{
height: '100%',
maxWidth: '100%',
maxHeight: '100%',
overflow: 'hidden',
backgroundColor: 'blue',
}}
/>
Add borderRadius to the style property of the Image like this:
<View
style={[
styles.imageContainerWrapper,
{ width: width },
]}
key={i}
>
<Image
source={{ uri: url }}
resizeMode="contain"
style={{
height: '100%',
maxWidth: '100%',
maxHeight: '100%',
overflow: 'hidden',
backgroundColor: 'blue',
borderRadius: 20,
}}
/>
I have a problem with positioning my image inside a container and that is when I give image position: absolute and top property image got cropped from the top here's the issue:
here's my code:
<View style={styles.OurTherapistsContainer}>
<View style={styles.therapistCard}>
<View style={styles.imageContainer}>
<Image style={styles.image} source={require('../assets/img/leong.png')} />
</View>
</View>
</View>
...
therapistCard: {
width: 150,
height: 150,
borderRadius: 25,
borderWidth: 1,
borderColor: '#DFEEFF',
overflow: 'hidden',
},
imageContainer: {
width: 150,
height: 150,
backgroundColor: 'red',
},
image: {
width: '100%',
height: '100%',
position: "absolute",
top: 30
}
how can I fix this?
Try using resizeMode in image style like
resizeMode:'contain'
set resizeMode to cover
<Image style={styles.image} resizeMode="cover" source {require('../assets/img/leong.png')} />
When I press on an <TouchableHighlight />, with an <Image/> component inside, a white square appears even though I have set underlayColor prop's opacity value to 0.
What is causing this and how can I fix it?
<TouchableHighlight underlayColor="rgba(255,255,255,0)" onPress={() => this.props.navigation.goBack()} style={{width: 50, height: 50, position: "absolute", top:15, left: 15, elevation: 10, zIndex: 10}}>
<Image
style={{ width: 50, height: 50,}}
source={backArrow}
/>
</TouchableHighlight>
Perhaps you could take a different approach, by using TouchableOpacity with activeOpacity set to 0 like so:
<TouchableOpacity activeOpacity={0} onPress={() => this.props.navigation.goBack()} style={{ width: 50, height: 50, position: "absolute", top:15, left: 15, elevation: 10, zIndex: 10}}>
<Image style={{ width: 50, height: 50 }} source={backArrow} />
</TouchableOpacity>
If I understand your requirements correctly, then you should find this use of the activeOpacity prop achieves what you want. For more information on activeOpacity, see this documentation
I'm having issues trying to set resizeMode: 'cover' in Image component
This image summarizes my issue :
I'm testing it on Android, RN 0.55.3 and this my sample code
<View style={{ width: 200, height: 200, backgroundColor: '#555' }}>
<Image
source={require('./bird.jpg')}
style={{ alignSelf: 'stretch', flex: 1, resizeMode: 'cover' }}
/>
</View>
Also tried :
<View style={{ width: 200, height: 200, backgroundColor: '#555' }}>
<Image
source={require('./bird.jpg')}
style={{ alignSelf: 'stretch', flex: 1 }}
resizeMode='cover'
/>
</View>
But neither is working, so is there any way to get it work properly ?
I found that resizeMode doesn't work properly unless I set the width of the Image
I used width: 'auto' and everything worked well
the final code :
<View style={{ width: 200, height: 200, backgroundColor: '#555' }}>
<Image
source={require('./bird.jpg')}
style={{ alignSelf: 'stretch', flex: 1, resizeMode: 'cover', width: 'auto' }}
/>
</View>
I define Image tag as below. resizeMode outside the style.
<View style={{ width: 200, height: 200, backgroundColor: '#555' }}>
<Image
source={require('./bird.jpg')}
style={{ alignSelf: 'stretch', flex: 1,width : 'auto'}}
resizeMode={'cover'}
/>
</View>
this works for me.
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>