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