Миграция мобильного приложения с 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 modules. Если проект использует 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 component с 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-приложения и составления карты зависимостей.