In list of cards, the shadow grows ever longer

[paour]

node, npm, react-native, react and native-base version

    "native-base": "^2.7.1",
    "react": "16.4.1",
    "react-native": "0.56.0",

Expected behaviour

In a list of cards, all cards have the same shadow thickness, unless otherwise specified

Actual behaviour

The shadow grows for each subsequent card in a list.

Steps to reproduce should include code snippet and screenshot

{_.map(props.content, c => (
  <NB.Card key={c.id} style={styles.menu}>
    <NB.CardItem cardBody button onPress={() => props.open(c)} style={styles.cardItem}>
      <NB.Text style={styles.menuText}>{c.title}</NB.Text>
    </NB.CardItem>
  </NB.Card>
  )}

Is the bug present in both iOS and Android or in any one of them?

This happens in Android. I can't test on iOS on the latest version of NB because the RN 0.56 dependency causes issues with other libs (rn-firebase).

Any other additional info which would help us debug the issue quicker.

[SupriyaKalghatgi]

@paour

The shadow grows for each subsequent card in a list.

This can be more clear if you share GIF

[paour]

This effect does not happen only during scroll, all you need is a list of cards. I've annotated the screenshot to clarify.

[SupriyaKalghatgi]

@paour Can you check this on device?
Simulator / Emulator sometimes render these glitches

[paour]

Yes, it's the same on-device. Here, in another app on my phone.

[SupriyaKalghatgi]

Checked this with React Native View, behaves same

          <View style={{elevation: 3, marginBottom: 15, borderWidth: 0.5, borderColor: '#ccc' }}><Text>Text</Text></View>
          <View style={{elevation: 3, marginBottom: 15, borderWidth: 0.5, borderColor: '#ccc' }}><Text>Text</Text></View>
          <View style={{elevation: 3, marginBottom: 15, borderWidth: 0.5, borderColor: '#ccc' }}><Text>Text</Text></View>
          <View style={{elevation: 3, marginBottom: 15, borderWidth: 0.5, borderColor: '#ccc' }}><Text>Text</Text></View>
          <View style={{elevation: 3, marginBottom: 15, borderWidth: 0.5, borderColor: '#ccc' }}><Text>Text</Text></View>
          <View style={{elevation: 3, marginBottom: 15, borderWidth: 0.5, borderColor: '#ccc' }}><Text>Text</Text></View>
          <View style={{elevation: 3, marginBottom: 15, borderWidth: 0.5, borderColor: '#ccc' }}><Text>Text</Text></View>

[paour]

So it's a RN bug? Sorry I didn't think to check that first!

[SupriyaKalghatgi]

yes, it is
I will link in the RN issue in a minute

[SupriyaKalghatgi]

facebook/react-native#20501