My Experiences with
React Native
Introduction
- React Native
- RN Performance
- How to boost up performance
- My Project (CRMPRO)
- Form Handling
How RN Works ?
There are four threads in the React Native App :
- UI Thread ( Main Thread )
- JS Thread
- Native Modules Thread
- Render Thread ( Only in android 5.0+ )
React Native Performance
- ios devices display 60 frames/sec.
- It gives you & UI system about 16.67ms.
- If the JS thread is unresponsive for a frame, it will be considered a dropped frame.
Common Performance Problems
- Navigator Transitions
- Running in development Mode
- Using Console.log statements
- ListView slow scroll performance
- Touchable View is not responsive
( use requestAnimationFrame )
- Re-rendering a view that hardly changes
Hacks That Actually Helps
Avoid Unnecessary Re-rendering
- Use shouldComponentUpdate
- Use Binding in constructor or class properties
- Don't define extra props in mapStateToProps
- Attach a key associated with your object
Use Key Value Pairs
Use Selectors
CRMPRO
- Architecture of The Project
- Nested Routing
- Dynamic Components ( Forms & Views )
- Calendar Implementation
Form Handling
React Native Form Builder
- What is Form Builder ?
- Generate Form Fields UI
- Control & Track values of all Fields
- Supports custom validations
- Supports custom Error Messages
Future Enhancements
- Add more fields for e.g ImagePicker, CountryPicker etc
- More Customizable Fields
- Add More Validators
- Handle async calls
- Introduce some theme Fields.
RN Presentation
By Kuldeep Saxena
