Skip to main content
mobile-app Mobile app development guide — React Native, Flutter, Expo for cross-platform.
Triggers: mobile app, React Native, Flutter, Expo, iOS, Android
Ir para a instalação Skills Marketplace Descubra e explore skills de IA criadas pela comunidade.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Mostrar detalhes do prompt Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
npx skills add https://github.com/popup-studio-ai/bkit-claude-code --skill mobile-appO comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.
Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.
Baixar Zip Baixando... Mais deste repositório bkend.ai authentication — email/social login, JWT tokens, RBAC, session management.
Triggers: bkend auth, bkend login, bkend signup, bkend JWT, bkend RBAC
bkend.ai project tutorials (todo to SaaS) and common error troubleshooting.
Triggers: bkend tutorial, bkend cookbook, bkend troubleshooting
bkend.ai database — CRUD, column types, filtering, sorting, relations, indexing.
Triggers: bkend table, bkend CRUD, bkend column, bkend relation, bkend data
name mobile-app classification capability classification-reason Specialized domain knowledge with limited model overlap deprecation-risk low effort low description Mobile app development guide — React Native, Flutter, Expo for cross-platform.
Triggers: mobile app, React Native, Flutter, Expo, iOS, Android
agent bkit:pipeline-guide allowed-tools ["Read","Write","Edit","Glob","Grep","Bash","WebSearch"] user-invocable true
Mobile App Development Expertise
Overview
A guide for developing mobile apps based on web development experience.
Develop for iOS and Android simultaneously using cross-platform frameworks.
Framework Selection Guide
Framework Selection by Tier (v1.3.0)
Framework Tier Recommendation Use Case React Native (Expo) Tier 1 ⭐ Primary TypeScript ecosystem, AI tools React Native CLI Tier 1 Recommended Native module needs Flutter Tier 2 Supported Multi-platform (6 OS), performance
AI-Native Recommendation : React Native with TypeScript
Full Copilot/Claude support
Extensive npm ecosystem
20:1 developer availability vs Dart
Performance Recommendation : Flutter
Impeller rendering engine
Single codebase for 6 platforms
Smaller bundles
Level-wise Recommendations
Starter → Expo (React Native) [Tier 1]
- Simple setup, can leverage web knowledge
- Full AI tool support
Dynamic → Expo + EAS Build [Tier 1] or Flutter [Tier 2]
- Includes server integration, production build support
- Choose Flutter for multi-platform needs
Enterprise → React Native CLI [Tier 1] or Flutter [Tier 2]
- Complex native features, performance optimization needed
- Flutter for consistent cross-platform UI
Expo (React Native) Guide
Project Creation
npm install -g expo-cli
npx create-expo-app my-app
cd my-app
npx expo start
Folder Structure
my-app/
├── app/ # Expo Router pages
│ ├── (tabs)/ # Tab navigation
│ │ ├── index.tsx # Home tab
│ │ ├── explore.tsx # Explore tab
│ │ └── _layout.tsx # Tab layout
│ ├── _layout.tsx # Root layout
│ └── +not-found.tsx # 404 page
├── components/ # Reusable components
├── hooks/ # Custom hooks
├── constants/ # Constants
├── assets/ # Images, fonts, etc.
├── app.json # Expo configuration
└── package.json
Navigation Patterns
import { Stack } from 'expo-router' ;
export default function RootLayout (return (
<Stack >
<Stack.Screen name ="(tabs)" options ={{ headerShown: false }} />
<Stack.Screen name ="modal" options ={{ presentation: 'modal ' }} />
</Stack >
import { Tabs } from 'expo-router' ;
import { Ionicons } from '@expo/vector-icons' ;
export default function TabLayout (return (
<Tabs >
<Tabs.Screen
name ="index"
options ={{
title: 'Home ',
tabBarIcon: ({ color }) => <Ionicons name ="home" color ={color} size ={24} /> ,
}}
/>
<Tabs.Screen
name ="profile"
options ={{
title: 'Profile ',
tabBarIcon: ({ color }) => <Ionicons name ="person" color ={color} size ={24} /> ,
}}
/>
</Tabs >
Styling Patterns
import { StyleSheet , View , Text } from 'react-native' ;
export function MyComponent (return (
<View style ={styles.container} >
<Text style ={styles.title} > Hello</Text >
</View > const styles = StyleSheet .create ({
container : {
flex : 1 ,
padding : 16 ,
backgroundColor : '#fff' ,
},
title : {
fontSize : 24 ,
fontWeight : 'bold' ,
},
});
import { View , Text } from 'react-native' ;
export function MyComponent (return (
<View className ="flex-1 p-4 bg-white" >
<Text className ="text-2xl font-bold" > Hello</Text >
</View >
API Integration
import { useState, useEffect } from 'react' ;
export function useApi<T>(endpoint : string ) {
const [data, setData] = useState<T | null >(null );
const [loading, setLoading] = useState (true );
const [error, setError] = useState<Error | null >(null );
useEffect (() => {
const fetchData = async (try {
const response = await fetch (`${process.env.EXPO_PUBLIC_API_URL} ${endpoint} ` );
if (!response.ok ) throw new Error ('API Error' );
const json = await response.json ();
setData (json);
} catch (e) {
setError (e as Error );
} finally {
setLoading (false );
}
};
fetchData ();
}, [endpoint]);
return { data, loading, error };
}
Authentication Pattern
import { createContext, useContext, useState, useEffect } from 'react' ;
import * as SecureStore from 'expo-secure-store' ;
interface AuthContextType {
user : User | null ;
signIn : (email : string , password : string Promise <void >;
signOut : () => Promise <void >;
}
const AuthContext = createContext<AuthContextType | null >(null );
export function AuthProvider ({ children }: { children: React.ReactNode } ) {
const [user, setUser] = useState<User | null >(null );
useEffect (() => {
const loadToken = async (const token = await SecureStore .getItemAsync ('authToken' );
if (token) {
}
};
loadToken ();
}, []);
const signIn = async (email : string , password : string const response = await fetch ('/api/auth/login' , {
method : 'POST' ,
body : JSON .stringify ({ email, password }),
});
const { token, user } = await response.json ();
await SecureStore .setItemAsync ('authToken' , token);
setUser (user);
};
const signOut = async (await SecureStore .deleteItemAsync ('authToken' );
setUser (null );
};
return (
<AuthContext.Provider value ={{ user , signIn , signOut }}>
{children}
</AuthContext.Provider > export const useAuth = (useContext (AuthContext )!;
Flutter Guide
Project Creation
flutter create my_app
cd my_app
flutter run
Folder Structure my_app/
├── lib/
│ ├── main.dart # App entry point
│ ├── app/
│ │ ├── app.dart # MaterialApp setup
│ │ └── routes.dart # Route definitions
│ ├── features/ # Feature-based folders
│ │ ├── auth/
│ │ │ ├── screens/
│ │ │ ├── widgets/
│ │ │ └── providers/
│ │ └── home/
│ ├── shared/
│ │ ├── widgets/ # Common widgets
│ │ ├── services/ # API services
│ │ └── models/ # Data models
│ └── core/
│ ├── theme/ # Theme settings
│ └── constants/ # Constants
├── assets/ # Images, fonts
├── pubspec.yaml # Dependency management
└── android/ & ios/ # Native code
Basic Widget Patterns // lib/features/home/screens/home_screen.dart
import 'package:flutter/material.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Home'),
),
body: const Center(
child: Text('Hello, Flutter!'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
),
);
}
}
State Management (Riverpod) // lib/providers/counter_provider.dart
import 'package:flutter_riverpod/flutter_riverpod.dart';
final counterProvider = StateNotifierProvider<CounterNotifier, int>((ref) {
return CounterNotifier();
});
class CounterNotifier extends StateNotifier<int> {
CounterNotifier() : super(0);
void increment() => state++;
void decrement() => state--;
}
// Usage
class CounterScreen extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final count = ref.watch(counterProvider);
return Text('Count: $count');
}
}
Web vs Mobile Differences
UI/UX Differences Element Web Mobile Click onClick onPress Scroll overflow: scroll ScrollView / FlatList Input input TextInput Links a href Link / navigation Layout div + CSS View + StyleSheet
Navigation Differences Web: URL-based (browser back button)
Mobile: Stack-based (screen stacking)
Web: /users/123
Mobile: navigation.navigate('User', { id: 123 })
Storage Differences Web: localStorage, sessionStorage, Cookie
Mobile: AsyncStorage, SecureStore, SQLite
⚠️ SecureStore is required for sensitive info on mobile!
Build & Deployment
Expo EAS Build
npm install -g eas-cli
eas login
eas build:configure
eas build --platform ios
eas build --platform android
eas submit --platform ios
eas submit --platform android
Environment Variables
{
"expo" : {
"extra" : {
"apiUrl" : "https://api.example.com"
}
}
}
import Constants from 'expo-constants' ;
const apiUrl = Constants .expoConfig ?.extra ?.apiUrl ;
Mobile PDCA Checklist
Phase 1: Schema □ Identify data that needs offline caching
□ Define sync conflict resolution strategy
Phase 3: Mockup □ Follow iOS/Android native UX guidelines
□ Consider gestures (swipe, pinch, etc.)
□ Layout for different screen sizes (phone, tablet)
Phase 6: UI □ Keyboard handling (screen adjustment during input)
□ Safe Area handling (notch, home button area)
□ Handle platform-specific UI differences
Phase 7: Security □ Store sensitive info with SecureStore
□ Certificate Pinning (if needed)
□ App obfuscation settings
Phase 9: Deployment □ Follow App Store review guidelines
□ Prepare Privacy Policy URL
□ Prepare screenshots, app description
Frequently Asked Questions
Q: Can I convert a web project to an app? A: Recommend separate project over full conversion
- APIs can be shared
- UI needs to be rewritten (for native UX)
- Business logic can be shared
Q: Should I use Expo or React Native CLI? A: Start with Expo!
- 90%+ of apps are sufficient with Expo
- Can eject later if needed
- Use CLI only when native modules are absolutely required
Q: How long does app review take? A:
- iOS: 1-7 days (average 2-3 days)
- Android: Few hours ~ 3 days
⚠️ First submission has high rejection possibility → Follow guidelines carefully!
Requesting from Claude
Project Creation "Set up a [app description] app project with React Native + Expo.
Configure with 3 tab navigation (Home, Search, Profile)."
Screen Implementation "Implement [screen name] screen.
- Display [content] at the top
- Display [list/form/etc.] in the middle
- [Button/navigation] at the bottom"
API Integration "Implement screen integrating with [API endpoint].
- Show loading state
- Handle errors
- Support pull-to-refresh"
