I am new for react native and i am showing a list of GIF images in list view and i what image corner rounded i try to do this with normal images and it's working but with GIF image it's not working i don't now why.
I use below style and code for make corner rounded.
<ListView contentContainerStyle={styles.list}
showsHorizontalScrollIndicator={false}
horizontal= { true }
dataSource={this.state.dataSource}
ref={ref => this.listView = ref}
renderRow={(rowData) => {
return (
<TouchableOpacity style={styles.item} onPress={() => this.stickerSelected(rowData)}>
<Image style={styles.image} source={this.props.images[rowData].src}/>
</TouchableOpacity>
)
}}
/>
list: {
justifyContent: 'center',
flexDirection: 'column',
backgroundColor: '#FFFDEB',
flexWrap: 'wrap',
paddingLeft: 6,
paddingRight: 6
},
item: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#EAD62F',
borderRadius: 10,
margin: 3,
width: 75,
height: 75,
},
image: {
width: 75,
height: 75,
borderRadius: 10,
}
and tried to add below property in image and item style for resolve overlapping issue but corner still in square shape.
overflow: 'hidden',
You need to set overlayColor style. It described here https://facebook.github.io/react-native/docs/image.html#style
image: { width: 75, height: 75, borderRadius: 10, overlayColor: 'white', }
<View style={styles.imgBorder}>
<Image source={require('../../assets/images/giphy2.gif')}
style={styles.profilePicture} />
</View>
profilePicture: {
width: 150,
height: 200,
borderRadius: 100,
alignItems: 'center',
justifyContent: 'center',
marginTop: '20%',
borderWidth: 4,
borderColor: 'purple',
},
imgBorder: {
width: 150,
height: 150,
borderRadius: 300,
overflow: 'hidden',
marginLeft: 'auto',
marginRight: 'auto',
alignItems: 'center',
justifyContent: 'center',
marginTop: '20%',
}
You can wrap GIF with View container. After than usual height and width configurations with overFlow: 'Hidden' your problem will be fixed.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.