Important React Native Topics with Notes
Core Concepts
- JSX is a syntax extension for JavaScript and is used to describe what the UI should look like.
- Functional components are simpler and support hooks; class components support lifecycle methods.
- Props are read-only and used to pass data; State is local and can be changed.
- useEffect is used for side-effects like API calls or event listeners.
- Event handling uses props like onPress or onChangeText for interaction.
UI & Layout
- Flexbox is used for responsive and cross-platform layout.
- ScrollView is good for small content; FlatList is optimized for large lists.
- Modal and Alert provide overlays; ActivityIndicator shows loading states.
- Platform.OS helps render platform-specific code (iOS vs Android).
- Creating reusable components keeps your code DRY and clean.
Styling
- StyleSheet.create is used to organize and validate styles.
- Dynamic styling allows condition-based appearance.
- Libraries like Gluestack, Tailwind, or NativeBase simplify theming.
Navigation
- React Navigation provides stack, tab, and drawer navigators.
- Params can be passed using navigation.navigate and read with useRoute.
- Programmatic navigation is possible using useNavigation.
APIs & Data Fetching
Important React Native Topics with Notes
- Axios or fetch is used for calling REST APIs.
- useEffect is used to fetch data when a component mounts.
- Always handle loading and error states.
- Use pagination for long lists to improve performance.
Authentication & Storage
- Implement login/signup using API calls and state.
- Store tokens using AsyncStorage or SecureStore.
- Use guards (like checking token) to protect routes/screens.
- Context or Redux can help maintain global auth state.
State Management
- useState handles local state.
- Redux/Context are used for global state management.
- Redux Toolkit reduces boilerplate.
- React Query manages server-side state and caching.
Device Integration
- Ask permissions before accessing device features.
- Use expo-image-picker or react-native-camera for media access.
- Linking is used for opening external URLs or deep linking.
- Push notifications require setup via FCM or Expo Notification API.
Performance Optimization
- Use memoization to avoid unnecessary re-renders.
Important React Native Topics with Notes
- Optimize FlatList with keyExtractor and windowSize.
- Lazy load screens to reduce initial load time.
Debugging & Tools
- Use console.log, Flipper, and React DevTools for debugging.
- Handle unexpected crashes with Error Boundaries.
- Suppress unwanted warnings with LogBox.
- Use ESLint/Prettier for clean code and formatting.
Build & Deployment
- Choose Expo for faster prototyping; CLI for native customization.
- Use eas build to generate APK or AAB.
- OTA updates possible using Expo Updates.
- Follow proper steps for publishing on Play Store or App Store.
