react-native: overflow:hidden is not supported on Android

Added a product pain: https://productpains.com/post/react-native/add-overflow-support-to-android

Everyone upvote so FB knows how much we want it 😃

@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
  },

No timeline right now but work is still in progress. I reopened this issue because there were some dupes with less info and it’s less spam to just have this issue open.

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.

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

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.

@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.

I solved this by setting zIndex: 100 on the component, now overflow: hidden works for me on android!

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

+1 for this to have on android

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

On RN 0.41.2 you can try to add import com.facebook.react.uimanager.UIImplementationProvider; import com.facebook.react.flat.FlatUIImplementationProvider; and @Override protected UIImplementationProvider getUIImplementationProvider() { return new FlatUIImplementationProvider(); } in ReactNativeHost class.

Any updates on this issue ?

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

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>

If just want to clip overflow sub views, you can set removeclippedsubviews to true with overflow: 'hidden' and it would work.

I would suggest making a vanilla reproduce repo to demonstrate the problem you are experiencing and then opening an issue.

+1

+1

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

Here is my reproduction of the problem: https://snack.expo.io/BkHBr6Vpx

      <Animated.View style={{
            top: this.state.currentOuterTopOffset,
            overflow: 'hidden',
            ...this.props.style
          }}
          onStartShouldSetResponder={() => true}
          onMoveShouldSetResponder={() => true}
          onResponderGrant={this.responderGrant.bind(this)}
          onResponderMove={this.responderMove.bind(this)}
          onResponderRelease={this.responderRelease.bind(this)}>
        <Animated.View style={{ top: this.state.currentInnerTopOffset }}>
          {this.props.children}
        </Animated.View>
      </Animated.View>

zIndex must be also be set for overflow: 'hidden' to work here. It definitely seems like a bug to me

@julienvincent OK maybe it is not broken but nowhere in the docs does it mention that you have to set zIndex in order to use overflow: hidden. Should I raise this as a separate issue?

@saberking This issue is specific to border-radius + overflow: hidden. The overflow: hidden property without any border-radius was never broken.

@madjam002 My guess is that nodes won’t immediately fix it, but it’s probably the start

@bsinc Thank you!

@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.

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