(Week 7) Products Feed with React Native
Pada post sebelumnya membahas mengenai layouting pada React Native dengan menggunakan flexbox. Nah, kali ini akan dibahas lebih lanjut mengenai hal layouting ini. Tulisan ini membahas bagaimana layouting untuk halaman yang mengandung feed, terutama product feeds seperti pada online marketplace. Contoh penggunaan feed yang paling mudah untuk dilihat terletak pada sosial media, seperti Instagram, Twitter, Facebook, dll.
1
Sebelum memulainya, pastikan set up environment dan dependencies proyek React Native telah dieksekusi dengan benar (jika belum, silakan tanya om gugel). Setelah itu, buka file App.js yang ada pada folder root proyek terkait, serta ganti dengan code berikut.
import React, {Component} from “react”;
import { AppRegistry } from “react-native”;
import Products from “./src/pages/Products”;
export default class App extends Component {
render() {
return (
<Products />
);
}
}
AppRegistry.registerComponent(“LapakIkan”, () => App);
2
Setelah itu, buatlah direktori src/pages, serta file Products di dalam direktori tersebut. File Products ini nantinya akan memuat container bagi produk yang ingin ditampilkan. Dalam file Products.js tulis kode berikut.
import React, { Component } from ‘react’;
import {
StyleSheet,
Text,
View,
ScrollView,
Image
} from ‘react-native’;
import ProductsItem from ‘../components/ProductsItem’;
export default class Products extends Component {
…
<konten>
…
}
Dari kode di atas terlihat bahwa kita harus membuat file ProductsItem.js pada folder src/components. File ProductsItem.js nantinya berguna untuk mengambil setiap individu data yang ingin ditampilkan. Untuk bagian konten dari Products.js, akan terdapat 3 fungsi, yaitu constructor(), renderProducts(), dan render(). Agar tulisan ini dapat diimplementasikan dengan mudah, data yang diperlukan di-input secara manual.
constructor(props) {
super(props);
this.state = {
products_items: [
{
title: ‘Title1’,
lapak_name: ‘Lapak1’,
image: require(‘../images/product_images/img1.jpg’),
},
{
title: ‘Title2’,
lapak_name: ‘Lapak2’,
image: require(‘../images/product_images/img2.jpg’)
}
]
};
}
Selain fungsi constructor(), tambahkan juga fungsi renderProducts() yang berguna untuk mengambil detail dari produk terkait, dan fungsi render() yang berguna untuk menampilkan produk-produk tersebut. Berikut contoh penulisan dari kedua fungsi tersebut.
renderProducts() {
return this.state.products_items.map((products, index) => {
return <ProductsItem key={index} index={index} products={products} />
});
}
render() {
return (
<View style={styles.container}>
<ScrollView style={styles.products_container}>
{ this.renderProducts() }
</ScrollView>
</View>
);
}
3
Apabila hal-hal sebelumnya telah dilakukan, berarti tinggal component dari ProductsItem.js yang belum diimplementasi. Seperti yang telah dikatakan sebelumnya, ProductsItem.js berfungsi untuk mengambil detail dari setiap produk, sehingga bersifat esensial juga. Berikut adalah kode implementasinya.
import React, { Component } from ‘react’;
import {
StyleSheet,
Text,
View,
Image
} from ‘react-native’;
import Button from ‘./Button’;
const ProductsItem = ({ products, index }) => {
let number = (index + 1).toString();
return (
<Button
key={index}
noDefaultStyles={true}
onPress={onPress.bind(this, products)}
>
<View style={styles.products_item}>
<View style={styles.products_photo}>
<Image source={products.image} style={styles.photo} />
</View>
<View style={styles.products_text}>
<View style={styles.text_container}>
<Text style={styles.title}>{products.title}</Text>
<Text>{products.lapak_name}</Text>
</View>
<View style={styles.number}>
<Text>#{number}</Text>
</View>
</View>
</View>
</Button>
);
}
export default ProductsItem;
4
Setelah itu, yang perlu dilakukan adalah styling agar mendapatkan hal-hal yang sesuai. Sebagai referensi dapat dilihat pada post sebelumnya ataupun repositori berikut. Untuk yang penasaran, berikut adalah contoh implementasinya.
Sekian dan terimakasih, semoga bermanfaat! :D
