Untitled

import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { List, ListItem, Button, Container, Content, View, Card, CardItem, Thumbnail, Text, Left, Body, Icon } from 'native-base';
import { Actions } from 'react-native-router-flux';
import { heightPercentageToDP as hp, widthPercentageToDP as wp } from 'react-native-responsive-screen';

import { connect } from 'react-redux'


class ListSapi extends Component {

   constructor(props) {
      super(props)
  }

   render() {

      return (
         <View style={{ backgroundColor: '#e7e7e8' }}   >
            <Content padder  >
               <Card >
                  {this.props.listsapi.map((s, index) =>
                     <CardItem key={index} bordered button onPress={() => { Actions.detail({sd: s})}}>
                        <Left >
                           <Thumbnail square source={{ uri: s.gambar }} style={styles.cardlist} />
                           <Body  >
                              <Text >{s.nama}</Text>
                              <Text note numberOfLines={2}>{s.alamat}</Text>
                              <Text>Rp. {s.harga}</Text>
                           </Body>
                        </Left>
                     </CardItem>
                  )}
               </Card>
            </Content>
         </View>
      )
   }
}

const styles = StyleSheet.create({
   cardlist: {
      borderRadius: 10,
      height: hp('10%'),
      width: wp('20%'),
      resizeMode: 'cover'

   },
   wrapper: {

   },
});


const mapStateToProps = state => {
   return { listsapi: state.listsapi  };
};

export default connect(mapStateToProps)(ListSapi);