mobile

Mobile Development Skill

Overview

React Native, Flutter, and mobile development best practices.

React Native Patterns

1. Project Structure

src/
├── components/       # Reusable UI components
│   ├── Button.tsx
│   └── Card.tsx
├── screens/          # Screen components
│   ├── Home.tsx
│   └── Profile.tsx
├── navigation/       # Navigation config
│   └── AppNavigator.tsx
├── hooks/            # Custom hooks
├── services/         # API calls
├── stores/           # State management
└── utils/            # Utilities

2. Navigation

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function AppNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

3. Styling

import { StyleSheet, View, Text } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 12,
  },
});

// Or use styled-components
import styled from 'styled-components/native';

const Container = styled.View`
  flex: 1;
  padding: 16px;
`;

Performance Optimization

FlatList Best Practices

<FlatList
  data={items}
  renderItem={({ item }) => <ItemCard item={item} />}
  keyExtractor={(item) => item.id}
  
  // Performance props
  removeClippedSubviews={true}
  maxToRenderPerBatch={10}
  windowSize={5}
  initialNumToRender={10}
  getItemLayout={(data, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  })}
/>

Memoization

// Memoize expensive components
const MemoizedItem = React.memo(({ item }) => (
  <View>
    <Text>{item.title}</Text>
  </View>
));

// useCallback for event handlers
const handlePress = useCallback(() => {
  navigation.navigate('Details', { id: item.id });
}, [item.id]);