borderRadius on card child items not rotating when swiping

[matt-way]

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?

[webraptor]

All our cards have borderRadius and they do rotate correctly without issues. Unless you provide the code it's highly unlikely anyone's going to be of any help.

[dvschnitz]

I'm facing the same issue on Android (iOS works fine).

overlayLabels={{ left: { title: 'NOT', style: { label: { borderColor: 'red', color: 'red', borderWidth: 5, fontSize: 32, borderRadius: 5, textAlign: 'center', }), }, wrapper: { flexDirection: 'column', alignItems: 'flex-end', justifyContent: 'flex-start', marginTop: 64, marginLeft: -48, }, }, ...

As mentioned above with borderRadius = 0 the problem doesn't occur.

Thanks for the awesome library!

[webraptor]

Could you try with https://github.com/alexbrillant/react-native-deck-swiper/pull/138 / luminos-software/react-native-deck-swiper#master , see if it is still the same?

[dvschnitz]

No, it's still the same issue.

[webraptor]

Oh god, only now I realised that you're referring to the border radius of the overlayed label, not the card itself.

Please note that a while ago there were some changes to the swiper, there's 3 props (https://github.com/alexbrillant/react-native-deck-swiper#swipe-overlay-labels). The wrapper radius should be in overlayLabelWrapperStyle not overlayLabels or within your wrapper object in your code.

The style object within overlayLabels is used for text only, which cannot have borderRadius... Basically, whatever radius you'd set id would be ignored, that's why 0 seems to work.

[matt-way]

No it is the content of the card itself that I was referring to. Like I said in my original question, just create a <View> with a <Text> child inside your card, and give the view a border radius.

[webraptor]

By the looks of it, you're trying to put borderRadius on the label attribute which is applied to a RN element, which cannot have borderRadius (I think you should see a warning as well, if you haven't disabled the output). Move your borderRadius to the wrapper attribute and you should be fine. It's all pretty clear in the docs as well: https://github.com/alexbrillant/react-native-deck-swiper#swipe-overlay-labels

[dvschnitz]

The problem also exists if the border-radius is set in Wrapper

[webraptor]

Please try to provide your entire code (screen that wraps the swiper, with all combined styles). It works with the example app and where's using rounded cornered labels on our production app. again, no issues.

[sadiqkhoja]

issue happens with the latest version of react-native. I was able to reproduce with "react-native": "^0.51.0",

May be this is the culprit: https://github.com/facebook/react-native/commit/4994d6a389b4e41ba25e802edab5d3fdc9e8a4f1

[majakk]

Same issue (Android, react-native: ^0.55.4). Just tried the basic example provided. It seems like the border is not rotating along with the view.

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

[phil-hodgson-1st]

Thanks @gonzaloriestra it worked!

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