Blog

Belajar React Native - Native Base

by
published on
Belajar React Native - Native Base

Ketika kita membangun sebuah aplikasi React Native Component tanpa library tambahan apapun, kita dituntut untuk menguasai styling pada Component tersebut.

Misalnya saja ketika kita membuat tombol dari Component TouchableOpacity, langkahnya tidak berhenti sampai mendefinisikan tag tersebut.

Masih ada tugas lain seperti membuat dan mengapply style yang mungkin kita tidak pahami sepenuhnya.

Lalu bagaimana seandainya kita ingin membuat tampilan UI yang menarik sementara kita tidak terlalu paham styling?

Jawabannya adalah Native Base.

Native Base adalah framework open source yang memungkinkan developer untuk membangun aplikasi mobile berkualitas.

Native Base dibangun di atas React Native yang menyediakan Anda dengan sekumpulan Component untuk pengembangan aplikasi mobile.

Dengan kata lain, Native Base adalah sebuah library atau modul React Native yang menyediakan Component UI yang siap pakai, tentunya dengan tampilan yang bagus.

Membuat Aplikasi Native Base Pertama Anda

Agar lebih paham, kita akan praktekkan penggunaan Native Base dalam project React Native kita.

Menginstall Native Base

Native Base harus diinstall terlebih dahulu dengan NPM sebelum bisa digunakan pada project React Native kita.

Namun, sebelum menginstallnya, pastikan Anda telah membuat project React Native terlebih dahulu, kemudian masuk ke folder project dengan PowerShell.

react-native init NativeBaseDemo

cd NativeBaseDemo

Untuk menginstall Native Base, jalankan perintah ini:

npm install native-base

Kemudian link peer dependencies:

react-native link

Mengimpor Native Base

Untuk mengimpor Component dari Native Base caranya sama dengan mengimpor Component yang biasa kita lakukan:

import React, { Component } from 'react';
import { Container, Button, Text } from 'native-base';

Menggunakan Component Native Base

Native base memiliki banyak Component yang siap pakai.

Sebagai perkenalan, kita hanya mencoba Component tombol saja.

Untuk itu masukkan kode ini ke file "App.js": 

class App extends Component {
	render() {
		return (
			<Container>
				<Button>
					<Text>
						Ini Adalah Tombol
					</Text>
				</Button>
			</Container>
		);
	}
}

Sedemikian rupa sehinggia isi keseluruhan file "App.js" seperti ini:

import React, { Component } from 'react';
import { Container, Button, Text } from 'native-base';

class App extends Component {
	render() {
		return (
			<Container>
				<Button>
					<Text>
						Ini Adalah Tombol
					</Text>
				</Button>
			</Container>
		);
	}
}

Menjalankan Aplikasi Native Base Pertama Anda

Langkah selanjutnya, jalankan emulator, kemudian jalankan aplikasi Anda dengan:

react-native run-android

Nanti tampilannya seperti ini:

Tampilan tombol yang muncul pada gambar tadi adalah tampilan default.

Tombol Native Base memiliki beberapa parameter untuk memberi style lain pada tombolnya.

Component-Component Native Base

Native Base tidak hanya memiliki Component Button atau tombol, masih ada banyak lagi.

 

Untuk mengetahuil apa saja Componentnya dan bagaimana cara menggunakannya, kunjungi:

https://docs.nativebase.io/Components.html#Components

Untuk membaca bab-bab studi kasus tutorial ini, baca ebook "Javascript for Everything" ini.