Card in Shoutem UI not working

Question

I am trying the Card example from docuementation of shoutem-ui, but its not showing the full content here is my .js file

import React, { Component } from 'react';
import {
  View,
  Subtitle,
  Card,
  Image,
  Caption
} from '@shoutem/ui'

export default class MyApp extends Component {
  render() {
    return (
      <Card>
        <Image
          styleName="medium-wide"
            source={{uri: 'https://shoutem.github.io/img/ui-toolkit/examples/image-10.png'}}
        />
        <View styleName="content">
          <Subtitle>Choosing The Right Boutique Hotel For You</Subtitle>
          <Caption>21 hours ago</Caption>
        </View>
      </Card>
    );
  }
}

And the screen shot of my emulator

Please help me resolve the issue. Thanks

Answer 1

You need to overwrite the View's style by setting its flex to 0.

In case of displaying full-width card: setting Card's width to null.

<Card style={{ width: null }}>
  ...
  <View style={{ flex: 0 }}>
    ...
  </View>
</Card>