CardList React Native

Question

I'm new to React and was wondering if anyone could assist me. I'm trying to create a card list. I have done this part however I'm showing an image inside my card which does not render properly. The entire card becomes 1/12 of a row size. If I remove the List part then card renders properly.

Below is my Code:

 import React, { Component } from "react";
import { Image } from "react-native";
import {
  Container,
  Header,
  Title,
  Content,
  Text,
  Button,
  Icon,
  FooterTab,
  Left,
  Right,
  Card,
  CardItem,
  Thumbnail,
  ListItem,
  List,
  Body
} from "native-base";

import styles from "./styles";

const datas = [
  {
    route: "Header1",
    text: "Only Title",
    restImage: require("../../../assets/restaurants/Mc.png")
  },
  {
    route: "Header2",
    text: "Icon Buttons",
    restImage: require("../../../assets/restaurants/Mc.png")
  }
];


const logo = require("../../../assets/logo.png");
//const cardImage = require("../../../assets/Mc.png");
//const cardImage2 = require("../../../assets/NY.png");

class Anatomy extends Component {
  render() {
    return (
      <Container style={styles.container}>
      <Header
        style={{ backgroundColor: "#FFAB00" }}
        androidStatusBarColor="#FF8F00"
        iosBarStyle="light-content"
      >
          <Left>
            <Button
              transparent
              onPress={() => this.props.navigation.navigate("DrawerOpen")}
            >
              <Icon name="ios-menu" />
            </Button>
          </Left>
          <Body>
            <Title>Rests</Title>
          </Body>
          <Right />
        </Header>

        <Content padder>

        <List
          dataArray={datas}
          renderRow={data =>
            <ListItem>
            <Card style={styles.mb}>
              <CardItem cardBody>
                <Image
                  style={{
                    resizeMode: "cover",
                    width: null,
                    height: 200,
                    flex: 1
                  }}
                  source={data.restImage}
                />
              </CardItem>

              <CardItem style={{ paddingVertical: 0 }}>
                <Left>
                  <Button transparent>
                    <Icon active name="thumbs-up" />
                    <Text>4923 Likes</Text>
                  </Button>
                </Left>
                <Body>
                  <Button transparent>
                    <Icon active name="chatbubbles" />
                    <Text>89 Comments</Text>
                  </Button>
                </Body>
                <Right>
                  <Text
                    button
                    onPress={() => this.props.navigation.navigate(data.route)}
                  >2KM away</Text>
                </Right>
              </CardItem>
            </Card>
            </ListItem>
          }
          />
        </Content>

      </Container>
    );
  }
}

export default Anatomy;

Answer 1

I managed to resolve it. Did some research and just added below style to card.

<Card style={{ flex: 1 }}>

This resolved the rendering problem for me.