Ionic to Expo Migration
Convert Angular/Ionic/Capacitor projects to React Native/Expo.
Workflow
- Analyze - Read source TypeScript files, identify patterns
- Map - Match Ionic/Angular patterns to RN/Expo equivalents
- Convert - Generate equivalent React Native/Expo code
- Validate - Check for missing dependencies or incompatibilities
Conversion Process
When given Angular/Ionic source files:
-
Identify the file type:
.component.ts→ React functional component.service.ts→ Custom hook or context.page.ts→ Screen component.module.ts→ Usually not needed (note dependencies).guard.ts→ Navigation guard logic
-
Extract and convert:
- Template (
@Component.template) → JSX return statement - Styles (
@Component.styles) → StyleSheet or styled-components - Inputs (
@Input()) → Props - Outputs (
@Output()) → Callback props - Lifecycle hooks → useEffect patterns
- Template (
-
Reference the mapping guides:
- Components: See references/components.md
- Navigation: See references/navigation.md
- Native Plugins: See references/plugins.md
- State/Services: See references/state.md
Quick Reference
| Angular/Ionic | React Native/Expo |
|---|---|
@Component | Function component |
@Input() | Props |
@Output() | Callback props |
ngOnInit | useEffect(..., []) |
ngOnDestroy | useEffect cleanup |
ngOnChanges | useEffect with deps |
*ngIf | {condition && <Component/>} |
*ngFor | .map() |
[(ngModel)] | value + onChangeText |
[class.x]="cond" | Conditional styles |
(click) | onPress |
BehaviorSubject | useState or context |
Observable.pipe() | Custom hooks |
Output Format
When converting, provide:
- Converted code with equivalent functionality
- Required dependencies to install
- Migration notes for manual adjustments needed
- Type definitions if applicable
Anti-Patterns to Avoid
- Don't blindly translate class components; use hooks
- Don't create services as classes; use hooks/context
- Don't use
anytypes; preserve TypeScript safety - Don't ignore platform differences (iOS vs Android)