NOTE
Basic React knowledge is required. Mobile development experience is helpful.
Introduction
React Native enables you to build native mobile apps using JavaScript and React. Let's explore how to create production-ready applications for iOS and Android.
Setting Up Development Environment
Install required tools:
EXAMPLE CODE
# Install Node.js and npm
npm install -g expo-cli
# Create new project
expo init MyApp
cd MyApp
npm startNavigation Setup
Use React Navigation for routing:
EXAMPLE CODE
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}State Management
Implement Redux for complex state:
EXAMPLE CODE
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
const store = configureStore({
reducer: {
user: userReducer,
products: productsReducer,
},
});
export default function App() {
return (
<Provider store={store}>
<Navigation />
</Provider>
);
}Native Modules
Access device features:
EXAMPLE CODE
import * as Camera from 'expo-camera';
import * as Location from 'expo-location';
async function requestPermissions() {
const { status: cameraStatus } = await Camera.requestCameraPermissionsAsync();
const { status: locationStatus } = await Location.requestForegroundPermissionsAsync();
if (cameraStatus === 'granted' && locationStatus === 'granted') {
// Permissions granted
}
}Performance Optimization
Optimize your app:
- ▹Use `React.memo` for expensive components
- ▹Implement FlatList for long lists
- ▹Use native driver for animations
- ▹Optimize images (compress, use appropriate formats)
- ▹Profile with Flipper
Testing Strategies
Write comprehensive tests:
EXAMPLE CODE
import { render, fireEvent } from '@testing-library/react-native';
test('button press updates counter', () => {
const { getByText } = render(<Counter />);
const button = getByText('Increment');
fireEvent.press(button);
expect(getByText('Count: 1')).toBeTruthy();
});Publishing to App Stores
Deploy your app:
- 1.**Build**: `expo build:android` or `expo build:ios`
- 2.**Test**: Use TestFlight (iOS) or Internal Testing (Android)
- 3.**Submit**: Upload to App Store Connect or Google Play Console
- 4.**Monitor**: Track crashes and user feedback
Conclusion
React Native is a powerful framework for building cross-platform mobile apps. With proper architecture and optimization, you can create apps that rival native development.