#2 fetch products by laravel Json API

Author: Hardeepcoder

nativeShop/pages/home.js

@@ -4,46 +4,58 @@ import { AppRegistry,View,Text,StyleSheet
 
 export default class home extends Component{
 	 static navigationOptions = {
-    title: 'Welcome',
+		title: 'Welcome',
   };
 	render(){
 		const { navigate } = this.props.navigation;
 		return(
-		 <View style={{display:'flex',alignItems:'center', justifyContent:'center'}}>
-       <Text style={{margin:10,fontWeight:'bold',color:'#000'}}>Hello from home</Text>
+	  <View style={styles.container}>
+       <Text style={styles.pageName}>Hello from home</Text>
 
-	    <TouchableOpacity
-	 style={styles.cat}
-	  onPress={() => navigate('Products', {cat:'electronics'})}
-	   ><Text Text style={{color:'#fff'}}>Electronics ></Text>
+	   <TouchableOpacity
+		style={styles.cat}
+		onPress={() => navigate('Products',{cat:'electronics',id:'1'})}>
+	   <Text style={styles.btnText}> Electronics > </Text>
 	   </TouchableOpacity>
 
-	    <TouchableOpacity
-	 style={styles.cat}
-	  onPress={() => navigate('Products', {cat:'automobiles'})}
-	   ><Text Text style={{color:'#fff'}}>Automobiles ></Text>
+	   <TouchableOpacity
+		style={styles.cat}
+		onPress={() => navigate('Products',{cat:'automobiles',id:'2'})}>
+	   <Text style={styles.btnText}> Automobiles > </Text>
 	   </TouchableOpacity>
 
 	    <TouchableOpacity
-	 style={styles.cat}
-	  onPress={() => navigate('Products', {cat:'Movies'})}
-	   ><Text Text style={{color:'#fff'}}>Movies ></Text>
-	   </TouchableOpacity>
+		 style={styles.cat}
+		 onPress={() => navigate('Products',{cat:'Movies',id:'3'})}>
+		<Text style={styles.btnText}> Movies > </Text>
+	    </TouchableOpacity>
 
 	    <TouchableOpacity
-	 style={styles.cat}
-	  onPress={() => navigate('Products', {cat:'Books'})}
-	   ><Text Text style={{color:'#fff'}}>Books ></Text>
+		 style={styles.cat}
+		 onPress={() => navigate('Products',{cat:'Books',id:'4'})}>
+		<Text style={styles.btnText}> Books > </Text>
 	   </TouchableOpacity>
 
+	   
       </View>
 		);
 	}
 }
 const styles = StyleSheet.create({
+	container:{
+		display:'flex',alignItems:'center',
+		justifyContent:'center'
+	},
 	cat:{
 		backgroundColor:'blue',
 		padding:10,margin:10,width:'95%'
+	},
+	pageName:{
+		margin:10,fontWeight:'bold',
+		color:'#000', textAlign:'center'
+	},
+	btnText:{
+		color:'#fff',fontWeight:'bold'
 	}
 })
 AppRegistry.registerComponent('home', () => home);

nativeShop/pages/products.js

@@ -1,21 +1,80 @@
 import React, { Component } from 'react';
-import { AppRegistry,View,Text,StyleSheet } from 'react-native';
+import { AppRegistry,View,Text,
+StyleSheet,ListView,Image } from 'react-native';
 
 export default class products extends Component{
-	 static navigationOptions = {
+			
+	static navigationOptions = {
     title: 'Products',
-  };
+	};
+	
+	constructor(){
+		super();
+
+		this.state={
+		
+			dataSource: new ListView.DataSource({rowHasChanged:(r1,r2)=> r1!=r2}),
+		//link: 'http://hardeepcoder.com/laravel/easyshop/api/products/' + params.id,
+		}
+			
+		
+	}
+	componentDidMount(){
+		 const { params } = this.props.navigation.state;
+		fetch('http://hardeepcoder.com/laravel/easyshop/api/products/' + params.id)
+		.then((response) => response.json())
+		.then((responseJson) =>{
+			data = responseJson; // here we have all products data
+			this.setState({
+				dataSource: this.state.dataSource.cloneWithRows(data)
+			})
+		})
+		.catch((error) =>{
+			console.error(error);
+		});
+		
+	}
+		
 	render(){
 		 const { params } = this.props.navigation.state;
 		return(
-		 <View >
-       <Text>hello from products</Text>
-	   <Text style={{color:'#000',fontWeight:'bold'}}>{params.cat}</Text>
-      </View>
+		 <View style={styles.container}>	
+		 
+		   <Text style={styles.pageName}>Hello from Products</Text>
+		   <Text> Category Name: {params.cat}  Category id: {params.id}</Text>
+
+	
+		<ListView
+		dataSource={this.state.dataSource}
+		renderRow={(rowData)=>
+		
+		<View style={{padding:10,margin:10}}>
+		<Text style={{fontWeight:'bold',textAlign:'center'}}>{rowData.pro_name}</Text>
+		
+		<Image
+		style={{width:'100%',height:250}}
+		source={{uri:rowData.pro_img}}
+		/>
+		<Text>Price: {rowData.pro_price}</Text>
+		
+		</View>
+		}
+		/>
+		</View>
+			
 		);
 	}
+	
+		
+	
 }
 const styles = StyleSheet.create({
-	
+	container:{
+		display:'flex'
+	},
+	pageName:{
+		margin:10,fontWeight:'bold',
+		color:'#000', textAlign:'center'
+	}
 })
 AppRegistry.registerComponent('products', () => products);