borderRadius on card child items not rotating when swiping

I have some elements in my card that are just <View>s with a <Text> in them. However when I add a borderRadius of 2 to the views, the borders don’t rotate as the card is swiped. Any ideas what could be causing this?

[gonzaloriestra]

I had the same problem when trying add an rounded image inside a rounded card. There is a known issue with overflow and borderRadius in React Native: https://github.com/facebook/react-native/issues/16093

My workaround was to wrap the image inside a rounded view and only apply overflow: 'hidden' for iOS. Something like this:

Content for renderCard prop:

    const imageContainer = [styles.imageContainer, platform() === Platform.iOS ? styles.iosImageContainer : null];

    return (
      <View style={styles.container}>
        <View style={imageContainer}>
          <Image style={styles.image} source={{ uri: this.props.imageUrl }} />
        </View>
      </View>
    );

Styles:

  container: {
    borderRadius: 8,
  },

  imageContainer: {
    borderTopLeftRadius: 8,
    borderTopRightRadius: 8,
  },

  iosImageContainer: {
    overflow: 'hidden',
  },

  image: {
    borderTopLeftRadius: 8,
    borderTopRightRadius: 8,
  },

[webraptor]

@alexbrillant / @matt-way I think we can close this down as it is a known RN issue and we already have a solution for it.