Aplikasi CRUD dengan React Native

Pada tutorial kali ini Koders akan belajar membuat aplikasi CRUD dengan react native seperti yang sudah dijanjikan pada tutorial sebelumnya. Kita akan menggunakan aplikasi myapp yang sudah diinstall sebelumnya, baca : React Native – Installasi dan Running di Emulator Android dan iOS.

Aplikasi yang akan kita buat yaitu aplikasi crud dengan react native untuk menyimpan nama – nama kota.

Komponen

Pada aplikasi yang akan kita buat, kita akan menggunakan 4 komponen buatan sendiri, untuk penjelasan membuat komponen pada react native bisa lihat tutorial sebelumnya.

  1. Komponen – komponen dasar React Native

Struktur folder pada akhir aplikasi akan terlihat seperti dibawah ini:

Membuat aplikasi CRUD sederhana dengan React Native
Struktur Folder.

Oke, pertama kita buat dulu komponen nya.

Komponen Input

myapp/src/components/Input.js

  1. import React, { Component } from "react";
  2. import { View, TextInput, Button, StyleSheet } from "react-native";
  3.  
  4. class Input extends Component {
  5.   state = {
  6.     placeName: ""
  7.   };
  8.  
  9.   placeNameChangedHandler = val => {
  10.     this.setState({
  11.       placeName: val
  12.     });
  13.   };
  14.  
  15.   placeSubmitHandler = () => {
  16.     if (this.state.placeName.trim() === "") {
  17.       return;
  18.     }
  19.  
  20.     this.props.onPlaceAdded(this.state.placeName);
  21.   };
  22.  
  23.   render() {
  24.     return (
  25.       <View style={styles.inputContainer}>
  26.         <TextInput
  27.           placeholder="Maukkan Nama Kota"
  28.           value={this.state.placeName}
  29.           onChangeText={this.placeNameChangedHandler}
  30.           style={styles.placeInput}
  31.         />
  32.         <Button
  33.           title="Add"
  34.           style={styles.placeButton}
  35.           onPress={this.placeSubmitHandler}
  36.         />
  37.       </View>
  38.     );
  39.   }
  40. }
  41.  
  42. const styles = StyleSheet.create({
  43.   inputContainer: {
  44.     width: "100%",
  45.     flexDirection: "row",
  46.     justifyContent: "space-between",
  47.     alignItems: "center"
  48.   },
  49.   placeInput: {
  50.     width: "80%",
  51.     borderWidth: 1
  52.   },
  53.   placeButton: {
  54.     width: "30%"
  55.   }
  56. });
  57.  
  58. export default Input;
Tampilan Aplikasi

Pada komponen Input.js diatas kita menggunakan 3 komponen dasar react native.

  1. View
    Digunakan untuk membuat kontainer menjadi satu layout.
  2. TextInput
    Digunakan untuk mengisi nama kota yang akan disimpan.
  3. Button
    Digunakan untuk memanggil fungsi submit yang kemudian akan menyimpan data pada state.

Pada komponen ini kita juga memiliki 2 fungsi utama, yaitu placeNameChangedHandler yang kita gunakan untuk meyimpan value dari TextInput dan placeSubmitHandler yang kita gunakan untuk menyimpan data pada state utama aplikasi myapp.

Komponen List

myapp/src/components/List.js

  1. import React from "react";
  2. import { StyleSheet, FlatList } from "react-native";
  3.  
  4. import ListItem from "./ListItem";
  5.  
  6. const List = props => {
  7.   return (
  8.     <FlatList
  9.       style={styles.listContainer}
  10.       data={props.places}
  11.       renderItem={(info) => (
  12.         <ListItem
  13.           placeName={info.item.name}
  14.           placeImage={info.item.image}
  15.           onItemPressed={() => props.onItemSelected(info.item.key)}
  16.         />
  17.       )}
  18.     />
  19.   );
  20. };
  21.  
  22. const styles = StyleSheet.create({
  23.   listContainer: {
  24.     width: "100%"
  25.   }
  26. });
  27.  
  28. export default List;

Pada komponen List.js kita menggunakan komponen bawaan react native yaitu FlatList yang digunakan untuk menampung semua data yang sudah kita simpan, FlatList mirip dengan ScrollView baca komponen dasar react native.

Lalu kita menggunakan komponen ListItem.js sebagai render itemnya, pada komponen ListItem.js kita memberikan 3 props:

  1. placeName
    Digunakan untuk memberikan properties nama kota yang kita simpan.
  2. placeImage
    Digunakan untuk memberikan properties gambar yang saat ini masih di hardcode.
  3. onItemPressed
    Digunakan untuk memberikan properties fungsi ketika item di pilih.

Baca juga:  Memahami Props dan State pada React Native.

Komponen List Item

myapp/src/components/ListItem.js

  1. import React from "react";
  2. import { View, Text, StyleSheet, TouchableOpacity, Image } from "react-native";
  3.  
  4. const listItem = props => (
  5.   <TouchableOpacity onPress={props.onItemPressed}>
  6.     <View style={styles.listItem}>
  7.       <Image resizeMode="cover" source={props.placeImage} style={styles.placeImage} />
  8.       <Text>{props.placeName}</Text>
  9.     </View>
  10.   </TouchableOpacity>
  11. );
  12.  
  13. const styles = StyleSheet.create({
  14.   listItem: {
  15.     width: "100%",
  16.     marginBottom: 5,
  17.     padding: 10,
  18.     backgroundColor: "#eee",
  19.     flexDirection: "row",
  20.     alignItems: "center"
  21.   },
  22.   placeImage: {
  23.       marginRight: 8,
  24.       height: 30,
  25.       width: 30
  26.   }
  27. });
  28.  
  29. export default listItem;
List Item

Pada komponen ListItem.js kita menampilkan semua data yang sudah diinput pada komponen Input.js dan mendapatkan nya dari properties yang telah diberikan oleh komponen List.js.

Komponen ListItem.js memiliki 1 props fungsi onItemPressed yang kita gunakan untuk melihat detail dari data yang ditampilkan.

Komponen Detail

myapp/src/components/Detail.js

  1. import React from "react";
  2. import { Modal, View, Image, Text, Button, StyleSheet } from "react-native";
  3.  
  4. const placeDetail = props => {
  5.   let modalContent = null;
  6.  
  7.   if (props.selectedPlace) {
  8.     modalContent = (
  9.       <View>
  10.         <Image source={props.selectedPlace.image} style={styles.placeImage} />
  11.         <Text style={styles.placeName}>{props.selectedPlace.name}</Text>
  12.       </View>
  13.     );
  14.   }
  15.   return (
  16.     <Modal
  17.       onRequestClose={props.onModalClosed}
  18.       visible={props.selectedPlace !== null}
  19.       animationType="slide"
  20.     >
  21.       <View style={styles.modalContainer}>
  22.         {modalContent}
  23.         <View>
  24.           <Button title="Delete" color="red" onPress={props.onItemDeleted} />
  25.           <Button title="Close" onPress={props.onModalClosed} />
  26.         </View>
  27.       </View>
  28.     </Modal>
  29.   );
  30. };
  31.  
  32. const styles = StyleSheet.create({
  33.   modalContainer: {
  34.     margin: 22
  35.   },
  36.   placeImage: {
  37.     width: "100%",
  38.     height: 400
  39.   },
  40.   placeName: {
  41.     fontWeight: "bold",
  42.     textAlign: "center",
  43.     fontSize: 28
  44.   }
  45. });
  46.  
  47. export default placeDetail;
Detail Item

Komponen Detail.js kita gunakan untuk menampilkan detail dari salah satu item yang sudah dipilih pada komponen ListItem.js. Komponen yang kita gunakan untuk menampilkan detail data yang dipilih adalah react native modal, komponen bawaan react native.

Pada komponen ini kita menampilkan gambar dan nama kota, serta 2 button:

  1. Delete
    Button ini kita gunakan untuk menghapus item dari list data.
  2. Close
    Button ini kita gunakan untuk menutup komponen Modal.

Komponen kita sudah selesai, selanjutnya edit file App.js kita sehingga menjadi seperti dibawah.

myapp/App.js

  1. import React, { Component } from "react";
  2. import { StyleSheet, View } from "react-native";
  3.  
  4. import List from "./src/components/List";
  5. import Detail from "./src/components/Detail";
  6. import Input from "./src/components/Input";
  7.  
  8. export default class App extends Component {
  9.   state = {
  10.     places: [],
  11.     selectedPlace: null
  12.   };
  13.  
  14.   placeAddedHandler = placeName => {
  15.     this.setState(prevState => {
  16.       return {
  17.         places: prevState.places.concat({
  18.           key: Math.random(),
  19.           name: placeName,
  20.           image: {
  21.             uri:
  22.               "https://koder.id/wp-content/uploads/2018/11/cropped-favicon-180x180.png"
  23.           }
  24.         })
  25.       };
  26.     });
  27.   };
  28.  
  29.   placeDeletedHandler = () => {
  30.     this.setState(prevState => {
  31.       return {
  32.         places: prevState.places.filter(place => {
  33.           return place.key !== prevState.selectedPlace.key;
  34.         }),
  35.         selectedPlace: null
  36.       };
  37.     });
  38.   };
  39.  
  40.   modalClosedHandler = () => {
  41.     this.setState({
  42.       selectedPlace: null
  43.     });
  44.   };
  45.  
  46.   placeSelectedHandler = key => {
  47.     this.setState(prevState => {
  48.       return {
  49.         selectedPlace: prevState.places.find(place => {
  50.           return place.key === key;
  51.         })
  52.       };
  53.     });
  54.   };
  55.  
  56.   render() {
  57.     return (
  58.       <View style={styles.container}>
  59.         <Detail
  60.           selectedPlace={this.state.selectedPlace}
  61.           onItemDeleted={this.placeDeletedHandler}
  62.           onModalClosed={this.modalClosedHandler}
  63.         />
  64.         <Input onPlaceAdded={this.placeAddedHandler} />
  65.         <List
  66.           places={this.state.places}
  67.           onItemSelected={this.placeSelectedHandler}
  68.         />
  69.       </View>
  70.     );
  71.   }
  72. }
  73.  
  74. const styles = StyleSheet.create({
  75.   container: {
  76.     flex: 1,
  77.     padding: 30,
  78.     backgroundColor: "#fff",
  79.     alignItems: "center",
  80.     justifyContent: "flex-start"
  81.   }
  82. });

Dengan begitu sekarang aplikasi kita sudah selesai, coba jalankan perintah

$ react-native run-android

Penjelasan

Sampai tahap ini Koders sudah berhasil menyimpan data ke state dan menghapusnya. Koders bisa mencoba untuk mengkustome tampilan dari aplikasi ini supaya lebih familiar dengan komponen react native.

Author

Started coding from 3rd junior high school, 3+ years of experience in Software development using any programming language.

Pin It