Tutorial React Native Auth - #2 - Membuat Reusable Components
Artikel ini merupakan series dari Tutorial Authentication Dengan React Native dan Laravel Sanctum, disini kita akan membuat beberapa reusable components yang akan kita gunakan pada project kita.
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.
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.
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.
import React from 'react';
import { StyleSheet, TextInput } from 'react-native';
Selanjutnya, kita membuat sebuah React Functional Component dengan nama Input.
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.
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.
export { Input };
Button
Silahkan teman - teman buat file baru dengan nama button.tsx yang diletakkan di dalam folder components, kemudian masukkan kode berikut ini.
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.
import React from 'react';
import {
StyleSheet,
Text,
TouchableOpacity,
TouchableOpacityProps,
} from 'react-native';
Selanjutnya, kita mendefinisikan tipe Variant yang akan menentukan variasi warna dari tombol.
type Variant = 'default' | 'dark' | 'danger';
Dan kita juga membuat type data untuk button props yang digunakan pada komponen kita.
type ButtonProps = {
title: string;
variant?: Variant;
} & TouchableOpacityProps;
-
title: string;→ propertytitlekita set dengan tipe datastring. -
variant?: Varian→ propertytitlekita set dengan tipe datastring. -
TouchableOpacityProps: agar kita bisa tetap menggunakan properti standar tombol sepertionPress,disabled, dll.
Kemudian, kita membuat sebuah React Functional Component dengan nama Button, yang terdiri dari beberapa props diantaranya, title, variant, dan ...props.
const Button = ({ title, variant = 'default', ...props }: ButtonProps)
Di dalam komponen, kita membuat sebuah method getVariantStyle() untuk menentukan style tombol berdasarkan variannya.
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:
<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 tomboldisabled, maka tambahkan opacity 0.5.
Setelah itu kita buat objek styles dengan menggunakan StyleSheet.create.
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.
export { Button };
Artikel Lainnya
Beberapa artikel rekomendasi lainnya untuk menambah pengetahuan.