React Native logical && conditional rendering ruins my layout

Question

When I add 'report.sleep.bed.sensor.inst &&' and it's false, it messes up the width of my card

However when 'report.sleep.bed.sensor.inst' is true, it is back to normal

Except my goal is to not show the carditems when 'report.sleep.bed.sensor.inst' is false. Am I doing the conditional rendering wrong?

return (
  <View style={styles.container}>
    <Card style={styles.card}>
      <ImageBackground source={Images.historyCardBg} style={styles.cardBg} imageStyle={styles.cardBg} >
        <CardItem style={{ flexDirection: 'column', alignItems: 'flex-start' }}>
          <Text h1>{fromNow === 1 ? I18n.t('$date_yesterday') : fromNow + ' ' + I18n.t('$reports_history_daysago')}</Text>
          <Text h2 purple>{date}</Text>
        </CardItem>
        {
          report.sleep.bed.sensor.inst &&
           <CardItem>
             <Col><Text>{I18n.t('$reports_history_sleepinbed')}</Text></Col>
             <Col style={styles.historyDataRight}><Text>{ moment.duration(report.sleep.bed.duration, 'milliseconds').hours() + ' hrs ' + moment.duration(report.sleep.bed.duration, 'milliseconds').minutes() + ' mins' }</Text></Col>
          </CardItem>
        }
        <CardItem>
          <Col><Text>{I18n.t('$reports_history_awayfromhome')}</Text></Col>
          <Col style={styles.historyDataRight}><Text>{report.outside.sensor.inst ? moment.duration(report.outside.duration, 'milliseconds').hours() + ' hrs ' + moment.duration(report.outside.duration, 'milliseconds').minutes() + ' mins' : 'N/A'}</Text></Col>
        </CardItem>
      </ImageBackground>
    </Card>
  </View>
)

And this is the css:

  card: {
    backgroundColor: 'transparent',
    borderColor: 'transparent'
  },

  cardBg: {
    flex: 1,
    width: null,
    height: null,
    borderRadius: Metrics.cardBorderRadius,
    padding: Metrics.cardPadding
  },