RN

index.js

import React, { Component } from 'react';
import { StyleSheet, View } from 'react-native';
import { StyleProvider, Container, Content, Text } from 'native-base';
import { Grid, Col, Row } from 'react-native-easy-grid';

// Theme
import getTheme from '../native-base-theme/components';
import material from '../native-base-theme/variables/material';

// Component
import SwiperBanner from './components/swiper-banner';
import ProductList from './components/product-list';

// Apollo
import ApolloClient from 'apollo-client';
import { HttpLink, InMemoryCache } from 'apollo-client-preset';
import { ApolloProvider, graphql } from 'react-apollo';
import gql from 'graphql-tag';

import { Products } from '../graphql/queries/get';

// class Menu extends Component {
	// constructor(props) {
	// 	super(props);

		this.state = {
			bannerList: [
				'https://ecs7.tokopedia.net/img/banner/2018/7/20/25618007/25618007_6031f197-e7d5-4b46-9353-e050724a1a05.jpg',
				'https://ecs7.tokopedia.net/img/banner/2018/7/2/25618007/25618007_781fa693-e0fa-4f32-bff6-a2c4a64ba0c1.jpg',
				'https://ecs7.tokopedia.net/img/banner/2018/7/20/25618007/25618007_867bfe2c-7622-48b4-9266-14d47d8f1a56.jpg'
			],
			productLatte: [
				{
					'name': [],
					'price': []
				}
			]
		}
	

const ProductsComponent = ({ data: { loading, error, products } }) => {
	if (loading) return <View><Text>loading...</Text></View>;
	if (error) return <View><Text>opss... </Text></View>;
	
	return (
		<StyleProvider style={getTheme(material)}>
			<Container>
				<Content>
					{products.map(us => (
					 	<Text>{us.name}</Text>
					 ))}
				</Content>
			</Container>
		</StyleProvider>
	)
};



const ProductsWithData = graphql(Products)(ProductsComponent);
export default ProductsWithData;

product-list.js

import React, { Component } from 'react';
import { StyleSheet, Image, ScrollView, View, Text } from 'react-native';
import { Button } from 'native-base';

class ProductList extends Component {
	constructor(props) {
		super(props)
	}

	render() {
		const productType = this.props.type;
		const productList = this.props.products; // Return data list produk dari parent component
    
		return (
			<View style={{flex:1, backgroundColor:'#f5f5f5', padding:8, paddingTop:20}}>
				<View style={{marginBottom:10}}>
					<Text style={{fontSize:17, color:'#424242', fontWeight:'bold'}}>{productType} Product</Text>
				</View>
				<ScrollView horizontal={true}>
          // Looping data produk list tadi
					{productList.map((item, index) => this._renderProduct(item, index) )}
				</ScrollView>
			</View>
		)
	}

  // Render data produk disini
	_renderProduct = (item, index) => {
		return (
			<View key={index} style={styles.productOutter}>
				<Image source={{uri: item.img}} style={styles.productThumb} />
				<Text style={styles.productName}>
					{item.name}
				</Text>
				<Text style={styles.productPrice}>
					Rp {item.price}
				</Text>
				<Button primary small block>
					<Text style={styles.orderText}>ORDER</Text>
				</Button>
			</View>
		)
	}
}

export default ProductList;

const styles = StyleSheet.create({
	productOutter: {
		flex: 1,
		backgroundColor: '#fff',
		padding: 8,
		width: 120,
		borderRadius: 4,
		marginRight: 10,
		marginLeft: 10
	},
	productThumb: {
		width: '100%',
		height: 100,
		resizeMode:'stretch'
	},
	productName: {
		fontSize: 14,
		color: '#212121'
	},
	productPrice: {
		fontSize:11,
		color: '#7A503B',
		marginBottom: 10
	},
	orderText: {
		color:'#fafafa',
		fontSize: 12
	}
});