Last Updated: November 21, 2025
Essential CLI Commands
npx create-expo-app my-app
Create new Expo project
npx expo start
Start development server
npx expo start --tunnel
Start with tunnel connection (for testing on devices)
npx expo start --clear
Start with cache cleared
npx expo install package-name
Install compatible package version
npx expo prebuild
Generate native Android/iOS folders
eas build --platform ios
Build for iOS using EAS
eas build --platform android
Build for Android using EAS
eas build --platform all
Build for both platforms
eas submit -p ios
Submit to App Store
eas submit -p android
Submit to Play Store
npx expo doctor
Check for common issues
Core React Native Components
| Component | Purpose | Key Props |
|---|---|---|
| View | Container (like div) | style, onLayout, testID |
| Text | Display text | style, numberOfLines, onPress |
| Image | Display images | source, resizeMode, style |
| ScrollView | Scrollable container | horizontal, contentContainerStyle |
| FlatList | Optimized list rendering | data, renderItem, keyExtractor |
| SectionList | Sectioned list | sections, renderItem, renderSectionHeader |
| TextInput | Text input field | value, onChangeText, placeholder |
| TouchableOpacity | Touchable with opacity | onPress, activeOpacity |
| Pressable | Universal touchable (recommended) | onPress, onPressIn, onPressOut |
| Modal | Modal overlay | visible, transparent, animationType |
Essential Expo SDK Packages
expo-camera
Access device camera for photos/video
expo-location
Get device GPS location
expo-image-picker
Pick images from gallery or camera
expo-notifications
Send/receive push notifications
expo-file-system
File system access and operations
expo-av
Audio and video playback
expo-secure-store
Encrypted key-value storage
expo-linking
Deep linking and URL handling
expo-font
Load custom fonts
expo-splash-screen
Control splash screen behavior
Navigation (React Navigation)
npm install @react-navigation/native
Install core navigation library
npx expo install react-native-screens react-native-safe-area-context
Install required dependencies
npm install @react-navigation/native-stack
Stack navigation (most common)
npm install @react-navigation/bottom-tabs
Bottom tab navigation
npm install @react-navigation/drawer
Drawer (side menu) navigation
navigation.navigate('ScreenName')
Navigate to screen
navigation.push('ScreenName')
Push new screen (can repeat)
navigation.goBack()
Go back to previous screen
navigation.reset()
Reset navigation state
Styling & Layout
StyleSheet.create({})
Create optimized styles object
flexDirection: 'row' | 'column'
Flex layout direction
justifyContent: 'center' | 'space-between'
Main axis alignment
alignItems: 'center' | 'flex-start'
Cross axis alignment
flex: 1
Fill available space
Platform.OS === 'ios'
Platform-specific styling
Dimensions.get('window')
Get screen dimensions
State Management Patterns
| Solution | Use Case | Setup |
|---|---|---|
| useState | Local component state | Built-in React hook |
| useContext | Simple global state | Built-in, wrap with Provider |
| Redux Toolkit | Complex global state | npm install @reduxjs/toolkit react-redux |
| Zustand | Simple global state, less boilerplate | npm install zustand |
| MobX | Observable state, less boilerplate | npm install mobx mobx-react-lite |
| React Query/TanStack | Server state management | npm install @tanstack/react-query |
Performance Optimization
Use FlatList instead of ScrollView + map
Virtualized list for better performance
Memoize with React.memo()
Prevent unnecessary re-renders
useCallback for functions
Memoize callback functions
useMemo for expensive calculations
Memoize computed values
getItemLayout for FlatList
Improve scroll performance with fixed heights
removeClippedSubviews={true}
Remove off-screen views (Android)
Optimize images with resizeMode
Use 'cover' or 'contain' appropriately
Lazy load screens with React.lazy()
Code splitting for faster initial load
Debugging Tools
console.log() / console.warn()
Basic logging (view in terminal or debugger)
Shake device → Debug Remote JS
Open Chrome DevTools debugger
Reactotron
Desktop app for React Native debugging
Flipper
Official debugging platform from Meta
React Native Debugger
Standalone debugger with Redux DevTools
__DEV__ check
Run code only in development
Common Hooks
| Hook | Purpose | Example |
|---|---|---|
| useEffect | Side effects, lifecycle | useEffect(() => {}, []) |
| useState | Local state | const [count, setCount] = useState(0) |
| useCallback | Memoize functions | useCallback(() => {}, [deps]) |
| useMemo | Memoize values | useMemo(() => compute(), [deps]) |
| useRef | Mutable ref, DOM access | const ref = useRef(null) |
| useNavigation | Access navigation (React Navigation) | const navigation = useNavigation() |
| useRoute | Access route params | const route = useRoute() |
App Configuration (app.json)
"name": "MyApp"
App display name
"slug": "my-app"
URL-friendly name
"version": "1.0.0"
App version
"orientation": "portrait"
Lock orientation
"icon": "./assets/icon.png"
App icon (1024x1024)
"splash": { "image": "./assets/splash.png" }
Splash screen image
"ios": { "bundleIdentifier": "com.company.app" }
iOS bundle ID
"android": { "package": "com.company.app" }
Android package name
Testing
npm install --save-dev jest
Unit testing framework
npm install --save-dev @testing-library/react-native
React Native testing utilities
npm test
Run tests
npm install --save-dev detox
E2E testing framework
Common Pitfalls
| Issue | Cause | Solution |
|---|---|---|
| Text must be in Text component | Text inside View | Wrap all text in <Text> |
| Slow FlatList | Complex renderItem | Memoize with React.memo, use key extractor |
| Image not showing | Wrong source format | Use {uri: 'url'} for web, require() for local |
| Keyboard covers input | No keyboard avoiding view | Use KeyboardAvoidingView or react-native-keyboard-aware-scroll-view |
| Memory leaks | Missing useEffect cleanup | Return cleanup function in useEffect |
💡 Pro Tip:
Use FlatList with keyExtractor and getItemLayout for optimal performance. Always use SafeAreaView to respect device notches/rounded corners. Test on real devices early - simulators don't catch all issues. Use Expo Go for rapid prototyping, but prebuild for custom native modules. Keep app.json updated for proper builds. Learn React Navigation thoroughly - it's essential for any non-trivial app!