React Native App Development

Build cross-platform mobile applications with modern React Native patterns.

Project Structure

src/ ├── components/ # Reusable UI components ├── screens/ # Screen components ├── navigation/ # React Navigation setup ├── services/ # API and business logic ├── store/ # State management ├── hooks/ # Custom hooks └── utils/ # Helpers

Navigation Setup

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

const Stack = createNativeStackNavigator(); const Tab = createBottomTabNavigator();

function App() { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Main" component={MainTabs} /> <Stack.Screen name="Details" component={DetailsScreen} /> </Stack.Navigator> </NavigationContainer> ); }

function MainTabs() { return ( <Tab.Navigator> <Tab.Screen name="Home" component={HomeScreen} /> <Tab.Screen name="Profile" component={ProfileScreen} /> </Tab.Navigator> ); }

State Management (Redux Toolkit)

import { createSlice } from '@reduxjs/toolkit';

const userSlice = createSlice({ name: 'user', initialState: { data: null, loading: false, error: null }, reducers: { setUser: (state, action) => { state.data = action.payload; }, setLoading: (state, action) => { state.loading = action.payload; }, setError: (state, action) => { state.error = action.payload; } } });

API Client

import axios from 'axios'; import AsyncStorage from '@react-native-async-storage/async-storage';

const api = axios.create({ baseURL: 'https://api.example.com' });

api.interceptors.request.use(async config => { const token = await AsyncStorage.getItem('token'); if (token) config.headers.Authorization = Bearer ${token}; return config; });

Best Practices

• Use functional components with hooks

• Implement proper error boundaries

• Optimize FlatList with keyExtractor, getItemLayout

• Handle platform-specific code with Platform.select()

• Use TypeScript for type safety

• Test on both iOS and Android

Avoid

• Inline styles (use StyleSheet)

• Index as list keys

• Storing sensitive data in AsyncStorage

• Ignoring platform differences