NativeBase: Cards not displaying properly for some iOS users (possible iOS 11 issue)

react-native, react and native-base version

“native-base”: “^2.3.2”, “react”: “16.0.0-alpha.12”, “react-native”: “0.48.4”,

Expected behaviour

Cards should render properly for all devices.

Actual behaviour

Cards render properly on my device (iOS 10) as well as emulators. Some users with iOS 11 are experiencing issues.

Steps to reproduce (code snippet or screenshot)

Create a Card with CardItem and button set to {true}. Put an image inside the card. Try it on iOS 11 with an iPhone 7 or 8 PLUS.

Screenshot of emulator/device

The above is what the bug looks like. The card’s image don’t appear, and it is no longer clickable. I have another page with a card and an image and it loads fine, but this card does not have button={true} set, so this might be an issue specifically with card buttons.

^ This is what it should look like

Is the bug present in both ios and android or in any one of them?

Only tried iOS

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

My cards are structured like this:

<Container>
        <Content padder>
          <Card>
            <CardItem cardBody button={true} onPress={() => { navigate('Samplers') }}>
              <Image source={require('./assets/images/categories/samplers.jpg')} style={{height: 200, width: null, flex: 1}}/>
              <Text style={styles.cardTextOverlay}>SAMPLERS</Text>
            </CardItem>
          </Card>
        </Content>
</Container>