overflow:hidden is not supported on Android

[xinthink]

When the parent view (overflow: 'hidden') has borderRadius set, the child view is not clipped to the shape of the parent.

demo reproducing the issue: https://rnplay.org/apps/69TRrw

[astreet]

Thanks for the report. Unfortunately overflow: hidden is not respected on android (see https://facebook.github.io/react-native/docs/known-issues.html#the-overflow-style-property-defaults-to-hidden-and-cannot-be-changed-on-android). I think @kmagiera has previously posted about the clipping issue for rounded corners and can chime in here.

[kmagiera]

Nothing more to add here. Unfortunately this is a known problem and is not being worked on as mentioned in the docs. Closing this as it's already on the list. If you guys have any proposal on how this could be implemented without causing significant perf issue in rendering pipeline feel free to reopen and post your ideas here

[rreusser]

We're using imgix, so I think we'll be able to add ?fm=png&mask=ellipse and be on our way. Dodged a bullet there but will encounter moderate problems elsewhere.

I'll submit a PR to note that in addition to hidden always being true, it doesn't obey borderRadius, which is not currently noted in the docs. (I assumed that if hidden were true, it would be clipped by the borderRadius just fine.)

[Kudo]

@kmagiera May I ask where to find the comment or discussion about clipping issue with rounded corners that you posted before?

[kmagiera]

@Kudo: I was referring to the link posted by Andy just above my comment: https://facebook.github.io/react-native/docs/known-issues.html#the-overflow-style-property-defaults-to-hidden-and-cannot-be-changed-on-android

[Kudo]

@kmagiera I see.
The feature is really useful for some cornered UI construction.
Would like to know more detail of your mentioned significant perf drops and see if we can make this feature happens.

[raymanyoung]

More info:
this demo (https://rnplay.org/apps/WlY9aA) shows if the outer control is an image, the borderRadius property will totally not working.

[astreet]

We're working on an alternative UI implementation on Android that will fix this -- it's still in testing internally so don't expect it for a few more months, but do know we are working on getting a fix.

[viju85]

Any updates on this issue ?

[bsinc]

I have a fairly cringe-worthy fix using styles that works for me in the meantime. This is a UI for creating group avatars out of user avatars. Similar to Facebook Messengers group avatars.

https://rnplay.org/apps/qXLzlw

[yonatanmn]

@bsinc that's a great solution! thx.
just clarifying what you did:

  <View style={styles.circle}>
            <Image style={styles.image} />
            <View style={styles.fixCircleClipping}/>

          </View>

  circle: {
    width: circleSize,
    height: circleSize,
    borderRadius: circleSize / 2,
    overflow: 'hidden',
  },
  fixCircleClipping: {
    position: 'absolute',
    top: -circleFixBorder,
    bottom: -circleFixBorder,
    right: -circleFixBorder,
    left: -circleFixBorder,
    borderRadius: circleSize / 2 + circleFixBorder / 2,
    borderWidth: circleFixBorder,
    borderColor: bgColor
  },

[maikokuppe]

@bsinc That's brilliant, thank you!

[joypatel04]

@astreet Is there any updates?
Thanks

[msafi]

Is this still a known issue? I can't find the known issues page anymore.

[Danielduel]

@astreet this will be fixed in 0.32? When 0.32 comes out?

[julienvincent]

@Duelsik Was this hinted to being fixed in 0.32 or are you just asking? The release notes for 0.32 do not mention it anywhere.

[astreet]

Hey all, sorry you are being hit by this -- a couple engineers at FB are actively working on open sourcing our internal fix for this, but it's not a simple change so unfortunately it'll take a while longer. Tentatively, they are hoping to have it open sourced by the end of the year.

[julienvincent]

@astreet Thanks for the info! I eagerly await the fix!

I wonder if there is some temporary hack I can do with css to imitate this? The fix mentioned by @yonatanmn doesn't cover all cases.

[desmond1121]

@henrikra Sorry for my misunderstood, removeClippedSubviews would remove out bound sub views but not clip in bound views.. so definitely it's not work with your problem.

[PARAGJYOTI]

@bsinc it's so smart . Just wanted to add a little advice , never use borderRadius as props (i repeat props , not style) in Image , like

     <Image source={some source} borderRadius={50} /> .

   Just Never !!

Using in scrollview will crash the app on repeated scrolling , and you will ruin the day finding where the bug is , even debugger won't tell you whats wrong . Its may be a out of memory problem . If its not within ScrollView or ListView (not sure), its fine . I almost ruined 4 hours finding the bug . Use the @bsinc trick instead .

[kesha-antonov]

+1 for this to have on android

[mica16]

+1

[madjam002]

Please upvote on product pains (https://react-native.canny.io/feature-requests/p/add-overflow-support-to-android) or upvote this issue rather than spamming "+1" comments.

@mica16 @diegorodriguesvieira

[miyamatthild]

I'd just like to throw in another data point for setting zIndex as a workaround (from @saberking's post). I'm working with sprite sheets and ran into the issue where the entire sprite sheet was being shown on Android (worked fine for iOS).

render() {
  return (
    <View style={styles.container}>
      <View style={styles.imageWrapper}>
        <Image
          style={styles.image}
          source={{uri: [...]}}
        />
      </View>
      <Text style={styles.text}>Without zIndex: 1</Text>
      <View style={styles.imageWrapper2}>
        <Image
          style={styles.image}
          source={{uri: [...]}}
        />
      </View>
      <Text style={styles.text}>With zIndex: 1</Text>
    </View>
  );
}

var styles = StyleSheet.create({
  container: {
    backgroundColor: '#f9f8f5',
    flex: 1,
    padding: 20,
    alignItems: 'center'
  },
  imageWrapper: {
    overflow: 'hidden',
    width: 86,
    height: 86
  },
  imageWrapper2: {
    overflow: 'hidden',
    width: 86,
    height: 86,
    zIndex: 1
  },
  image: {
    width: 196,
    height: 86
  },
  text: {
    paddingTop: 10,
    paddingBottom: 30
  }
});

This will render:

Verified on a Nexus 5 with Android 7.0. Note that you don't need to specify as high a value as 100. Specifying a zIndex of 1 was sufficient to solve the issue for me.

[luco]

Any update?

This is a must have. Much of UI nowadays is based on rounded corners with subclipping.

[hughnguy]

Temporary workaround is positioning multiple "absolute" views with a solid border color on top of the image (using z-index) to fill in the gaps. Works if your background is a solid color.

<View style={{height:215, alignItems:'center', flex:1}}>
    <View style={{position:'absolute', height:215, width:deviceWidth*0.95, borderWidth:10, borderRadius: 5, borderColor:'white'}}></View>
    <View style={{position:'absolute', height:215, width:deviceWidth*0.95, borderWidth:10, borderRadius: 20, borderColor:'white'}}></View>
    <Image
        resizeMode="cover"
        style={{height:215, width:deviceWidth*0.9, zIndex:-1}}
        source={this.props.image}
    />
</View>

[PARAGJYOTI]

Yesterday I suddenly discoveree a simple solution . Just added backgroundColor in Image style and added borderRadius and it worked liked magic. Tried it on android . May be works on IOS too

[wollld]

@yonatanmn if borderRadius is 5?

[st0ffern]

@PARAGJYOTI this is not a solution. look at #3198 (comment) you are refering to the same workaround.

[julienvincent]

There isn't much more to be said in regard to this issue. Could we please lock conversations on this thread until further development?

[yonatanmn]

@wollld - what about it? should work as far as I see

[yasserzubair]

+1

[EdmundMai]

+1

[st0ffern]

Please....
Stop +1 ... Upvote it here: https://react-native.canny.io/feature-requests instead.
Stop spaming workarounds, they dont solve the issue, feel free to create a PR to fix it instead.

Could we please lock the conversation until the issue is solved or there exists a PR to solve it?
@astreet @hramos

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[aaronechiu]

This is fixed with D5917111.