Mobile App Migration from Ionic to React Native
Ionic — WebView wrapped in native shell. React Native — native components managed by JavaScript. Difference felt immediately: scrolling, animations, touch responsiveness. iOS users feel this — Safari WKWebView and UIScrollView behave completely different from UITableView or UICollectionView under React Native management.
Migration needed when WebView approach hits ceiling: 60 FPS on complex screens doesn't hold, native gestures work incorrectly, or App Store review rejects app by 4.2 for «too similar to website» experience.
What changes fundamentally
Component model. In Ionic — Angular/React/Vue + Ionic Components (<ion-list>, <ion-card>, <ion-toolbar>), rendering in DOM through WKWebView. In React Native — View, Text, FlatList, ScrollView, translating to native UIView, UILabel, UIScrollView. For each Ionic component need React Native analog. No direct conversion.
Styling. Ionic uses standard CSS with custom CSS variables (--ion-color-primary). React Native — StyleSheet API without style inheritance, without pseudo-elements, without box-shadow (has elevation for Android and shadow* for iOS as different properties). Flexbox in both, but in RN it's only layout model, and flexDirection default column, not row.
Capacitor plugins → React Native modules. If project uses Capacitor (likely for modern Ionic apps): @capacitor/camera, @capacitor/filesystem, @capacitor/push-notifications — all replaced with React Native analogs: react-native-image-picker, react-native-fs, @react-native-firebase/messaging. Some plugins require native linking (pod install, gradle), adding complexity on initial setup.
Navigation. Ionic Router (Angular) or @ionic/react with IonRouterOutlet replaced with react-navigation v6: Stack Navigator, Tab Navigator, Drawer Navigator. Conceptually similar, syntactically — completely different.
How we build the process
Functionality inventory. List all screens, Capacitor/Cordova plugins, custom web components. For each plugin — check for active RN analog, last release date, GitHub issues count. Abandoned plugin with 200 open issues — warning sign.
React Native with or without Expo? For most Ionic migrations recommend Expo with managed workflow — if project doesn't require specific native modules missing from Expo SDK. Expo Go speeds development, eas build simplifies CI/CD, expo-updates gives OTA updates. If bare workflow needed — set up React Native CLI from scratch.
Typing. If Ionic project in TypeScript (most Angular projects are) — transfer code base with types. React Native works well with TypeScript: @types/react-native covers all built-in components. Business logic, services, data interfaces reusable almost without changes.
Shared code. If web version on Ionic exists — consider React Native Web or Expo for web to reuse components. But this complicates architecture: StyleSheet vs CSS, platform-specific branches via Platform.OS. Often simpler to have separate web project.
Typical gotchas
KeyboardAvoidingView — pain. On iOS behavior="padding" works fine, on Android behavior different. Must combine with KeyboardAwareScrollView from react-native-keyboard-aware-scroll-view. In Ionic this solved automatically through browser behavior.
StatusBar — translucence and color. In Ionic CSS. In RN — StatusBar component with barStyle, backgroundColor, translucent prop. On Android translucent StatusBar requires extra styles.xml setup.
Fonts. In Ionic — Google Fonts via CSS @import, works out of box. In RN — fonts must be added to android/app/src/main/assets/fonts/ and Info.plist, and run npx react-native-asset or configure via react-native.config.js. Forgotten step — app crashes with Unrecognized font family error.
Timelines
Project with 15–25 screens with typical plugin set (camera, geolocation, push): 5–9 weeks. Cost calculated after Ionic app audit and dependency map compilation.