Add UI for the Application Guide screen

src/components/Accordion.tsx

@@ -0,0 +1,46 @@
+import {ReactNode, useState} from 'react';
+import {Pressable, StyleSheet, Text, View} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import Colors from '../../assets/styles/Colors';
+import FontFamily from '../../assets/styles/FontFamily';
+
+type AccordionProps = {
+  title: string;
+  children: ReactNode;
+};
+
+const Accordion: React.FC<AccordionProps> = ({title, children}) => {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <View>
+      <Pressable
+        style={styles.accordionContainer}
+        onPress={() => setExpanded(!expanded)}>
+        <Text style={styles.accordionTitle}>{title}</Text>
+        <Icon
+          name={expanded ? 'chevron-up' : 'chevron-down'}
+          size={24}
+          color={Colors.primary30.color}
+        />
+      </Pressable>
+      {expanded && <View>{children}</View>}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  accordionContainer: {
+    flexDirection: 'row',
+    paddingVertical: 12,
+    justifyContent: 'space-between',
+  },
+  accordionTitle: {
+    ...FontFamily.notoSansBold,
+    includeFontPadding: false,
+    fontSize: 14,
+    color: Colors.secondary30.color,
+  },
+});
+
+export default Accordion;

src/screens/applicationGuide/index.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
-import {StatusBar, Text, View} from 'react-native';
+import {ScrollView, StatusBar, Text, View} from 'react-native';
 import styles from './styles';
 import Colors from '../../../assets/styles/Colors';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { RootStackParamList } from '../../navigation/type';
+import {RootStackParamList} from '../../navigation/type';
-import { useNavigation } from '@react-navigation/native';
+import {useNavigation} from '@react-navigation/native';
-import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import {NativeStackNavigationProp} from '@react-navigation/native-stack';
+import Accordion from '../../components/Accordion';
+import FontFamily from '../../../assets/styles/FontFamily';
 
 type ApplicationGuideScreenNavigationProp = NativeStackNavigationProp<
   RootStackParamList,
@@ -31,6 +33,340 @@ function ApplicationGuideScreen() {
         />
         <Text style={styles.appBarTitle}>Panduan Aplikasi</Text>
       </View>
+      <ScrollView>
+        <View style={styles.contentContainer}>
+          <Accordion title="Registrasi Akun">
+            <Text style={styles.textContentDesc}>
+              Untuk dapat masuk ke M-Paspor, Anda diharuskan memiliki akun
+              dengan cara mendaftar ke aplikasi dengan cara sebagai berikut:
+            </Text>
+            <View style={styles.textContentWrapper}>
+              <Text style={[styles.textContentDesc, styles.listFlex]}>1.</Text>
+              <Text style={styles.textContentDesc}>
+                Buka M-Paspor menampilkan halaman login;
+              </Text>
+            </View>
+            <View style={styles.textContentWrapper}>
+              <Text style={[styles.textContentDesc, styles.listFlex]}>2.</Text>
+              <Text style={styles.textContentDesc}>Pilih Daftar Akun;</Text>
+            </View>
+            <View style={styles.textContentWrapper}>
+              <Text style={[styles.textContentDesc, styles.listFlex]}>3.</Text>
+              <Text style={styles.textContentDesc}>
+                Input data pendaftaran akun;
+              </Text>
+            </View>
+            <View style={styles.textContentWrapper}>
+              <Text style={[styles.textContentDesc, styles.listFlex]}>4.</Text>
+              <Text style={styles.textContentDesc}>
+                Input kode OTP yang terkirim melalui email (pastikan email aktif
+                yang digunakan), kemudian klik "Aktivasi" maka akun sudah dapat
+                digunakan dan dapat untuk login ke aplikasi.
+              </Text>
+            </View>
+          </Accordion>
+          <Accordion title="Login">
+            <Text style={styles.textContentDesc}>
+              Setelah berhasil melakukan registrasi, anda sudah dapat masuk ke
+              M-Paspor dengan cara sebagai berikut:
+            </Text>
+            <View style={styles.textContentWrapper}>
+              <Text style={[styles.textContentDesc, styles.listFlex]}>1.</Text>
+              <Text style={styles.textContentDesc}>
+                Buka M-Paspor menampilkan halaman login;
+              </Text>
+            </View>
+            <View style={styles.textContentWrapper}>
+              <Text style={[styles.textContentDesc, styles.listFlex]}>2.</Text>
+              <Text style={styles.textContentDesc}>Masukkan Email;</Text>
+            </View>
+            <View style={styles.textContentWrapper}>
+              <Text style={[styles.textContentDesc, styles.listFlex]}>3.</Text>
+              <Text style={styles.textContentDesc}>Masukkan Kata Sandi;</Text>
+            </View>
+            <View style={styles.textContentWrapper}>
+              <Text style={[styles.textContentDesc, styles.listFlex]}>4.</Text>
+              <Text style={styles.textContentDesc}>Tekan tombol Masuk;</Text>
+            </View>
+            <View style={styles.textContentWrapper}>
+              <Text style={[styles.textContentDesc, styles.listFlex]}>5.</Text>
+              <Text style={styles.textContentDesc}>
+                <Text style={{...FontFamily.notoSansItalic}}>
+                  Security check
+                </Text>{' '}
+                berbasis verifikasi CAPTCHA;
+              </Text>
+            </View>
+            <View style={styles.textContentWrapper}>
+              <Text style={[styles.textContentDesc, styles.listFlex]}>6.</Text>
+              <Text style={styles.textContentDesc}>
+                Jika login berhasil, Anda akan langsung diarahkan ke halaman
+                Beranda.
+              </Text>
+            </View>
+          </Accordion>
+          <Accordion title="Beranda">
+            <Text style={styles.textContentDesc}>
+              Jika login berhasil, akan muncul tampilan beranda aplikasi. Pada
+              beranda, aplikasi M-Paspor menampilkan{' '}
+              <Text style={{...FontFamily.notoSansItalic}}>banner</Text>, menu
+              permohonan pengajuan paspor, buku panduan, informasi EAZY
+              Passport, dan status permohonan.
+            </Text>
+          </Accordion>
+          <Accordion title="Pengajuan Permohonan Paspor">
+            <View style={styles.textContentWrapper}>
+              <Text style={[styles.textContentDesc, styles.listFlex]}>1.</Text>
+              <Text style={styles.textContentDesc}>
+                Pilih permohonan paspor reguler atau percepatan;
+              </Text>
+            </View>
+            <View style={styles.textContentWrapper}>
+              <Text style={[styles.textContentDesc, styles.listFlex]}>2.</Text>
+              <Text style={styles.textContentDesc}>
+                Pengisian Kuesioner Layanan Permohonan Peruntukan Paspor;
+              </Text>
+            </View>
+            <View style={styles.textContentWrapper}>
+              <Text style={[styles.textContentDesc, styles.listFlex]}>3.</Text>
+              <Text style={styles.textContentDesc}>
+                Pemohon mengambil atau mengunggah foto KTP sebagai persyaratan
+                permohonan paspor;
+              </Text>
+            </View>
+            <View style={styles.textContentWrapper}>
+              <Text style={[styles.textContentDesc, styles.listFlex]}>4.</Text>
+              <Text style={styles.textContentDesc}>
+                Klik Pilih Foto, lalu akan muncul form untuk mengisi Nama,
+                Tanggal Lahir, dan NIK Pemohon;
+              </Text>
+            </View>
+            <View style={styles.textContentWrapper}>
+              <Text style={[styles.textContentDesc, styles.listFlex]}>5.</Text>
+              <Text style={styles.textContentDesc}>
+                Selanjutnya yaitu pengisian kuesioner. Pada tahap ini akan
+                terdapat beberapa pertanyaan, yang menentukan jenis paspor apa
+                yang kita butuhkan seperti berikut:
+              </Text>
+            </View>
+            <View style={styles.alphabetListWrapper}>
+              <View style={styles.textContentWrapper}>
+                <Text style={[styles.textContentDesc, styles.listFlex]}>
+                  a.
+                </Text>
+                <Text style={styles.textContentDesc}>
+                  Pemohon mengisi data riwayat kepemilikan paspor (sudah atau
+                  belum pernah memiliki paspor);
+                </Text>
+              </View>
+              <View style={styles.textContentWrapper}>
+                <Text style={[styles.textContentDesc, styles.listFlex]}>
+                  b.
+                </Text>
+                <Text style={styles.textContentDesc}>
+                  Pemohon mengisi tujuan permohonan paspor. Untuk pengajuan
+                  permohonan dengan tujuan Haji dan Umroh tidak memerlukan
+                  upload surat rekomendasi dari Kementerian Agama (sebelumnya
+                  diwajibkan mengisi nomor surat rekomendasi Kemenag di data
+                  tambahan pemohon);
+                </Text>
+              </View>
+              <View style={styles.textContentWrapper}>
+                <Text style={[styles.textContentDesc, styles.listFlex]}>
+                  c.
+                </Text>
+                <Text style={styles.textContentDesc}>
+                  Pemohon mengisi data negara tujuan;
+                </Text>
+              </View>
+              <View style={styles.textContentWrapper}>
+                <Text style={[styles.textContentDesc, styles.listFlex]}>
+                  d.
+                </Text>
+                <Text style={styles.textContentDesc}>
+                  Pemohon mengisi data tempat tinggal di negara tujuan;
+                </Text>
+              </View>
+              <View style={styles.textContentWrapper}>
+                <Text style={[styles.textContentDesc, styles.listFlex]}>
+                  e.
+                </Text>
+                <Text style={styles.textContentDesc}>
+                  Pemohon mengisi kuesioner rencana lama tinggal di luar negeri;
+                </Text>
+              </View>
+              <View style={styles.textContentWrapper}>
+                <Text style={[styles.textContentDesc, styles.listFlex]}>
+                  f.
+                </Text>
+                <Text style={styles.textContentDesc}>
+                  Pemohon mengisi data identitas keluarga atau kerabat di
+                  Indonesia;
+                </Text>
+              </View>
+              <View style={styles.textContentWrapper}>
+                <Text style={[styles.textContentDesc, styles.listFlex]}>
+                  g.
+                </Text>
+                <Text style={styles.textContentDesc}>
+                  Pemohon mengisi data identitas keluarga atau kerabat di negara
+                  tujuan (jika ada).
+                </Text>
+              </View>
+            </View>
+            <View style={styles.textContentWrapper}>
+              <Text style={[styles.textContentDesc, styles.listFlex]}>6.</Text>
+              <Text style={styles.textContentDesc}>
+                Tahap selanjutnya, pemohon mengunggah dokumen persyaratan yang
+                diperlukan seperti berikut:
+              </Text>
+            </View>
+            <View style={styles.alphabetListWrapper}>
+              <View style={styles.textContentWrapper}>
+                <Text style={[styles.textContentDesc, styles.listFlex]}>
+                  a.
+                </Text>
+                <Text style={styles.textContentDesc}>
+                  Pemohon mengisi data tempat lahir, tanggal lahir, dan jenis
+                  kelamin (wajib). Kemudian Pemohon juga mengunggah data Kartu
+                  keluarga dan akta kelahiran/ ijazah/akta perkawinan/buku
+                  nikah/surat baptis (wajib);
+                </Text>
+              </View>
+              <View style={styles.textContentWrapper}>
+                <Text style={[styles.textContentDesc, styles.listFlex]}>
+                  b.
+                </Text>
+                <Text style={styles.textContentDesc}>
+                  Pemohon mengunggah data tanggal penerbitan KTP, data
+                  kewarganegaraan, data alamat sesuai KTP, dan data alamat
+                  sekarang;
+                </Text>
+              </View>
+              <View style={styles.textContentWrapper}>
+                <Text style={[styles.textContentDesc, styles.listFlex]}>
+                  c.
+                </Text>
+                <Text style={styles.textContentDesc}>
+                  Pemohon mengisi data identitas ibu (wajib), dan ayah (tidak
+                  wajib) serta data pasangan (tidak wajib).
+                </Text>
+              </View>
+            </View>
+            <View style={styles.textContentWrapper}>
+              <Text style={[styles.textContentDesc, styles.listFlex]}>7.</Text>
+              <Text style={styles.textContentDesc}>
+                Terlihat jenis permohonan dan data pemohon yang sudah diinput,
+                kemudian klik Lanjut;
+              </Text>
+            </View>
+            <View style={styles.textContentWrapper}>
+              <Text style={[styles.textContentDesc, styles.listFlex]}>8.</Text>
+              <Text style={styles.textContentDesc}>
+                Pemohon memilih lokasi, jenis paspor, dan jadwal pengambilan
+                paspor seperti berikut:
+              </Text>
+            </View>
+            <View style={styles.alphabetListWrapper}>
+              <View style={styles.textContentWrapper}>
+                <Text style={[styles.textContentDesc, styles.listFlex]}>
+                  a.
+                </Text>
+                <Text style={styles.textContentDesc}>
+                  Pemohon memilih lokasi kantor imigrasi yang dituju untuk
+                  melakukan permohonan dan pengambilan paspor;
+                </Text>
+              </View>
+              <View style={styles.textContentWrapper}>
+                <Text style={[styles.textContentDesc, styles.listFlex]}>
+                  b.
+                </Text>
+                <Text style={styles.textContentDesc}>
+                  Pemohon memilih jenis paspor;
+                </Text>
+              </View>
+              <View style={styles.textContentWrapper}>
+                <Text style={[styles.textContentDesc, styles.listFlex]}>
+                  c.
+                </Text>
+                <Text style={styles.textContentDesc}>
+                  Pemohon memilih tanggal dan waktu kedatangan berdasarkan kuota
+                  yang tersedia dari kantor imigrasi yang terpilih sebelumnya;
+                </Text>
+              </View>
+            </View>
+            <View style={styles.textContentWrapper}>
+              <Text style={[styles.textContentDesc, styles.listFlex]}>9.</Text>
+              <Text style={styles.textContentDesc}>
+                Selanjutnya, tahap finalisasi. Pemohon memastikan data yang
+                diinput sudah benar. Jika sudah, klik "Ya, lanjutkan". Namun,
+                jika belum yakin, bisa klik "Tidak, saya ingin mengubah data"
+                untuk mengedit data;
+              </Text>
+            </View>
+            <View style={styles.textContentWrapper}>
+              <Text style={[styles.textContentDesc, styles.listFlex]}>10.</Text>
+              <Text style={styles.textContentDesc}>
+                Pemohon akan melakukan pembayaran dan kemudian sistem akan
+                melakukan pengecekan dan menampilkan status pembayaran;
+              </Text>
+            </View>
+            <View style={styles.textContentWrapper}>
+              <Text style={[styles.textContentDesc, styles.listFlex]}>11.</Text>
+              <Text style={styles.textContentDesc}>
+                Pemohon melakukan pembayaran dengan payment gateway atau kode
+                billing yang tercantum pada aplikasi dan dokumen PDF pembayaran;
+              </Text>
+            </View>
+            <View style={styles.textContentWrapper}>
+              <Text style={[styles.textContentDesc, styles.listFlex]}>12.</Text>
+              <Text style={styles.textContentDesc}>
+                Jika sudah terbayar, maka permohonan akan berubah menjadi warna
+                hijau (indikator permohonan terbayar). Kemudian, Pemohon dapat
+                mendatangi kantor imigrasi sesuai tanggal kedatangan dengan
+                membawa bukti terbayar pada aplikasi ini.
+              </Text>
+            </View>
+          </Accordion>
+          <Accordion title="Ubah Jadwal Permohonan">
+            <Text style={styles.textContentDesc}>
+              Pemohon dapat mengajukan perubahan jadwal (
+              <Text style={{...FontFamily.notoSansItalic}}>reschedule</Text>)
+              permohonan dengan ketentuan sebagai berikut:
+            </Text>
+            <View style={styles.textContentWrapper}>
+              <Text style={[styles.textContentDesc, styles.listFlex]}>1.</Text>
+              <Text style={styles.textContentDesc}>
+                <Text style={{...FontFamily.notoSansItalic}}>Reschedule</Text>{' '}
+                hanya untuk permohonan yang telah terbayar;
+              </Text>
+            </View>
+            <View style={styles.textContentWrapper}>
+              <Text style={[styles.textContentDesc, styles.listFlex]}>2.</Text>
+              <Text style={styles.textContentDesc}>
+                Pemohon tidak dapat{' '}
+                <Text style={{...FontFamily.notoSansItalic}}>reschedule</Text>{' '}
+                dengan tanggal yang sama dengan pengajuan awal;
+              </Text>
+            </View>
+            <View style={styles.textContentWrapper}>
+              <Text style={[styles.textContentDesc, styles.listFlex]}>3.</Text>
+              <Text style={styles.textContentDesc}>
+                Batas{' '}
+                <Text style={{...FontFamily.notoSansItalic}}>reschedule</Text>{' '}
+                hanya 1x dan hanya 30 hari dari tanggal pembayaran pertama.
+              </Text>
+            </View>
+          </Accordion>
+          <Accordion title="Riwayat Permohonan">
+            <Text style={styles.textContentDesc}>
+              Menu Riwayat menampilkan daftar riwayat permohonan dengan status
+              yang sudah terbayar, menunggu pembayaran, draft, atau permohonan
+              kadaluarsa.
+            </Text>
+          </Accordion>
+        </View>
+      </ScrollView>
     </View>
   );
 }

src/screens/applicationGuide/styles.tsx

@@ -23,6 +23,31 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: Colors.neutral100.color,
   },
+  contentContainer: {
+    marginTop: 4,
+    marginHorizontal: 16,
+    marginBottom: 24,
+    gap: 12,
+  },
+  textContentDesc: {
+    flex: 1,
+    color: Colors.primary30.color,
+    ...FontFamily.notoSansRegular,
+    fontSize: 12,
+    textAlign: 'justify',
+    includeFontPadding: false,
+    lineHeight: 24,
+  },
+  listFlex: {
+    flex: 0,
+  },
+  alphabetListWrapper: {
+    marginStart: 16,
+  },
+  textContentWrapper: {
+    flexDirection: 'row',
+    gap: 6,
+  },
 });
 
 export default styles;

src/screens/eazyPassport/styles.tsx

@@ -9,7 +9,7 @@ const styles = StyleSheet.create({
   },
   textContainer: {
     gap: 8,
-    margin: 16
+    margin: 16,
   },
   textDesc: {
     ...FontFamily.notoSansRegular,

src/screens/seeRequirements/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {StatusBar, Text, View} from 'react-native';
+import {ScrollView, StatusBar, Text, View} from 'react-native';
 import styles from './styles';
 import {RootStackParamList} from '../../navigation/type';
 import {NativeStackNavigationProp} from '@react-navigation/native-stack';
@@ -31,84 +31,86 @@ function SeeRequirementsScreen() {
         />
         <Text style={styles.appBarTitle}>Persyaratan dan Ketentuan</Text>
       </View>
-      <View style={styles.textContentContainer}>
+      <ScrollView>
-        <View style={styles.textContentWrapper}>
+        <View style={styles.textContentContainer}>
-          <Text style={styles.textContentStyle}>1.</Text>
-          <Text style={[styles.textContentStyle, {flex: 1}]}>
-            Pemohon wajib hadir 15 menit sebelum jam kedatangan dimulai;
-          </Text>
-        </View>
-        <View style={styles.textContentWrapper}>
-          <Text style={styles.textContentStyle}>2.</Text>
-          <Text style={[styles.textContentStyle, {flex: 1}]}>
-            Membawa dokumen persyaratan permohonan paspor asli sesuai tujuan
-            permohonan paspor;
-          </Text>
-        </View>
-        <View style={styles.textContentWrapper}>
-          <Text style={styles.textContentStyle}>3.</Text>
-          <Text style={[styles.textContentStyle, {flex: 1}]}>
-            Permohonan penggantian paspor wajib membawa paspor lama;
-          </Text>
-        </View>
-        <View style={styles.textContentWrapper}>
-          <Text style={styles.textContentStyle}>4.</Text>
-          <Text style={[styles.textContentStyle, {flex: 1}]}>
-            Apabila anda tidak hadir sesuai jadwal kedatangan dan tidak
-            melakukan ubah jadwal, maka permohonan paspor anda dibatalkan dan
-            harus melakukan pendaftaran ulang;
-          </Text>
-        </View>
-        <View style={styles.textContentWrapper}>
-          <Text style={styles.textContentStyle}>5.</Text>
-          <Text style={[styles.textContentStyle, {flex: 1}]}>
-            Permohonan paspor dapat ditolak dalam hal:
-          </Text>
-        </View>
-        <View style={styles.textContentAlphabetListContainer}>
           <View style={styles.textContentWrapper}>
-            <Text style={styles.textContentStyle}>a.</Text>
+            <Text style={styles.textContentStyle}>1.</Text>
             <Text style={[styles.textContentStyle, {flex: 1}]}>
-              Termasuk dalam daftar pencegahan dan penangkalan;
+              Pemohon wajib hadir 15 menit sebelum jam kedatangan dimulai;
             </Text>
           </View>
           <View style={styles.textContentWrapper}>
-            <Text style={styles.textContentStyle}>b.</Text>
+            <Text style={styles.textContentStyle}>2.</Text>
             <Text style={[styles.textContentStyle, {flex: 1}]}>
-              Terindikasi Pekerja Migran Indonesia (PMI) Non Prosedural;
+              Membawa dokumen persyaratan permohonan paspor asli sesuai tujuan
+              permohonan paspor;
             </Text>
           </View>
           <View style={styles.textContentWrapper}>
-            <Text style={styles.textContentStyle}>c.</Text>
+            <Text style={styles.textContentStyle}>3.</Text>
             <Text style={[styles.textContentStyle, {flex: 1}]}>
-              Memberikan data tidak sah dan/atau keterangan tidak benar;
+              Permohonan penggantian paspor wajib membawa paspor lama;
             </Text>
           </View>
           <View style={styles.textContentWrapper}>
-            <Text style={styles.textContentStyle}>d.</Text>
+            <Text style={styles.textContentStyle}>4.</Text>
             <Text style={[styles.textContentStyle, {flex: 1}]}>
-              Hal lain yang dianggap oleh petugas akan dipergunakan untuk tujuan
+              Apabila anda tidak hadir sesuai jadwal kedatangan dan tidak
-              melawan hukum;
+              melakukan ubah jadwal, maka permohonan paspor anda dibatalkan dan
+              harus melakukan pendaftaran ulang;
+            </Text>
+          </View>
+          <View style={styles.textContentWrapper}>
+            <Text style={styles.textContentStyle}>5.</Text>
+            <Text style={[styles.textContentStyle, {flex: 1}]}>
+              Permohonan paspor dapat ditolak dalam hal:
+            </Text>
+          </View>
+          <View style={styles.textContentAlphabetListContainer}>
+            <View style={styles.textContentWrapper}>
+              <Text style={styles.textContentStyle}>a.</Text>
+              <Text style={[styles.textContentStyle, {flex: 1}]}>
+                Termasuk dalam daftar pencegahan dan penangkalan;
+              </Text>
+            </View>
+            <View style={styles.textContentWrapper}>
+              <Text style={styles.textContentStyle}>b.</Text>
+              <Text style={[styles.textContentStyle, {flex: 1}]}>
+                Terindikasi Pekerja Migran Indonesia (PMI) Non Prosedural;
+              </Text>
+            </View>
+            <View style={styles.textContentWrapper}>
+              <Text style={styles.textContentStyle}>c.</Text>
+              <Text style={[styles.textContentStyle, {flex: 1}]}>
+                Memberikan data tidak sah dan/atau keterangan tidak benar;
+              </Text>
+            </View>
+            <View style={styles.textContentWrapper}>
+              <Text style={styles.textContentStyle}>d.</Text>
+              <Text style={[styles.textContentStyle, {flex: 1}]}>
+                Hal lain yang dianggap oleh petugas akan dipergunakan untuk
+                tujuan melawan hukum;
+              </Text>
+            </View>
+          </View>
+          <View style={styles.textContentWrapper}>
+            <Text style={styles.textContentStyle}>6.</Text>
+            <Text style={[styles.textContentStyle, {flex: 1}]}>
+              Apabila terdapat kesalahan dari pihak pemohon paspor sebagaimana
+              ketentuan di atas, pembayaran yang telah disetorkan pada Kas
+              Negara tidak dapat dikembalikan;
+            </Text>
+          </View>
+          <View style={styles.textContentWrapper}>
+            <Text style={styles.textContentStyle}>7.</Text>
+            <Text style={[styles.textContentStyle, {flex: 1}]}>
+              Dengan membaca dan menyetujui persyaratan dan ketentuan ini,
+              pemohon telah siap dan mematuhi segala konsekuensi yang berakibat
+              secara hukum.
             </Text>
           </View>
         </View>
-        <View style={styles.textContentWrapper}>
+      </ScrollView>
-          <Text style={styles.textContentStyle}>6.</Text>
-          <Text style={[styles.textContentStyle, {flex: 1}]}>
-            Apabila terdapat kesalahan dari pihak pemohon paspor sebagaimana
-            ketentuan di atas, pembayaran yang telah disetorkan pada Kas Negara
-            tidak dapat dikembalikan;
-          </Text>
-        </View>
-        <View style={styles.textContentWrapper}>
-          <Text style={styles.textContentStyle}>7.</Text>
-          <Text style={[styles.textContentStyle, {flex: 1}]}>
-            Dengan membaca dan menyetujui persyaratan dan ketentuan ini, pemohon
-            telah siap dan mematuhi segala konsekuensi yang berakibat secara
-            hukum.
-          </Text>
-        </View>
-      </View>
     </View>
   );
 }

src/screens/seeRequirements/styles.tsx

@@ -26,24 +26,25 @@ const styles = StyleSheet.create({
   textContentContainer: {
     marginTop: 4,
     marginHorizontal: 16,
+    marginBottom: 16,
     gap: 4,
   },
   textContentWrapper: {
     flexDirection: 'row',
-    gap: 6
+    gap: 6,
   },
   textContentStyle: {
     ...FontFamily.notoSansRegular,
     includeFontPadding: false,
     color: Colors.primary30.color,
     fontSize: 12,
-    lineHeight: 20,
+    lineHeight: 24,
     textAlign: 'justify',
   },
   textContentAlphabetListContainer: {
     marginStart: 16,
     gap: 4,
-  }
+  },
 });
 
 export default styles;