React Native 0.87 dan SwiftPM di Tahun 2026: Build iOS Modern dan Pertanyaan Wawancara

Panduan lengkap React Native 0.87 dengan dukungan Swift Package Manager untuk build iOS. Pelajari migrasi dari CocoaPods, Strict TypeScript API, dan pertanyaan wawancara teknis.

React Native 0.87 dan SwiftPM di Tahun 2026: Build iOS Modern dan Pertanyaan Wawancara

React Native 0.87, yang dirilis pada 11 Agustus 2026, membawa dukungan eksperimental Swift Package Manager (SwiftPM) untuk build iOS, menandai langkah pertama menuju penghapusan CocoaPods dari proyek React Native. Rilis ini juga menjadikan Strict TypeScript API sebagai default, menyertakan Metro 0.87 dengan generasi source map 2x lebih cepat, dan meningkatkan persyaratan toolchain minimum ke Node.js 22, Kotlin 2.0, dan Android compileSdk 37.

Setup SwiftPM dalam Satu Perintah

Setelah melakukan deintegrasi CocoaPods, jalankan npx react-native spm --deintegrate sekali. Proyek kemudian akan melakukan autolinking dependensi native pada setiap build tanpa perlu pod install.

Swift Package Manager Menggantikan CocoaPods untuk Dependensi iOS

Dukungan SwiftPM di React Native 0.87 bersifat opt-in dan eksperimental. CocoaPods tetap menjadi dependency manager default untuk aplikasi production. Jalur SwiftPM menggunakan XCFramework prebuilt yang sama dengan yang sudah dipublikasikan React Native, sehingga tidak diperlukan download binary tambahan.

Keuntungan utamanya: proyek berbasis SwiftPM hanya membutuhkan Xcode. Ruby, Bundler, dan CocoaPods tidak lagi diperlukan di mesin developer atau pipeline CI.

bash
# ios-swiftpm-setup.sh
# Step 1: Navigate to iOS directory
cd ios

# Step 2: Deintegrate CocoaPods and generate SwiftPM references
npx react-native spm --deintegrate

# Step 3: Open project in Xcode and build
open MyApp.xcworkspace

Perintah spm --deintegrate menginjeksi referensi Swift package ke dalam .xcodeproj yang sudah ada, bukan mengganti file proyek. Pengaturan code signing, build phases, dan capabilities tetap tidak berubah. Untuk membatalkan perubahan, jalankan npx react-native spm deinit.

Cara Kerja SwiftPM Autolinking Tanpa pod install

Setelah setup awal, perubahan dependensi memicu relinking otomatis. Install atau hapus native package dengan npm atau yarn, lalu build. Proyek mendeteksi perubahan dan menjalankan ulang autolinking selama fase build Xcode.

bash
# dependency-workflow.sh
# Install a native dependency
npm install react-native-reanimated

# Build triggers automatic relinking
npx react-native run-ios
# No pod install required

Untuk fresh clone dan environment CI, jalankan npx react-native spm sekali sebelum build pertama. Ini akan menghasilkan file Package.swift dan menyelesaikan dependensi Swift package.

Keterbatasan SwiftPM dan Kesiapan Production

Dukungan SwiftPM di versi 0.87 memiliki keterbatasan penting yang mempengaruhi keputusan adopsi:

KeterbatasanDampak
Dukungan library komunitasSetiap library harus menyertakan file Package.swift
Stabilitas commandFlag dan layout yang dihasilkan dapat berubah di 0.88+
Konfigurasi CIMemerlukan langkah npx react-native spm sebelum build
DokumentasiSumber daya troubleshooting terbatas

Untuk aplikasi production, CocoaPods tetap menjadi jalur yang direkomendasikan. Tim yang mengevaluasi SwiftPM harus membuat prototype di branch terpisah dan menguji seluruh dependency tree sebelum berkomitmen untuk migrasi.

Siap menguasai wawancara React Native Anda?

Berlatih dengan simulator interaktif, flashcards, dan tes teknis kami.

Breaking Change: Import Header iOS dengan Namespace

React Native 0.87 menyertakan XCFramework baru: ReactNativeHeaders.xcframework dan ReactNativeDependenciesHeaders.xcframework. Native module yang menggunakan angle include tanpa namespace harus menambahkan prefix React/.

AppDelegate.mobjective-c
// Before 0.87 - bare include
#import <RCTAppDelegate.h>
#import <RCTBridge.h>
#import <RCTRootView.h>

// After 0.87 - namespaced include
#import <React/RCTAppDelegate.h>
#import <React/RCTBridge.h>
#import <React/RCTRootView.h>

Perubahan ini berlaku untuk build CocoaPods maupun SwiftPM. Proyek dengan native module kustom perlu memperbarui semua header import sebelum melakukan upgrade.

Strict TypeScript API: Interface JavaScript Default yang Baru

Strict TypeScript API, yang diperkenalkan di versi 0.80, menjadi default di versi 0.87. Type sekarang dihasilkan langsung dari source code React Native, menghilangkan ketidaksesuaian antara definisi TypeScript dan perilaku runtime aktual.

component-refs.tsxtypescript
import { useRef } from 'react';
import { View, TextInput, ViewInstance, TextInputInstance } from 'react-native';

export function FormComponent() {
  // New dedicated ref types replace generic RefObject<T>
  const containerRef = useRef<ViewInstance>(null);
  const inputRef = useRef<TextInputInstance>(null);

  const focusInput = () => {
    // Type-safe method access
    inputRef.current?.focus();
  };

  return (
    <View ref={containerRef}>
      <TextInput ref={inputRef} placeholder="Email" />
    </View>
  );
}

Tiga perubahan type yang breaking memerlukan perhatian selama migrasi:

  1. Deep import diblokir: Path react-native/Libraries/* sekarang menghasilkan type error. Semua export harus berasal dari package root react-native.

  2. Update ref type: ViewInstance dan TextInputInstance menggantikan generic ref types. Type alias *Properties dihapus dan diganti dengan *Props.

  3. Perubahan useColorScheme: Mengembalikan ColorSchemeName | null alih-alih nilai string 'unspecified' sebelumnya.

Opt-Out dari Strict TypeScript Selama Migrasi

Tim yang membutuhkan waktu lebih untuk migrasi dapat mengembalikan legacy deep import hingga React Native 0.88:

tsconfig.jsonjson
{
  "extends": "@react-native/typescript-config",
  "compilerOptions": {
    "customConditions": ["react-native", "react-native-legacy-deep-imports"]
  }
}

Escape hatch ini akan dihapus di React Native 0.89. Proyek harus memprioritaskan migrasi sebelum rilis tersebut.

Metro 0.87: Source Map 2x Lebih Cepat dan Memori 50% Lebih Sedikit

Metro bundler versi 0.87 hadir dengan peningkatan performa signifikan yang mempengaruhi workflow development dan waktu startup React Native DevTools.

Generasi source map 2x lebih cepat berkat optimisasi penanganan string. DevTools sekarang memuat lebih cepat karena source map dihasilkan lebih efisien selama build development.

Penggunaan memori turun 50% melalui penyimpanan source map yang lebih efisien. Ini penting untuk codebase besar di mana Metro sebelumnya mengonsumsi RAM signifikan selama sesi development yang panjang.

Perubahan Metro tambahan:

  • Dukungan stabil untuk file konfigurasi TypeScript (metro.config.mts)
  • Dukungan file konfigurasi ESM bersama CommonJS
  • Package self-resolve di resolver
  • Penghapusan dukungan untuk ekstensi file .es6 dan file konfigurasi YAML

Persyaratan Toolchain Minimum untuk React Native 0.87

Rilis ini meningkatkan persyaratan versi minimum di seluruh toolchain. Pipeline CI dan environment developer perlu update sebelum melakukan upgrade.

PersyaratanVersi
Node.js≥ 22.13.0
Kotlin≥ 2.0 (bundled: 2.2.0)
Android minCompileSdk34
Android compileSdk37
Android Gradle Plugin9.x

Untuk masalah kompatibilitas AGP 9, tambahkan opt-out ke android/gradle.properties:

properties
# android/gradle.properties
# Temporary opt-outs for AGP 9 migration
android.builtInKotlin=false
android.newDsl=false

API yang Dihapus di React Native 0.87

Beberapa API deprecated dihapus di rilis ini. Proyek yang menggunakan API ini perlu refactoring sebelum upgrade.

API DihapusPengganti
InteractionManagerrequestIdleCallback
Modal animated propGunakan default transition behavior
NativeMethods typeHostInstance
useTurboModules flagSelalu aktif, flag dihapus
Touchable root exportExtend ViewProps langsung
react-native/rn-get-polyfills@react-native/js-polyfills

Deprecation tambahan yang ditargetkan untuk penghapusan di masa depan termasuk ImageBackground (gunakan View dengan Image yang diposisikan absolute), DrawerLayoutAndroid (gunakan react-native-drawer-layout), dan react-native/Libraries/Core/InitializeCore (gunakan react-native/setup-env).

Pertanyaan Wawancara React Native 0.87 untuk Developer Senior

Pertanyaan-pertanyaan ini muncul dalam wawancara mobile developer senior setelah rilis besar React Native. Memahami keputusan arsitektural di balik dukungan SwiftPM dan Strict TypeScript API menunjukkan pengetahuan tingkat framework.

Q: Mengapa React Native 0.87 memperkenalkan SwiftPM sebagai eksperimental daripada mengganti CocoaPods langsung?

Dukungan SwiftPM bergantung pada library komunitas yang menyertakan file Package.swift. Tidak seperti CocoaPods di mana registri Podspec terpusat ada, SwiftPM mengharuskan setiap author library menambahkan konfigurasi Swift package native. Fase eksperimental memungkinkan ekosistem mengadopsi SwiftPM secara bertahap sementara CocoaPods tetap stabil untuk aplikasi production. Selain itu, perintah CLI dan layout proyek yang dihasilkan dapat berubah berdasarkan feedback developer sebelum stabil.

Q: Masalah apa yang dipecahkan Strict TypeScript API yang tidak bisa dipecahkan oleh definisi type yang dipelihara manual?

Definisi type yang dipelihara manual dapat berbeda dari perilaku runtime antar rilis. Refactor internal yang mengubah function signature atau menambah parameter mungkin tidak langsung tercermin dalam type, menyebabkan crash runtime yang seharusnya ditangkap TypeScript. Strict API menghasilkan type langsung dari source code, membuat type menjadi otoritatif bukan aspirasional. Ini juga memblokir deep import yang mengakses API internal tidak stabil, mencegah kerusakan saat internal tersebut berubah.

Q: Bagaimana SwiftPM autolinking berbeda dari CocoaPods autolinking di React Native?

CocoaPods autolinking berjalan selama pod install, yang harus diingat developer untuk dijalankan setelah perubahan dependensi. SwiftPM autolinking berjalan selama fase build Xcode secara otomatis. Build system mendeteksi perubahan dependensi dan meregenerasi package manifest tanpa intervensi manual. Ini menghilangkan sumber umum masalah "works on my machine" di mana developer lupa menjalankan pod install setelah pulling perubahan.

Untuk persiapan wawancara React Native tambahan, lihat native modules deep dive dan bank pertanyaan testing strategies.

Siap menguasai wawancara React Native Anda?

Berlatih dengan simulator interaktif, flashcards, dan tes teknis kami.

Strategi Upgrade untuk Proyek React Native 0.87

React Native Upgrade Helper menghasilkan diff antara template proyek saat ini dan 0.87. Diff ini menunjukkan dengan tepat file mana yang perlu diubah.

Prioritaskan langkah migrasi berikut:

  1. Update Node.js ke 22.13.0+ dan verifikasi environment CI cocok
  2. Jalankan kompilasi TypeScript untuk mengidentifikasi pelanggaran deep import
  3. Update ref types dari generic ke dedicated instance types
  4. Update iOS header import ke format dengan namespace
  5. Uji seluruh native dependency tree sebelum mengaktifkan SwiftPM

Untuk proyek Expo, React Native 0.87 tersedia di rilis expo@canary. Proyek Expo production harus menunggu rilis SDK yang stabil.

Apa Arti Dukungan SwiftPM 0.87 untuk Waktu Build iOS

SwiftPM menghilangkan pod install dari workflow development, tetapi setup proyek awal memerlukan waktu lebih lama. Perintah npx react-native spm menyelesaikan Swift package dari source, yang memakan waktu lebih lama dibanding download binary CocoaPods yang sudah di-prebuilt.

Build selanjutnya mendapat manfaat dari resolusi package incremental Xcode. Hanya package yang berubah yang akan diambil ulang. Untuk tim dengan churn dependensi yang sering, pendekatan incremental ini mungkin lebih cepat daripada siklus pod install berulang.

Optimasi CI berbeda antara kedua pendekatan. CocoaPods meng-cache direktori Pods/ secara efektif. SwiftPM meng-cache melalui derived data Xcode, yang memerlukan strategi cache key berbeda. Tim yang memigrasi pipeline CI harus melakukan benchmark kedua pendekatan dengan set dependensi spesifik mereka.

Untuk teknik optimasi build iOS terkait, lihat panduan React Native New Architecture yang mencakup karakteristik performa Hermes V1 dan bridgeless mode.

Mulai berlatih!

Uji pengetahuan Anda dengan simulator wawancara dan tes teknis kami.

Tantangan harian

Bisakah kamu menemukan bug di React Native?

Satu potongan kode nyata, satu bug tersembunyi, satu percobaan per hari. Tanpa akun untuk mencoba.

Anthony Fillion-Maillet

Ditulis oleh

Anthony Fillion-Maillet

Pendiri SharpSkill

Developer fullstack selama lebih dari 10 tahun. Ia menjalankan SharpSkill dan bertanggung jawab atas semua yang diterbitkan di sini.

Diperbarui 3 September 2026

Bagikan

Artikel terkait