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

cross-platform

NPX Install

Tags

SKILL.md Content

cross-platform

Purpose

When to Use

Key Capabilities

Usage Patterns

Common Commands/API

Integration Notes

Error Handling

Graph Relationships