React Native Basics
Set up React Native, learn core components, StyleSheet styling, and platform differences between iOS and Android.
Project Setup
React Native renders native UI using JavaScript and React. Start with npx @react-native-community/cli init or Expo for managed workflow. Install Xcode and Android Studio for simulators.
Metro bundler serves JavaScript to devices during development. Fast Refresh preserves component state while editing.
Choose bare workflow when you need deep native customization; Expo when iteration speed and OTA updates matter more initially.
- Use Node LTS and watchman on macOS for file watching
- Run pod install in ios/ after adding native dependencies
- Enable Hermes engine for faster startup on new projects
npx @react-native-community/cli init MyApp cd MyApp npx react-native run-ios npx react-native run-android
Core Components
View is the layout container; Text renders strings; Image displays assets; ScrollView and FlatList handle scrolling content. Pressable and TouchableOpacity capture taps.
TextInput collects user text. SafeAreaView respects notches and home indicators. StatusBar configures system bar appearance.
Components map to native widgets—unlike web divs, nesting Text inside Text is required for mixed styling in paragraphs.
- Use FlatList for long lists instead of ScrollView with map
- Set accessible and accessibilityLabel on interactive elements
- Test on both platforms—layout differs subtly
import { View, Text, Pressable, StyleSheet } from 'react-native';
export function Welcome() {
return (
<View style={styles.container}>
<Text style={styles.title}>Hello React Native</Text>
<Pressable onPress={() => alert('Tapped')}>
<Text>Continue</Text>
</Pressable>
</View>
);
}StyleSheet and Layout
StyleSheet.create optimizes style objects. Flexbox is the primary layout model with flexDirection defaulting to column in RN versus row on web.
Dimensions are unitless density-independent pixels. Percentage heights often need parent flex context.
Platform.select and Platform.OS branch styles or logic for iOS versus Android differences.
- Avoid inline style objects recreated every render on hot paths
- Use flex: 1 to fill remaining space in columns
- Prefer gap in flex layouts on supported RN versions
const styles = StyleSheet.create({
container: { flex: 1, padding: 16, backgroundColor: '#fff' },
row: { flexDirection: 'row', alignItems: 'center', gap: 8 },
});