Mobile Development
Build cross-platform mobile applications.
When to Use
-
React Native development
-
Flutter development
-
Mobile performance issues
-
Native module integration
-
App store deployment
React Native
Component Structure
import React, { useState, useCallback } from "react"; import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
interface Props { title: string; onPress: () => void; }
export function Button({ title, onPress }: Props) { const [pressed, setPressed] = useState(false);
const handlePress = useCallback(() => { setPressed(true); onPress(); }, [onPress]);
return ( <TouchableOpacity style={[styles.button, pressed && styles.pressed]} onPress={handlePress} activeOpacity={0.7} > <Text style={styles.text}>{title}</Text> </TouchableOpacity> ); }
const styles = StyleSheet.create({ button: { backgroundColor: "#007AFF", padding: 16, borderRadius: 8, }, pressed: { opacity: 0.8, }, text: { color: "white", fontWeight: "600", textAlign: "center", }, });
Navigation
import { NavigationContainer } from "@react-navigation/native"; import { createNativeStackNavigator } from "@react-navigation/native-stack";
type RootStackParamList = { Home: undefined; Details: { id: string }; };
const Stack = createNativeStackNavigator<RootStackParamList>();
function App() { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Details" component={DetailsScreen} /> </Stack.Navigator> </NavigationContainer> ); }
Flutter
Widget Structure
class MyButton extends StatelessWidget { final String title; final VoidCallback onPressed;
const MyButton({ Key? key, required this.title, required this.onPressed, }) : super(key: key);
@override Widget build(BuildContext context) { return ElevatedButton( onPressed: onPressed, style: ElevatedButton.styleFrom( padding: const EdgeInsets.all(16), shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8), ), ), child: Text(title), ); } }
Performance Tips
-
Use FlatList/ListView for long lists
-
Memoize callbacks with useCallback
-
Avoid inline styles (use StyleSheet)
-
Lazy load screens and images
-
Profile with Flipper/DevTools
Common Patterns
Pattern React Native Flutter
State useState/Redux setState/Riverpod
Navigation React Navigation Navigator 2.0
HTTP fetch/axios http/dio
Storage AsyncStorage shared_preferences
Animations Animated/Reanimated AnimationController
Examples
Input: "Build a list screen" Action: Create FlatList with virtualization, pull-to-refresh, pagination
Input: "Add offline support" Action: Implement AsyncStorage caching, sync queue, network detection