ionic-to-expo

A skill for converting Angular/Ionic/Capacitor mobile apps to React Native/Expo.

Installation

npx skills add https://github.com/patrickghidossi/ionic-to-expo --agent claude-code -y

What It Does

This skill helps AI agents convert TypeScript code from Ionic/Angular projects to React Native/Expo equivalents. It provides comprehensive mapping guides for:

• Components — Ionic UI components to React Native equivalents
• Navigation — Ionic routing to React Navigation
• Native Plugins — Capacitor plugins to Expo modules
• State Management — Angular services and RxJS to React hooks and context

Usage

Once installed, the skill activates when you ask Claude to:

• Convert Ionic components to React Native
• Migrate an Angular/Ionic app to Expo
• Map Capacitor plugins to Expo equivalents
• Translate RxJS/Services patterns to React hooks

Example

"Convert this Ionic page component to React Native"

Claude will analyze your Angular/Ionic code and generate equivalent React Native/Expo code with:

• Converted components using React Native primitives
• Custom hooks replacing Angular services
• Proper TypeScript types preserved
• Required dependencies listed

Coverage

Ionic/Angular	React Native/Expo
@Component	Function component
@Input() / @Output()	Props / Callbacks
ngOnInit / ngOnDestroy	useEffect
*ngIf / *ngFor	Conditional / .map()
BehaviorSubject	useState / Context
ion-content	ScrollView / View
ion-list / ion-item	FlatList / Pressable
Capacitor plugins	Expo modules
Ionic routing	React Navigation

References

The skill includes detailed mapping guides:

• references/components.md — UI component mappings
• references/navigation.md — Routing and navigation patterns
• references/plugins.md — Native plugin equivalents
• references/state.md — State management patterns

License

MIT