takon

export default class RelatedProduct extends Component {

    state = {
        datas: [
            {
                img: require('../../../../assets/chart/relatedProduct/obatSakitMata.png'),
                title: "Obat sakit mata keluarga, 120ml",
                feature: "Free ongkir",
                price: "Rp 207.000"
            },
            {
                img: require('../../../../assets/chart/relatedProduct/obatSakitMata.png'),
                title: "Obat sakit mata keluarga, 120ml",
                feature: "Free ongkir",
                price: "Rp. 207.000"
            },
            {
                img: require('../../../../assets/chart/relatedProduct/obatSakitMata.png'),
                title: "Obat sakit mata keluarga, 120ml",
                feature: "Free ongkir",
                price: "Rp. 207.000"
            },
            {
                img: require('../../../../assets/chart/relatedProduct/obatSakitMata.png'),
                title: "Obat sakit mata keluarga, 120ml",
                feature: "Free ongkir",
                price: "Rp. 207.000"
            },
        ]
    }

    render(){
        return(
            <Card style={{marginTop: -5, width: "100%", marginLeft: 0, marginRight: 0, borderColor: "transparent", elevation: 0}}>
                <CardItem header style={{backgroundColor: "#fff", height: 50}}>
                    <Row style={{flex:1, justifyContent: 'center',}}>
                        <Text style={styles.lineStyleLeft}/>
                            <Text style={styles.recommend}>Rekomendasi produk berkaitan</Text>
                        <Text style={styles.lineStyleRight}/>
                    </Row>
                </CardItem>

                <CardItem cardBody>
                    {this.state.datas.map(data =>(
                        <Card style={{borderColor: "transparent", elevation: 0, flexDirection: "column", flex: 1}}>
                            <CardItem cardBody>
                                <TouchableOpacity>
                                    <Image source={data.img} style={styles.imgContent}/>
                                </TouchableOpacity>
                            </CardItem>
                            <CardItem style={{backgroundColor: '#f7f7f7'}}>
                                <View style={{flex: 1, flexDirection: 'column', alignSelf: "center", justifyContent:"center"}}>
                                    <TouchableOpacity>
                                        <Text style={styles.title}>{data.title}</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity>
                                        <Text style={styles.featureTitle}>{data.feature}</Text>
                                    </TouchableOpacity>
                                    <TouchableOpacity>
                                        <Text style={styles.priceTitle}>{data.price}</Text>
                                    </TouchableOpacity>
                                </View>
                            </CardItem>
                        </Card>
                            )
                    )}
                </CardItem>
            </Card>
        )
    }
}