# 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. - Published: 2026-09-03 - Updated: 2026-09-03 - Author: Anthony Fillion-Maillet - Reading time: 5 min --- 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: | Keterbatasan | Dampak | |------------|--------| | Dukungan library komunitas | Setiap library harus menyertakan file `Package.swift` | | Stabilitas command | Flag dan layout yang dihasilkan dapat berubah di 0.88+ | | Konfigurasi CI | Memerlukan langkah `npx react-native spm` sebelum build | | Dokumentasi | Sumber 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. ## 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/`. ```objective-c // AppDelegate.m // Before 0.87 - bare include #import #import #import // After 0.87 - namespaced include #import #import #import ``` 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. ```typescript // component-refs.tsx import { useRef } from 'react'; import { View, TextInput, ViewInstance, TextInputInstance } from 'react-native'; export function FormComponent() { // New dedicated ref types replace generic RefObject const containerRef = useRef(null); const inputRef = useRef(null); const focusInput = () => { // Type-safe method access inputRef.current?.focus(); }; return ( ); } ``` 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: ```json // tsconfig.json { "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. | Persyaratan | Versi | |-------------|-------| | Node.js | ≥ 22.13.0 | | Kotlin | ≥ 2.0 (bundled: 2.2.0) | | Android minCompileSdk | 34 | | Android compileSdk | 37 | | Android Gradle Plugin | 9.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 Dihapus | Pengganti | |-------------|----------| | `InteractionManager` | `requestIdleCallback` | | `Modal` animated prop | Gunakan default transition behavior | | `NativeMethods` type | `HostInstance` | | `useTurboModules` flag | Selalu aktif, flag dihapus | | `Touchable` root export | Extend `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](https://github.com/react-navigation/react-navigation/tree/main/packages/drawer)), 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](/technologies/react-native/interview-questions/rn-native-modules) dan bank pertanyaan [testing strategies](/technologies/react-native/interview-questions/rn-testing). ## Strategi Upgrade untuk Proyek React Native 0.87 [React Native Upgrade Helper](https://react-native-community.github.io/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](/blog/react-native/react-native-new-architecture-hermes-v1-bridgeless) yang mencakup karakteristik performa Hermes V1 dan bridgeless mode. --- Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack. HTML version of this page: https://sharpskill.dev/id/blog/react-native/react-native-087-swiftpm-ios-build-interview-questions