██FR█████ █INTELL███████████

05. Mengenal Fungsi Dasar Interaksi dan Struktur Antarmuka di React Native


This content originally appeared on DEV Community and was authored by sandatya widhi


# Pengenalan Fungsi Dasar Interaksi & Struktur Antarmuka di React Native


Pada materi kali ini, kita akan belajar **cara membuat antarmuka dan interaksi dasar di React Native**, meliputi:

1. Fungsi dasar interaksi React Native (`TextInput`, `ScrollView`, `ListView`)
2. Struktur pembangun antarmuka React Native
3. Membuat layout antarmuka sederhana

---

## 1. Fungsi Dasar Interaksi React Native

React Native menyediakan berbagai komponen bawaan untuk berinteraksi dengan pengguna.  
Tiga komponen dasar yang paling sering digunakan adalah:

### a. TextInput
Digunakan untuk menerima **input teks dari pengguna**, seperti form login, komentar, atau pencarian.

Contoh:
```


import React, { useState } from "react";
import { View, Text, TextInput } from "react-native";

export default function TextInputExample() {
  const [nama, setNama] = useState("");

  return (
    <View style={{ padding: 20 }}>
      <Text>Masukkan Nama Anda:</Text>
      <TextInput
        style={{
          borderWidth: 1,
          borderColor: "#ccc",
          borderRadius: 5,
          padding: 10,
          marginTop: 10,
        }}
        placeholder="Ketik di sini..."
        onChangeText={(text) => setNama(text)}
      />
      <Text style={{ marginTop: 10 }}>Halo, {nama}!</Text>
    </View>
  );
}

Penjelasan:

  • TextInput menerima teks dari pengguna.
  • onChangeText digunakan untuk menangkap nilai input.
  • useState menyimpan teks yang dimasukkan.

b. ScrollView

Digunakan untuk menggulung (scroll) tampilan secara vertikal atau horizontal.
Sangat berguna jika konten di layar cukup panjang.

Contoh:



import React from "react";
import { ScrollView, Text } from "react-native";

export default function ScrollViewExample() {
  return (
    <ScrollView style={{ padding: 20 }}>
      {[...Array(20)].map((_, i) => (
        <Text key={i} style={{ marginVertical: 10 }}>
          Ini item ke-{i + 1}
        </Text>
      ))}
    </ScrollView>
  );
}

Penjelasan:

  • ScrollView menampung elemen yang panjang.
  • Gunakan map() untuk menampilkan banyak teks dalam satu tampilan.

c. ListView (FlatList)

FlatList digunakan untuk menampilkan daftar data (list) secara efisien.
Ini adalah versi modern dari ListView.

Contoh:



import React from "react";
import { View, Text, FlatList } from "react-native";

const dataMahasiswa = [
  { id: "1", nama: "Dita" },
  { id: "2", nama: "Andi" },
  { id: "3", nama: "Rina" },
];

export default function FlatListExample() {
  return (
    <FlatList
      data={dataMahasiswa}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View
          style={{
            padding: 15,
            borderBottomWidth: 1,
            borderBottomColor: "#ddd",
          }}
        >
          <Text>{item.nama}</Text>
        </View>
      )}
    />
  );
}

Penjelasan:

  • data berisi array daftar data.
  • renderItem digunakan untuk menampilkan setiap item dalam daftar.
  • keyExtractor memberikan ID unik untuk setiap elemen.

2. Struktur Pembangun Antarmuka di React Native

Aplikasi React Native disusun menggunakan komponen.
Komponen-komponen ini bisa dibayangkan seperti “kepingan Lego” yang disusun menjadi satu tampilan.

Struktur dasarnya terdiri dari:

Komponen Fungsi Contoh
View Wadah utama atau kontainer <View>...</View>
Text Menampilkan teks <Text>Halo Dunia</Text>
Image Menampilkan gambar <Image source={...} />
Button Tombol interaksi <Button title="Klik" />
TextInput Input teks dari pengguna <TextInput />

Contoh struktur dasar:



import React from "react";
import { View, Text, Button } from "react-native";

export default function StrukturDasar() {
  return (
    <View style={{ padding: 20 }}>
      <Text>Halo, ini struktur antarmuka dasar React Native!</Text>
      <Button title="Klik Saya" onPress={() => alert("Tombol diklik!")} />
    </View>
  );
}

3. Membuat Layout Antarmuka Sederhana

Untuk mengatur tata letak antarmuka, React Native menggunakan sistem Flexbox — sama seperti di CSS.
Dengan Flexbox, kita bisa mengatur arah, posisi, dan ukuran elemen dengan mudah.

Contoh Layout Sederhana:



import React from "react";
import { View, Text, StyleSheet } from "react-native";

export default function LayoutSederhana() {
  return (
    <View style={styles.container}>
      <View style={styles.box1}>
        <Text>Header</Text>
      </View>
      <View style={styles.box2}>
        <Text>Konten Utama</Text>
      </View>
      <View style={styles.box3}>
        <Text>Footer</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
  },
  box1: {
    flex: 1,
    backgroundColor: "#FFD700",
    justifyContent: "center",
    alignItems: "center",
  },
  box2: {
    flex: 3,
    backgroundColor: "#ADD8E6",
    justifyContent: "center",
    alignItems: "center",
  },
  box3: {
    flex: 1,
    backgroundColor: "#90EE90",
    justifyContent: "center",
    alignItems: "center",
  },
});

Penjelasan:

  • flex: 1 artinya ruang dibagi proporsional berdasarkan nilai flex.
  • justifyContent dan alignItems digunakan untuk mengatur posisi elemen.
  • StyleSheet.create() digunakan untuk membuat style terpisah agar kode rapi.

Kesimpulan

Konsep Fungsi Komponen
TextInput Menerima input teks dari pengguna TextInput
ScrollView Menampilkan konten panjang yang bisa digulung ScrollView
ListView / FlatList Menampilkan daftar data secara efisien FlatList
View, Text, Image Penyusun utama antarmuka –
Flexbox Mengatur layout dan posisi elemen flex, justifyContent, alignItems


This content originally appeared on DEV Community and was authored by sandatya widhi