React Native Interview Questions

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