How to build Custom Native Modules?
- Create module class extending ReactContextBaseJavaModule
- Export module name and functions annotated as @ReactMethod
- In MainPackage file, add newly created module into module list.
- Import NativeModule from react-native package in JS file.
- More Info here
How to build Custom Native UI Components?
- Create ViewManager Subclass
- Expose properties annotated as @ReactProps
- Register your ViewManager Class
- Create your View Class
- More Info here
Number of threads in React Native?
- Javascript thread which handles business logic, api calls, touch events
- Main thread which handles Native logic
What are common Performance bottleneck or issues?
- Usage of large ScrollView instead of ListView or FlatList
- Unnecessary rerendering without UI changes
- Improper usage of Keys. Read more here
- Heavy Animation (Animation are calculated on Javascript thread). Use
useNativeDriver
as true to use native apis and move computation to main thread
How to Improve Performance?
- use hermes engine
- use inline requires for expensive or large module for eg :
let VeryExpensive = null;
const Home = () => {
const onClickHandler = () => {
if (VeryExpensive == null) {
VeryExpensive = require('./VeryExpensive').default;
}
}
}
What is hermes?
- Opensource JS engine optimized for React Native
- Help in improved App startup time, decreased memory usage and smaller app size
- More info here
What is Turbomodules?
- Rearchitecture of Native Module system
- Will help in facilitate more efficient typesafe Communication between JS and Native without React Native bridge
How to Animated stuff?
- Use inbuild Animated apis for declarative animation between Input and Output
- Use LayoutAnimation API for all animating Views in next render cycle. Mostly used for flexbox layout update
Top comments (0)