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.

GeekyAnts RN Presentation

By kuldep saxena

GeekyAnts RN Presentation

  • 166
Loading comments...

More from kuldep saxena