DEV Community

Ramesh Vishnoi
Ramesh Vishnoi

Posted on • Updated on

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;
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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)