Last active
July 31, 2024 05:46
-
-
Save KriteshTimsina/e951d34266ab181142541723b1209ce7 to your computer and use it in GitHub Desktop.
React native go-to libraries and concepts to master
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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