CODEWITHSUNDEEP
androidreact-native
cityvoice
cityvoice

Reputation: 2651

[react-native]how to realize mask effect

I want to realize a circle mask on an image, so i have this view:

<View style={{width:200,height:200}}>
    <Image source={this.state.photo} resizeMode='cover' style={{width:200,height:200,opacity:0.5}}/>
    <View style={{position:'absolute',left:50,top:50,width:100,height:100,borderRadius:50,opacity:0.8}}>
        <Image source={this.state.photo} resizeMode='cover' style={{width:200,height:200,marginLeft:-50,marginTop:-50}}/>
    </View>
</View>

but the mask is a rectangle,not a circle, why?screenshot

Upvotes: 1

Views: 1288

Answers (1)

Hariks
Hariks

Reputation: 1889

This is a known issue of react-native android. The mask View is actually a circle, its the Image inside the mask View not honouring the borderRadius given to the wrapping View.

https://facebook.github.io/react-native/releases/0.26/docs/known-issues.html#the-overflow-style-property-defaults-to-hidden-and-cannot-be-changed-on-android

Upvotes: 1

Related Questions