LAPORAN PRAKTIKUM

Pemrograman Mobile
Jobsheet 4 Membuat Project React Native Bagian-4

Disusun Oleh :

Nadhirotul Laily (2131740041)

POLITEKNIK NEGERI MALANG PSDKU LUMAJANG

ANGKATAN 2021/2022
 Menambahkan Event pada Keyboard
1) Buka Expo.dev , kemudian login.

2) Membuat snacks baru dengan nama ContohEvent, copy seluruh kode program yang sudah
dibuat di Jobsheet03, yaitu dari App.js, header.js dan tambahData.js yang berada pada folder
components.
3) Jalankan emulator pada Expo kalian dan pilih android

4) Klik pada input tambah data, kemudian akan tampil keyboard

5) Untuk bisa menghilangkan keyboard Ketika kita menyentuh layar pada layout tersebut kita
bisa menambahkan beberapa komponen berikut ini.
6) Langkah pertama buka App.js , kemudian import komponen berikut ini:
TouchableWithoutFeedback dan Keyboard.
7) Selanjutnya pada pada bagian return panggil komponen TouchableWithoutFeedback
sebelum , seperti berikut ini:

8) Kemudian tambahkan perintah onPress pada komponen TouchableWithoutFeedback seperti

dibawah ini.

9) Jalankan emulator , kemudian tampilkan keyboard setelah tampil klik pada bagian layar
manapun , maka keyboard akan hilang (dismiss).
 Membuat Navigator
1) Membuat snack baru dengan nama Jobsheet04-Laily

2) Membuat folder baru dengan nama halaman

3) Membuat file baru dengan nama home.js dan about.js

4) Setelah selesai import React, kemudian import StyleSheet, View dan Text dari reactnative

5) Membuat fungsional komponen dengan nama Home seperti berikut ini

6) Kemudian menambahkan css untuk mengatur tampilan dari halaman home

7) Memanggil css tersebut pada komponen view

8) Langkah selajutnya kita masuk ke about.js dan lakukan cara yang sama, yaitu import React,
kemudian import StyleSheet, View dan Text

9) Setelah itu membuat fungsi dengan nama About dan tambahkan kode program seperti berikut
ini

10) Kemudian membuat css yang sama persis dengan home.js dan panggil css tersebut melalui
view

Memanggil komponen
1) Buka App.js kemudian hapus semua isi kode program didalamnya
2) Kemudian memasukkan kode yang baru dengan menambahkan import React

3) Setelah itu import halaman home

4) Kemudian membuat fungsi App dan panggil halaman Home

5) Pastikan layout akan tampil seperti ini

 Custom Font dan mengenali Error pada Pemanggilan Komponen
1) Buka google font seperti berikut ini :

2) Disini saya menggunakan font dengan nama indie flower, setelah anda memilih nama fontnya
, klik dan pastikan tampil seperti berikut ini

3) Langkah selanjutnya klik download family, pada sebelah kanan browser

4) Setelah selesai download font, Langkah berikutnya adalah pada folder assets anda buatlah
satu folder didalamnya dan beri nama fonts
5) Kemudian masukkan font yang anda inginkan kedalam folder fonts yang sudah kita buat
6) Masukkan font ke folder

7) Setelah itu akan muncul pop up windows seperti berikut ini

8) Silahkan pilih opsi browse, atau drag and drop dari folder font yang sudah didownload
sebelumnya

9) Pastikan font yang anda inginkan sudah masuk disitu dan pilih import items
10) Kalua font yang anda import tidak berada di dalam folder fonts, maka anda perlu
memindahkanya menggunakan drag and drop, tinggal digeser terus dipindahkan ke dalam
folder fonts anda. Seperti dibawah ini

11) Kemudian buka App.js dan buat const dengan nama getFonts untuk memanggil font yang
sudah kita buat sebelumnya
12) Kemudian tambahkan const untuk meload font tersebut

13) Karena menggunakan useState jangan lupa untuk import useState

14) Langkah selanjutnya import AppLoading untuk memanggil fonts apabila load font yang kita
gunakan tidak berfungsi

15) Kemudian kita buat sebuah kondisi if untuk menampilkan font tersebut

16) Setelah itu tambahkan kondisi else , untuk memastikan jika font yang kita panggil tidak
berfungsi, maka akan langsung load ulang menggunakan AppLoading

17) ) Kemudian kita import API Font yang sudah kita panggi sebelumnya

18) Jangan lupa untuk menambahkan dependency apabila muncul notifikasinya

19) ) Apabila font muncul notifikasi error, seperti berikut ini, maka ada beberapa komponen
ataupun fungsi pada library tertentu yang sudah di update ataupun sudah tidak digunakan
Kembali.

20) Maka perlu mengatur struktur ulang pemanggilan font

21) Langkah pertama adalah lihat pada dokumentasi expo, selaku penyedia library
22) Menghilangkan beberapa komponen yang diimport, yaitu useState (karena pada library expo
sudah disediakan useFonts sebagai Hooks nya , atau pemanggilanya), kemudian juga
hilangkan Api yang dipanggil. Kemudian yang terakhir hilangkan komponen AppLoading,
karena akan langsung menggunakan hooks dari expo-font
23) Kemudian mulai import beberapa komponen yang sudah disediakan oleh expofonts yaitu

24) Setelah itu hilangkan conts getFont

25) Kemudian rekonstruksi kode program yang sebelumnya menggunakan useState kita ganti
menggunakan useFonts

Menjadi

26) Kemudian tambahkan onLayoutRootView untuk memanggil fonts yang akan ditampilkan
menggunakan useFonts

27) Kemudian tambahkan kondisi apabila belum mencantumkan font yang kita panggil , atau file
dari font belum kita upload maka akan mengembalikan nilai null

28) Kemudian pada return hanya akan memanggil home saja

29) Selanjutnya buka home.js dan buat css untuk menampilkan font yang sudah kita download

30) Panggil css tersebut pada , sehingga tampilan home akan menjadi seperti berikut ini (font
sudah berganti dengan nunito-bold)
 Tugas
1) Buatlah tampilan Home menjadi informasi Kelas
2) Isi koding dalam Home
3) Panggil Home di APP.js

4) Maka hasilnya akan seperti ini

5) Buatlah tampilan about menjadi profil kalian masing2 dan jangan lupa sertakan foto
6) Isi codingan dalam about
7) Panggil About pada App.js

8) Maka hasilnya akan seperti ini