Tujuan Pembelajaran

Mampu passing dan menerima params antar screen
Memahami initial params dan default values
Mengerti conditional rendering berdasarkan route params

Analogi

Diagram


      Params = Isi Amplop:
Screen A: "Ini amplop, isinya id=123" → push
Screen B: terima amplop, buka, baca id=123

route.params = cara Screen B baca isi amplop
initialParams = isi default kalau amplop kosong

Params seperti isi amplop — screen pengirim memasukkan data, screen penerima membuka dan membaca route.params.

Penjelasan Konsep

Params adalah cara melempar data antar screen. Di Stack Navigator, params diteruskan lewat navigation.navigate() dan diterima via route.params.

Passing: navigation.navigate('ScreenName', { id: '123', title: 'Hello' }). Menerima: route.params.id, route.params.title. Gunakan destructuring dengan type safety.

TypeScript: definisikan type params di ParamList. Screen component menerima props NativeStackScreenProps<ParamList, 'ScreenName'>. Autocomplete params lengkap.

Initial params: initialParams di Stack.Screen options. Berguna untuk default values sebelum params diterima dari navigasi. options={{ initialParams: { id: '' } }}.

route.params bisa undefined saat screen pertama kali dirender — gunakan optional chaining atau default value: const id = route.params?.id ?? ''.

Updating params: navigation.setParams({ title: 'Updated' }) untuk update params screen saat ini tanpa re-navigate. Berguna untuk update header title dinamis.

Common pattern: passing ID ke detail screen → fetch data berdasarkan ID. Passing callback tidak disarankan — params harus serializable (string, number, boolean, object). Gunakan state management library (Zustand, Context) untuk data kompleks.

Inti yang Perlu Dipahami

Bagian ini berfokus pada mampu passing dan menerima params antar screen., memahami initial params dan default values., dan mengerti conditional rendering berdasarkan route params. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Passing Params Antar Screen, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Params seperti isi amplop — screen pengirim memasukkan data, screen penerima membuka dan membaca route.params. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa tsx. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. navigation.navigate dengan params typed. route.params dengan destructuring. Type safety menjamin kamu tidak typo nama params.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

tsx

type StackParamList = { List: undefined; Detail: { id: string; title: string } };
const Stack = createNativeStackNavigator<StackParamList>();

type ListProps = NativeStackScreenProps<StackParamList, "List">;
function ListScreen({ navigation }: ListProps) {
  return (
    <Pressable onPress={() => navigation.navigate("Detail", { id: "42", title: "Item 42" })}>
      <Text>Go to Item 42</Text>
    </Pressable>
  );
}

type DetailProps = NativeStackScreenProps<StackParamList, "Detail">;
function DetailScreen({ route }: DetailProps) {
  const { id, title } = route.params;
  return <Text>Detail: {title} (ID: {id})</Text>;
}

Penjelasan Kode

navigation.navigate dengan params typed. route.params dengan destructuring. Type safety menjamin kamu tidak typo nama params.

Prompt AI

Buat mekanisme passing complex params: dari ProductListScreen → ProductDetailScreen, params berisi: id, title, price, imageUrl, category. Backend fetch berdasarkan id. Tulis dengan TypeScript.

Pertanyaan Reflektif

Apa batasan passing params via route dibandingkan global state management? Kapan sebaiknya menggunakan route params vs global state?