cross-platform
Purpose
This skill guides the selection and implementation of cross-platform mobile frameworks like React Native with Expo, Flutter with Dart (using Bloc or Riverpod), Capacitor, and Kotlin Multiplatform Mobile (KMM). It focuses on choosing the right framework based on project needs and provides step-by-step integration for efficient mobile app development.
When to Use
Use this skill for projects requiring multi-platform deployment (iOS/Android) to reduce code duplication. Apply it when building apps with shared business logic, such as e-commerce apps, social networks, or productivity tools. Ideal for teams with limited resources or when rapid prototyping is needed, like integrating native modules or handling state management across platforms.
Key Capabilities
- Framework selection: Choose React Native for JavaScript-heavy apps, Flutter for custom UI with Dart, Capacitor for web-to-mobile conversion, or KMM for shared Kotlin codebases.
- Expo integration: Use EAS (Expo Application Services) for streamlined builds, including OTA updates and cloud services.
- State management: Implement Bloc for event-driven state in Flutter or Riverpod for reactive state in Flutter/Dart apps.
- Cross-platform features: Handle platform-specific code, like accessing device APIs (e.g., camera, GPS) via Capacitor's bridge or KMM's expect/actual declarations.
- Configuration: Manage app configs in JSON/YAML formats, such as Expo's app.json for routing and permissions.
Usage Patterns
To select a framework, evaluate based on tech stack: use React Native if the team knows JS; Flutter for high-performance UIs. Start by initializing a project:
- For React Native with Expo: Run
expo init MyApp --template blank then add dependencies with npm install @react-navigation/native.
- For Flutter with Riverpod: Create a project with
flutter create MyApp and set up state: final counterProvider = StateProvider((ref) => 0); in a Dart file.
Always wrap platform-specific code: In KMM, use expect fun platformFunction() {} in common code and implement in iOS/Android modules.
For Capacitor, convert a web app by running npx cap add android after setting up a web project.
Common Commands/API
- Expo (React Native): Use
expo login (requires $EXPO_API_KEY env var), eas build --platform all for multi-platform builds, and API endpoint POST https://api.expo.dev/v2/projects for project management.
- Flutter: Run
flutter pub add flutter_bloc for Bloc, or flutter run --device-id emulator-5554 to target a specific emulator; access APIs like BlocProvider.of(context).add(Event()) for state changes.
- Capacitor: Execute
npx cap sync to update native projects, or npx cap open android to launch Android Studio; use Capacitor's Plugins API, e.g., Capacitor.Plugins.Camera.getPhoto() in JavaScript.
- KMM: Build with
./gradlew build in the shared module, and use KMM Bridge for iOS: import shared.Platform().hello() in Swift.
Config formats: Edit Expo's app.json like { "expo": { "name": "MyApp", "slug": "myapp", "platforms": ["ios", "android"] } }; for Flutter, modify pubspec.yaml with dependencies: flutter_riverpod: ^2.0.0.
Integration Notes
Integrate these frameworks with backends by setting environment variables for auth, e.g., export $BACKEND_API_KEY for API calls. For React Native, use Expo's Fetch API: fetch('https://api.example.com/data', { headers: { Authorization: Bearer ${process.env.BACKEND_API_KEY} } }). In Flutter, add HTTP packages: http.get(Uri.parse('https://api.example.com/data'), headers: {'Authorization': 'Bearer $envVar'}).then((response) => ...);. For Capacitor, bridge web requests: Install @capacitor/core and use CapacitorHttp.get({url: 'https://api.example.com/data', headers: {Authorization: $BACKEND_API_KEY}});. KMM integration: Share networking code via common module and call from native apps, ensuring Gradle sync for dependencies.
Error Handling
Handle common errors by checking for platform mismatches: In React Native, if expo build fails with "Invalid platform", verify app.json platforms array. For Flutter, if flutter run errors on "No devices", use flutter emulators --launch Pixel_API_33 then retry. Capacitor errors like "Plugin not found" require npx cap sync and verifying package.json. In KMM, resolve build failures with ./gradlew clean for corrupted caches. Always log errors: In Expo, use console.error(e) and check EAS build logs; in Flutter, wrap with try-catch: try { await http.get(...); } catch (e) { print(e.toString()); }. Use env vars for secure keys to avoid exposure.
Graph Relationships
- Connected to: mobile cluster
- Relates to: react-native skill, flutter skill, expo skill, capacitor skill
- Depends on: cross-platform tags for embedding
- Interacts with: kmm framework in mobile ecosystem
1---2name: cross-platform3description: React Native+Expo (EAS), Flutter/Dart (Bloc/Riverpod), Capacitor, KMM — framework selection4---5
6# cross-platform
7
8## Purpose
9This skill guides the selection and implementation of cross-platform mobile frameworks like React Native with Expo, Flutter with Dart (using Bloc or Riverpod), Capacitor, and Kotlin Multiplatform Mobile (KMM). It focuses on choosing the right framework based on project needs and provides step-by-step integration for efficient mobile app development.
10
11## When to Use
12Use this skill for projects requiring multi-platform deployment (iOS/Android) to reduce code duplication. Apply it when building apps with shared business logic, such as e-commerce apps, social networks, or productivity tools. Ideal for teams with limited resources or when rapid prototyping is needed, like integrating native modules or handling state management across platforms.
13
14## Key Capabilities
15- Framework selection: Choose React Native for JavaScript-heavy apps, Flutter for custom UI with Dart, Capacitor for web-to-mobile conversion, or KMM for shared Kotlin codebases.
16- Expo integration: Use EAS (Expo Application Services) for streamlined builds, including OTA updates and cloud services.
17- State management: Implement Bloc for event-driven state in Flutter or Riverpod for reactive state in Flutter/Dart apps.
18- Cross-platform features: Handle platform-specific code, like accessing device APIs (e.g., camera, GPS) via Capacitor's bridge or KMM's expect/actual declarations.
19- Configuration: Manage app configs in JSON/YAML formats, such as Expo's app.json for routing and permissions.
20
21## Usage Patterns
22To select a framework, evaluate based on tech stack: use React Native if the team knows JS; Flutter for high-performance UIs. Start by initializing a project:
23- For React Native with Expo: Run `expo init MyApp --template blank` then add dependencies with `npm install @react-navigation/native`.
24- For Flutter with Riverpod: Create a project with `flutter create MyApp` and set up state: `final counterProvider = StateProvider((ref) => 0);` in a Dart file.
25Always wrap platform-specific code: In KMM, use `expect fun platformFunction() {}` in common code and implement in iOS/Android modules.
26For Capacitor, convert a web app by running `npx cap add android` after setting up a web project.
27
28## Common Commands/API
29- Expo (React Native): Use `expo login` (requires $EXPO_API_KEY env var), `eas build --platform all` for multi-platform builds, and API endpoint `POST https://api.expo.dev/v2/projects` for project management.
30- Flutter: Run `flutter pub add flutter_bloc` for Bloc, or `flutter run --device-id emulator-5554` to target a specific emulator; access APIs like `BlocProvider.of(context).add(Event())` for state changes.
31- Capacitor: Execute `npx cap sync` to update native projects, or `npx cap open android` to launch Android Studio; use Capacitor's Plugins API, e.g., `Capacitor.Plugins.Camera.getPhoto()` in JavaScript.
32- KMM: Build with `./gradlew build` in the shared module, and use KMM Bridge for iOS: `import shared.Platform().hello()` in Swift.
33Config formats: Edit Expo's app.json like `{ "expo": { "name": "MyApp", "slug": "myapp", "platforms": ["ios", "android"] } }`; for Flutter, modify pubspec.yaml with `dependencies: flutter_riverpod: ^2.0.0`.
34
35## Integration Notes
36Integrate these frameworks with backends by setting environment variables for auth, e.g., export $BACKEND_API_KEY for API calls. For React Native, use Expo's Fetch API: `fetch('https://api.example.com/data', { headers: { Authorization: `Bearer ${process.env.BACKEND_API_KEY}` } })`. In Flutter, add HTTP packages: `http.get(Uri.parse('https://api.example.com/data'), headers: {'Authorization': 'Bearer $envVar'}).then((response) => ...);`. For Capacitor, bridge web requests: Install `@capacitor/core` and use `CapacitorHttp.get({url: 'https://api.example.com/data', headers: {Authorization: $BACKEND_API_KEY}});`. KMM integration: Share networking code via common module and call from native apps, ensuring Gradle sync for dependencies.
37
38## Error Handling
39Handle common errors by checking for platform mismatches: In React Native, if `expo build` fails with "Invalid platform", verify app.json platforms array. For Flutter, if `flutter run` errors on "No devices", use `flutter emulators --launch Pixel_API_33` then retry. Capacitor errors like "Plugin not found" require `npx cap sync` and verifying package.json. In KMM, resolve build failures with `./gradlew clean` for corrupted caches. Always log errors: In Expo, use `console.error(e)` and check EAS build logs; in Flutter, wrap with try-catch: `try { await http.get(...); } catch (e) { print(e.toString()); }`. Use env vars for secure keys to avoid exposure.
40
41## Graph Relationships
42- Connected to: mobile cluster
43- Relates to: react-native skill, flutter skill, expo skill, capacitor skill
44- Depends on: cross-platform tags for embedding
45- Interacts with: kmm framework in mobile ecosystem
majiayu000