Міграція мобільного застосунку з Ionic на React Native
Ionic — це WebView, обгорнутий в нативну оболонку. React Native — нативні компоненти, керовані JavaScript. Різниця відчувається одразу: прокрутка, анімації, відзивчивість на касання. Користувачі на iOS це відчувають — Safari WKWebView та UIScrollView ведуть себе зовсім не так, як UITableView або UICollectionView під керуванням React Native.
Міграція потрібна тоді, коли WebView-підхід упирається в стелю: 60 FPS на складних екранах не тримається, нативні жести працюють неправильно, або App Store review відхиляє застосунок по 4.2 за «занадто схожий на веб-сайт» досвід.
Що змінюється принципово
Модель компонентів. У Ionic — Angular/React/Vue + Ionic Components (<ion-list>, <ion-card>, <ion-toolbar>), рендеринг в DOM через WKWebView. У React Native — View, Text, FlatList, ScrollView, які транслюються в нативні UIView, UILabel, UIScrollView. Для кожного Ionic-компонента потрібен React Native-аналог. Прямої конвертації немає.
Стилізація. Ionic використовує стандартний CSS з користувацькими CSS-змінними (--ion-color-primary). React Native — StyleSheet API без наслідування стилів, без псевдоелементів, без box-shadow (є elevation для Android та shadow* для iOS як різні властивості). Flexbox є в обох, але в RN він — єдина модель layout, та flexDirection за замовчуванням column, а не row.
Capacitor-плагіни → React Native модулі. Якщо проект використовує Capacitor (що імовірно для сучасних Ionic-застосунків): @capacitor/camera, @capacitor/filesystem, @capacitor/push-notifications — все замінюється React Native-аналогами: react-native-image-picker, react-native-fs, @react-native-firebase/messaging. Деякі плагіни вимагають нативного лінкування (pod install, gradle), що само по собі додає складності при першоначальній настройці.
Навігація. Ionic Router (Angular) або @ionic/react з IonRouterOutlet замінюється на react-navigation v6: Stack Navigator, Tab Navigator, Drawer Navigator. Концептуально подібно, синтаксично — зовсім інше.
Як будуємо процес
Інвентаризація функціональності. Список всіх екранів, Capacitor/Cordova-плагінів, користувацьких веб-компонентів. Для кожного плагіна — перевіряємо наявність активного RN-аналога, дату останнього релізу, кількість issues на GitHub. Заброшений плагін з 200 відкритими issues — попередження.
React Native без Expo або з Expo? Для більшості міграцій з Ionic рекомендуємо Expo з managed workflow — якщо проект не вимагає специфічних нативних модулів, яких немає в Expo SDK. Expo Go прискорює розробку, eas build спрощує CI/CD, expo-updates дає OTA-оновлення. Якщо потрібен bare workflow — настраюємо React Native CLI з нуля.
Типізація. Якщо Ionic-проект на TypeScript (а більшість Angular-проектів так і є) — переносимо кодову базу з типами. React Native добре працює з TypeScript: @types/react-native охопідує всі вбудовані компоненти. Бізнес-логіку, сервіси, інтерфейси даних можна переиспользувати майже без змін.
Спільний код. Якщо є веб-версія на Ionic — розглядаємо React Native Web або Expo для вебу, щоб переиспользувати компоненти. Але це ускладнює архітектуру: StyleSheet vs CSS, платформо-специфічні гілки через Platform.OS. Часто проще мати окремий веб-проект.
Типові грабли
KeyboardAvoidingView — це біль. На iOS behavior="padding" працює нормально, на Android поведінка інша. Доводиться комбінувати з KeyboardAwareScrollView із react-native-keyboard-aware-scroll-view. У Ionic ця проблема вирішувалась автоматично через браузерну поведінку.
StatusBar — напівпрозорість та колір. У Ionic це CSS. У RN — компонент StatusBar з barStyle, backgroundColor, translucent prop. На Android translucent StatusBar вимагає додаткових настроєнь в styles.xml.
Шрифти. У Ionic — Google Fonts через CSS @import, працює з коробки. У RN — шрифти потрібно додати в android/app/src/main/assets/fonts/ та Info.plist, та запустити npx react-native-asset або настроїти через react-native.config.js. Забутий крок — застосунок падає з помилкою Unrecognized font family.
Терміни
Проект на 15–25 екранів з типичним набором плагінів (камера, геолокація, push): 5–9 тижнів. Вартість розраховується після аудиту Ionic-застосунку та складання карти залежностей.