Stack Navigator: apa itu, navigasi tumpukan di React Native

Apa itu Stack Navigator?

Stack Navigator — salah satu navigator dasar pustaka React Navigation yang mengimplementasikan model tumpukan layar. Ini menyediakan navigasi yang familiar bagi pengguna seluler: membuka layar baru disertai animasi masuk dari kanan, dan tombol «Kembali» atau gerakan gesek mengembalikan pengguna ke layar sebelumnya. Stack Navigator didukung di iOS dan Android, menggunakan komponen native platform untuk kinerja maksimal.

React Navigation adalah pustaka navigasi paling populer untuk React Native, terpasang di 85% proyek (menurut data npm, 2026). Stack Navigator adalah bagian dari intinya dan tersedia dalam dua implementasi: createNativeStackNavigator (native, direkomendasikan) dan createStackNavigator (JavaScript, untuk animasi kustom kompleks). Versi native muncul di React Navigation v5 dan menjadi standar di v6+.

Keunggulan utama Stack Navigator — perilaku alami yang dikenal oleh pengguna iOS dan Android. Di iOS, tumpukan direpresentasikan secara visual sebagai UINavigationController, di Android — sebagai FragmentManager dengan animasi slide. Pengembang tidak perlu mengimplementasikan logika tumpukan secara manual — navigator mengelola status layar, back stack, dan animasi secara otomatis.

Cara kerja navigasi tumpukan

Navigasi tumpukan didasarkan pada prinsip LIFO (Last In, First Out). Saat pengguna membuka layar baru, navigator menempatkannya di atas tumpukan. Saat menekan «Kembali», layar teratas dihapus dan pengguna melihat layar sebelumnya. Tumpukan dapat berisi jumlah layar berapa pun — batasannya hanya memori perangkat.

Setiap layar dalam tumpukan mempertahankan statusnya. Saat kembali ke layar sebelumnya, statusnya dipulihkan secara otomatis. Ini membedakan tumpukan dari jenis navigasi lainnya (Tab, Drawer), di mana layar dapat dibuat ulang. React Navigation mengelola status melalui mekanisme konteks navigasinya sendiri.

Gerakan gesek untuk kembali

Di iOS, Stack Navigator mendukung gerakan gesek dari tepi kiri layar untuk kembali — ini adalah perilaku standar iOS yang diharapkan pengguna. Di Android, gerakan ini dinonaktifkan secara default, tetapi dapat diaktifkan melalui opsi gestureEnabled. Di Native Stack, gerakan bekerja secara native, tanpa penundaan thread JavaScript.

Native Stack vs JS Stack

React Navigation menawarkan dua jenis Stack Navigator: Native Stack (createNativeStackNavigator) dan JS Stack (createStackNavigator). Perbedaan utama adalah tempat eksekusi animasi. Native Stack menggunakan driver animasi native iOS dan Android, sedangkan JS Stack bekerja melalui thread JavaScript React Native. Pilihan di antara keduanya tergantung pada kebutuhan kinerja dan kustomisasi.

Native Stack direkomendasikan untuk sebagian besar proyek. Ini memberikan animasi 60 FPS yang mulus tanpa memblokir thread JS, mendukung gerakan gesek sistem di iOS, dan menggunakan transisi native — slide di iOS, fade di Android. Namun, Native Stack terbatas dalam kustomisasi animasi: hanya tersedia serangkaian transisi yang telah ditentukan.

JS Stack memberikan kendali penuh atas animasi melalui cardStyleInterpolator. Pengembang dapat membuat animasi apa pun: penskalaan, rotasi, paralaks, kurva kustom. Kekurangannya — animasi berjalan di thread JS, yang dapat menyebabkan penurunan frame pada perangkat lemah dengan transisi kompleks. Untuk 70% proyek, Native Stack sudah lebih dari cukup.

// Native Stack — implementasi yang direkomendasikan
import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string; name: string };
  Settings: undefined;
};

const Stack = createNativeStackNavigator<RootStackParamList>();

function AppNavigator() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: true }}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
    </Stack.Navigator>
  );
}

Instalasi dan konfigurasi Stack Navigator

Untuk memulai dengan Stack Navigator, Anda perlu menginstal React Navigation dan dependensinya. Set minimum mencakup @react-navigation/native, @react-navigation/native-stack, dan react-native-screens. Setelah instalasi, aplikasi dibungkus dalam NavigationContainer — konteks yang menyediakan status navigasi ke semua komponen anak.

# Instalasi dependensi React Navigation
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

# Untuk iOS — instalasi pod
cd ios && pod install && cd ..

Setelah instalasi, dibuat Stack.Navigator dengan layar yang ditentukan di RootStackParamList. Setiap layar terhubung dengan komponen React melalui prop component. Navigator dapat menjadi root atau bersarang di navigator lain (Tab, Drawer). Untuk konfigurasi digunakan screenOptions — umum untuk semua layar atau individual untuk masing-masing.

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = {
  Home: undefined;
  Details: { itemId: number; title: string };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home"
        screenOptions={{
          headerStyle: { backgroundColor: '#6200ee' },
          headerTintColor: '#fff',
          gestureEnabled: true,
        }}>
        <Stack.Screen name="Home" component={HomeScreen}
          options={{ title: 'Beranda' }} />
        <Stack.Screen name="Details" component={DetailsScreen}
          options={({ route }) => ({ title: route.params.title })} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Parameter dan kustomisasi Stack Navigator

Stack Navigator menawarkan banyak opsi untuk menyesuaikan tampilan dan perilaku. Parameter utama diatur melalui screenOptions di tingkat Navigator atau options di tingkat Screen. Pengembang dapat mengonfigurasi judul, animasi transisi, gerakan gesek, gaya kartu, dan penggelapan latar belakang. Fleksibilitas pengaturan memungkinkan navigasi disesuaikan dengan sistem desain aplikasi.

Animasi kustom melalui cardStyleInterpolator

Untuk JS Stack, cardStyleInterpolator memungkinkan pembuatan animasi transisi arbitrer antar layar. Ini adalah alat yang kuat untuk mengimplementasikan efek visual unik: penskalaan, rotasi, paralaks, flip horizontal. Fungsi menerima nilai kemajuan animasi saat ini (current, next) dan mengembalikan gaya untuk elemen yang dianimasikan.

Pengetikan navigasi dengan TypeScript

Stack Navigator mendukung pengetikan lengkap melalui TypeScript. Untuk ini, RootStackParamList didefinisikan — tipe-objek di mana kuncinya adalah nama layar dan nilainya adalah tipe parameter. Setelah pengetikan, navigation.navigate dan route.params mendapatkan pelengkapan otomatis dan pemeriksaan tipe. Ini menghilangkan kesalahan pengiriman parameter pada tahap kompilasi.

type RootStackParamList = {
  Home: undefined;
  Product: { id: string; category: string };
  Checkout: { items: CartItem[]; total: number };
};

// Layar yang diketik
type ProductScreenProps = NativeStackScreenProps<RootStackParamList, 'Product'>;

function ProductScreen({ navigation, route }: ProductScreenProps) {
  const { id, category } = route.params;

  return (
    <View>
      <Text>Produk {id} — {category}</Text>
      <Button title="Ke keranjang"
        onPress={() => navigation.navigate('Checkout', {
          items: [{ id, quantity: 1 }],
          total: 99.99,
        })} />
    </View>
  );
}

Skenario lanjutan: jendela modal dan grup

Stack Navigator mendukung pengelompokan layar dan jendela modal. Grup (Screen Group) memungkinkan penerapan pengaturan umum ke beberapa layar tanpa duplikasi. Jendela modal diimplementasikan melalui stack presentation: 'modal' — layar terbuka dari bawah dengan penggelapan latar belakang, seperti modal sistem di iOS. Opsi ini hanya tersedia di Native Stack.

Untuk navigasi kompleks, Stack Navigator dapat bersarang di Tab Navigator atau Drawer Navigator. Misalnya, tab «Beranda» berisi tumpukan layarnya sendiri, dan tab «Profil» — miliknya sendiri. Komposisi navigator seperti ini adalah pendekatan standar untuk aplikasi produksi. Setiap tumpukan terisolasi: back stack di dalam tab tidak memengaruhi tab lainnya.

// Tumpukan bersarang di Tab Navigator
const HomeStack = createNativeStackNavigator<HomeStackParamList>();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Feed" component={FeedScreen} />
      <HomeStack.Screen name="PostDetail" component={PostDetailScreen}
        options={{ presentation: 'modal' }} />
    </HomeStack.Navigator>
  );
}

// Grup layar dengan opsi bersama
<Stack.Navigator>
  <Stack.Group screenOptions={{ headerShown: true }}>
    <Stack.Screen name="Main" component={MainScreen} />
    <Stack.Screen name="About" component={AboutScreen} />
  </Stack.Group>
  <Stack.Screen name="Auth" component={AuthScreen}
    options={{ presentation: 'modal', headerShown: false }} />
</Stack.Navigator>