Tutorial React Native Auth - #2 - Membuat Reusable Components- Jurnalkoding.com

Membuat Reusable Components

Pada artikel ini, kita akan lanjutkan untuk pembuatan reusable components pada aplikasi kita, tapi sebelum itu silahkan teman - teman jalankan perintah berikut ini pada terminalnya.

npm run reset-project

Ketika perintah diatas dijalankan, kita akan mendapatkan pertanyaan seperti berikut ini, silahkan teman - teman jawab N.

Do you want to move existing files to /app-example instead of deleting them? (Y/n): N

Setelah berhasil menjalankan perintah diatas, kita akan mendapatkan fresh project dengan tampilan kurang lebih seperti berikut ini.

reusable

Input

Silahkan teman - teman buat folder baru dengan nama components yang kita letakan di dalam root folder project, kemudian buat file baru didalamnya dengan nama input.tsx, kemudian masukan kode berikut ini.

input.tsx

import React from 'react';
import { StyleSheet, TextInput } from 'react-native';

const Input = ({...props}) => {
  return (
    <TextInput
        style={styles.input}
        autoCapitalize="none"
        {...props}
    />
  )
}

const styles = StyleSheet.create({
  input: {
    height: 48,
    borderWidth: 1,
    borderColor: "#ccc",
    borderRadius: 8,
    paddingHorizontal: 16,
    marginBottom: 16,
  },
});

export { Input };

Pertama-tama kita lakukan import terhadap beberapa module dari React dan React Native yang akan kita gunakan.

input.tsx

import React from 'react';
import { StyleSheet, TextInput } from 'react-native';

Selanjutnya, kita membuat sebuah React Functional Component dengan nama Input.

input.tsx

const Input = ({...props}) => {
  return (
    <TextInput
        style={styles.input}
        autoCapitalize="none"
        {...props}
    />
  )
}

Kita menggunakan destructuring props agar komponen ini fleksibel dan bisa menerima berbagai properti seperti placeholder, value, onChangeText, dan sebagainya.
Properti autoCapitalize="none" digunakan agar input tidak otomatis mengkapitalkan huruf pertama

Setelah itu kita buat objek styles dengan menggunakan StyleSheet.create.

input.tsx

const styles = StyleSheet.create({
  input: {
    height: 48,
    borderWidth: 1,
    borderColor: "#ccc",
    borderRadius: 8,
    paddingHorizontal: 16,
    marginBottom: 16,
  },
});

Dan terakhir kita lakukan export pada komponen Input.

input.tsx

export { Input };

Button

Silahkan teman - teman buat file baru dengan nama button.tsx yang diletakkan di dalam folder components, kemudian masukkan kode berikut ini.

button.tsx

import React from 'react';
import {
  StyleSheet,
  Text,
  TouchableOpacity,
  TouchableOpacityProps,
} from 'react-native';

type Variant = 'default' | 'dark' | 'danger';

type ButtonProps = {
  title: string;
  variant?: Variant;
} & TouchableOpacityProps;

const Button = ({ title, variant = 'default', ...props }: ButtonProps) => {
  const getVariantStyle = () => {
    switch (variant) {
      case 'dark':
        return styles.buttonDark;
      case 'danger':
        return styles.buttonDanger;
      case 'default':
      default:
        return styles.buttonDefault;
    }
  };

  return (
    <TouchableOpacity
      style={[
        styles.button,
        getVariantStyle(),
        props.disabled && styles.buttonDisabled,
      ]}
      {...props}
    >
      <Text style={styles.buttonText}>{title}</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    height: 48,
    borderRadius: 8,
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 16,
  },
  buttonDefault: {
    backgroundColor: "#007AFF",
  },
  buttonDark: {
    backgroundColor: "#000000",
  },
  buttonDanger: {
    backgroundColor: "#FF3B30", 
  },
  buttonDisabled: {
    opacity: 0.5,
  },
  buttonText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "bold",
  },
});

export { Button };

Pertama-tama kita import beberapa modul dari React dan React Native yang diperlukan.

button.tsx

import React from 'react';
import {
  StyleSheet,
  Text,
  TouchableOpacity,
  TouchableOpacityProps,
} from 'react-native';

Selanjutnya, kita mendefinisikan tipe Variant yang akan menentukan variasi warna dari tombol.

button.tsx

type Variant = 'default' | 'dark' | 'danger';

Dan kita juga membuat type data untuk button props yang digunakan pada komponen kita.

button.tsx

type ButtonProps = {
  title: string;
  variant?: Variant;
} & TouchableOpacityProps;

title: string; → property title kita set dengan tipe data string.
variant?: Varian → property title kita set dengan tipe data string.
TouchableOpacityProps: agar kita bisa tetap menggunakan properti standar tombol seperti onPress, disabled, dll.

Kemudian, kita membuat sebuah React Functional Component dengan nama Button, yang terdiri dari beberapa props diantaranya, title, variant, dan ...props.

button.tsx

const Button = ({ title, variant = 'default', ...props }: ButtonProps)

Di dalam komponen, kita membuat sebuah method getVariantStyle() untuk menentukan style tombol berdasarkan variannya.

button.tsx

const getVariantStyle = () => {
  switch (variant) {
    case 'dark':
      return styles.buttonDark;
    case 'danger':
      return styles.buttonDanger;
    case 'default':
    default:
      return styles.buttonDefault;
  }
};

Lalu pada return, kita gunakan TouchableOpacity dengan beberapa kombinasi style:

button.tsx

<TouchableOpacity
  style={[
    styles.button,
    getVariantStyle(),
    props.disabled && styles.buttonDisabled,
  ]}
  {...props}
>
  <Text style={styles.buttonText}>{title}</Text>
</TouchableOpacity>

styles.button: style bawaan button.
getVariantStyle(): menambahkan background button sesuai varian.
props.disabled && styles.buttonDisabled: jika tombol disabled, maka tambahkan opacity 0.5.

Setelah itu kita buat objek styles dengan menggunakan StyleSheet.create.

button.tsx

const styles = StyleSheet.create({
  button: {
    height: 48,
    borderRadius: 8,
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 16,
  },
  buttonDefault: {
    backgroundColor: "#007AFF",
  },
  buttonDark: {
    backgroundColor: "#000000",
  },
  buttonDanger: {
    backgroundColor: "#FF3B30", 
  },
  buttonDisabled: {
    opacity: 0.5,
  },
  buttonText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "bold",
  },
});

Dan terakhir kita lakukan export pada komponen Button.

button.tsx

export { Button };

Rafi Taufiqurrahman

Tutorial React Native Auth - #2 - Membuat Reusable Components

Membuat Reusable Components

Input

Button

Artikel Lainnya

JurnalKoding

Tutorial React Native Auth - #2 - Membuat Reusable Components

¶Membuat Reusable Components

¶Input

¶Button

Rafi Taufiqurrahman

Artikel Lainnya

JurnalKoding

Membuat Reusable Components

Input

Button