Skip to content

Instantly share code, notes, and snippets.

@KriteshTimsina
Last active July 31, 2024 05:46
Show Gist options
  • Save KriteshTimsina/e951d34266ab181142541723b1209ce7 to your computer and use it in GitHub Desktop.
Save KriteshTimsina/e951d34266ab181142541723b1209ce7 to your computer and use it in GitHub Desktop.
React native go-to libraries and concepts to master
There are two ways of building apps with react native- the easy way (expo) and the other way (react-native cli)
These are the go-to libraries and concepts you need to learn in order to master react native.
Requirements: Prior knowledge of Javascript and React
Lets get started:
NAVIGATION: react navigation (https://reactnavigation.org/)
Here are some in-depth navigation concepts to learn in React Native:
1. **Basic Navigation**:
- Understanding the navigation stack
- Navigating between screens
- Passing parameters to routes
2. **Advanced Navigation Techniques**:
- Nested navigators (e.g., combining stack and tab navigators)
- Modals and pop-ups within navigation
- Dynamic navigation (conditionally rendering navigators)
3. **Navigation Options and Customization**:
- Configuring screen options (header styles, title, etc.)
- Custom headers and custom header buttons
- Transition animations
4. **Deep Linking**:
- Setting up deep linking with React Navigation
- Handling incoming deep links
- Navigating based on deep link data
5. **Handling Navigation State**:
- Persisting navigation state across app sessions
- Resetting the navigation state
- Conditional navigation based on app state (e.g., authentication flow)
6. **Drawer Navigation**:
- Customizing the drawer content
- Implementing drawer actions
- Managing drawer navigation state
7. **Tab Navigation**:
- Customizing tab bar appearance
- Managing tab navigation state
- Handling nested tab navigators
8. **Stack Navigation**:
- Managing stack navigation state
- Custom transitions between stack screens
- Handling back button behavior in stacks
9. **Authentication Flows**:
- Implementing authentication flows (login, signup, password reset)
- Conditional navigation based on authentication state
- Secure routes (restricting access to certain screens)
10. **Hooks and Context in Navigation**:
- Using `useNavigation` hook for programmatic navigation
- Accessing navigation context
- Creating custom hooks for navigation
11. **Integrating with Redux or Context API**:
- Navigating based on global state
- Synchronizing navigation with state changes
- Managing complex state interactions with navigation
12. **Error Handling in Navigation**:
- Handling navigation errors
- Displaying error messages during navigation
- Implementing fallback navigation routes
13. **Performance Optimization**:
- Lazy loading screens
- Optimizing navigation transitions
- Reducing memory usage with navigation
14. **Internationalization and Localization**:
- Handling navigation in multi-language apps
- Dynamically changing navigation titles based on language
- Managing navigation routes for different locales
15. **Integration with External Libraries**:
- Using third-party libraries with navigation (e.g., animations, gesture handlers)
- Combining navigation with UI libraries (e.g., React Native Paper, NativeBase)
16. **Testing Navigation**:
- Writing unit tests for navigation flows
- Integration testing with navigation
- End-to-end testing with Detox focusing on navigation
17. **Navigation Configuration and Setup**:
- Configuring navigation for different platforms (Android, iOS, Web)
- Handling platform-specific navigation differences
- Setting up navigation in new projects
SVG support to React Native : react-native-svg (https://reactnavigation.org/)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment