When Ionic stops being a solution
We often see apps that started with Ionic for rapid prototyping, but after six months hit a performance wall. Users complain about lag, App Store rejects releases under section 4.2 of the App Store Review Guidelines, and native gestures work inconsistently. That's when migration to React Native becomes not a whim but a necessity.
Why React Native is faster than Ionic
The difference lies in rendering: Ionic uses WKWebView — a browser inside the app. React Native translates components into real UIView and CALayer. For the user, this means smooth animations at 60 FPS vs janky 20–30 FPS. This is especially noticeable on complex lists with images and animations. We've measured it repeatedly: React Native provides up to 2x smoother scrolling.
| Criteria | Ionic (WebView) | React Native |
|---|---|---|
| Rendering | DOM via WKWebView | Native UIView/CALayer |
| Performance | 20–30 FPS on complex screens | 60 FPS stable |
| Gestures | Emulation via JS | Native UIGestureRecognizer |
| Bundle size | ~5–10 MB + WebView | ~2–4 MB (without Hermes) |
| API access | Via Capacitor/Cordova bridges | Direct access to native APIs |
How we replace Capacitor plugins
Each plugin from the Capacitor ecosystem requires a direct analog in React Native. For example:
-
@capacitor/camera→react-native-image-picker -
@capacitor/filesystem→react-native-fs -
@capacitor/push-notifications→@react-native-firebase/messaging
We verify each module's relevance: last release date, open issues count, support for new OS versions. If no suitable analog exists – we write a native module ourselves. In one project, we had to develop a barcode scanner wrapper because existing libraries didn't support the required format.
Migration process
- Inventory – collect full list of screens, plugins, custom components.
- Performance audit – measure FPS, load times, memory leaks in the current app.
- Architecture design – define navigation structure, state management (Redux Toolkit or Zustand), typization.
- Development – incremental recreation of screens, starting with key ones.
- Testing – on physical devices, automated UI tests (Detox).
- Deployment – publish to App Store and Google Play, configure CodePush for OTA updates.
What's included in the work
- Recreate UI in React Native following platform guidelines (Human Interface Guidelines, Material Design)
- Replace all Capacitor plugins
- Set up navigation (React Navigation v6)
- Transfer business logic and API clients
- Connect push notifications (APNs + FCM)
- Optimize animations and FlatList
- Document new architecture
- 2 months of support after release
Typical problems and their solutions
Transitioning from Ionic involves several technical challenges. For example, on iOS KeyboardAvoidingView with behavior="padding" works fine, but on Android it's different. We combine it with KeyboardAwareScrollView from react-native-keyboard-aware-scroll-view. In Ionic, this issue was handled automatically by the browser.
StatusBar configuration: in Ionic, color and translucency are set via CSS, while in React Native we use the StatusBar component with barStyle, backgroundColor, translucent props. On Android, translucent requires edits in styles.xml.
Fonts are a common cause of crashes. In Ionic, Google Fonts are loaded via CSS @import, while in React Native fonts are separate files in android/app/src/main/assets/fonts/ and in Info.plist. Run npx react-native-asset or configure react-native.config.js. A missed step — the app crashes with "Unrecognized font family". This is often where a free audit of the current code is needed.
Real case: 2x acceleration
One of our clients was a food delivery service with an Ionic app of 30 screens. Users complained about freezes when scrolling the menu. We conducted an audit: on the main screen with 50 items, FPS dropped to 15. After migrating to React Native, the same screen steadily held 60 FPS. Additionally, we replaced @capacitor/camera with react-native-vision-camera, speeding up receipt scanning by 40%. The entire process took 7 weeks, and after release, the app rating rose from 3.2 to 4.5. The average budget for such a project starts from 350,000 RUB, and support costs drop by up to 40%.
How key components compare
| Component/Function | Ionic (Capacitor) | React Native |
|---|---|---|
| Camera | @capacitor/camera | react-native-vision-camera |
| File system | @capacitor/filesystem | react-native-fs |
| Push notifications | @capacitor/push-notifications | @react-native-firebase/messaging |
| Geolocation | @capacitor/geolocation | @react-native-community/geolocation |
| Storage | @capacitor/storage | @react-native-async-storage/async-storage |
Timeline and budget
For an app with 15–25 screens and a typical set of plugins (camera, geolocation, push), the timeline is 5–9 weeks. Cost is determined after auditing the current code. The indicative range is from 300,000 to 700,000 RUB. Exact estimate after a free audit.
Contact us for a free audit of your Ionic app. We will analyze the code and propose a migration plan with transparent timelines. Get a consultation on migration – improve your app's performance.