React Native interview questions

Updated: Nov 29, 2019

What is the React native and why is it being used?

React Native is a JavaScript code library of the next generation developed by Facebook for the creation of native apps. Reusable software functionality across the web and mobile devices makes React Native among developers highly demanding. App developers do not have to build the same app from scratch with the reusable codes for different platforms.

This also helps businesses to better maintain their employees, particularly start-ups and medium-sized enterprises, as they can now employ fewer individuals to perform the same role but in different operating systems.

What is HOC in the Native React?

Higher Order Component, soon known as HOC, is an advanced technique of reuse of the component logic by React Native. The method gets an element and returns a new component.

What is InteractionManager and how to use it? Why does it matter?

The InteractionManager is the native module responsible for postponing the execution of a function until the completion of an "interaction." In order to handle this deferral, we can call InteractionManager.runAfterInteractions(()= >{...}). We can record our own interactions as well.

Well..InteractionManager is very important because there are two threads in React Native. There is a JavaScript UI thread that performs display changes, and another thread that is

used for all non-UI system activities. Since there is only one thread to make UI changes, frames can be overloaded and dropped, particularly in things like animations on the navigation screen. We make sure that our task is executed using the InteractionManager

Explain some of the basic trade-offs between building with React Native and creating a "real" native app.

React Native has exploded in popularity as many businesses and teams make sense of the tradeoffs it makes. But it's not always the right choice to create an app in React Native.

When a team builds a product that doesn't need extremely high performance, React Native makes sense. The asynchronous bridge's limitations are a bottleneck for things like 3D games, and games with lots of particle updates. Apps based on deep interfaces with low-level APIs or needing large amounts of native code could be easier to build as native apps.

React Native is partly a source that is open, partly closed. Facebook maintains a private React Native code repository that is used in its apps. It is often merged into the open source codebase when code from the private repo can be split off so that it contains nothing proprietary. It leaves React Native users with the classic open source software tradeoff:

there are often bugs — React Native is still in alpha form— and there may be spotty changes. Motivated groups, on the other hand, will contribute to the source code and incorporate the improvements and enhancements they need. Based on the resources and product roadmap of a company, it may be the right choice to rely on open source.

What is React Native's relationship with React?

The construction of React Native is based on React. React, at its core, is a library to "differentiate" a virtual DOM and render this DOM to a minimally operated screen. By default, React has no opinion on the nodes in its virtual DOM tree. Rather, it simply has algorithms which can determine tree changes and re-render them. Web-based reaction provides its own node primitives (< div >, < span >, etc.) that are the building blocks for web applications. But, as React Native did, new node primitives can be established.

React Native describes its own primitives (< View >, < Image >, etc.) not rendering HTML elements but mapping them to native views, such as UIView and UIImageView. It implements a bridge that allows asynchronous communication with the native runtime of the JavaScript runtime. React itself provides the tree infrastructure that differs and makes it possible for React Native to work.

Is it compatible with React Native to compile-to-JS libraries such as TypeScript or ClojureScript? Why not or why not?

JavaScript compiling languages are generally compatible with React Native. Using the react-native Babel plugin, React Native uses Babel to transform JavaScript into a form consumable by the JavaScript runtime of the native OS. As long as your JavaScript can be compiled by Babel and your code does not rely on web or node.js-specific dependencies, it will run in React Native.

Which node_modules are going to run in the Native React? How are we going to test for this?

Any pure JavaScript library not relying on Node.js runtime modules and not relying on web-specific concepts (e.g. window.location.pathname) should run smoothly in React Native. But we must be aware that there is no way to test this with Babel— it does not scan these libraries for offending dependencies. A module using window.location.pathname may fail in an unexpected location at runtime.

Note: We can often use Babel plugins to browser these components for use in React Native for modules that depend directly on Node.js runtime modules.

For some of its animations, how does React Native achieve native performance?

Some types of animation, such as Animation.timing and Animation.spring, can be serialized and sent through the asynchronous bridge before execution. Instead of trying to send positional values across the bridge as each frame is made, it enables the runtime to postpone the actual drawing of the animation to the native hand. This does not work with previously uncomputable animations. For example:

Animated.timing(new Animated.Value(0), {
  useNativeDriver: true,
  toValue: 100,
  duration: 100

This will serialize the operation before starting it and send it to the native side.

Why are we using StyleSheet.create? With this approach, what are the tradeoffs?

StyleSheet is a module built into React Native that enables us to create unchanging references to the stylesheet. We can pass objects of regular style into the create() method, and the module will freeze the objects and assign an ID to each. This has two advantages: it allows us to avoid creating a new style object each rendering move (which could lead to render quality degradation), and it allows us to submit the object only once across the asynchronous bridge (because these style objects map directly to native styles, they need to be transferred over).

The key tradeoff with this method is that external criteria (such as screen rotation or even a viewing mode selected by the user) require recomputing styles.

Native apps that feel smooth often include lots of small animations for changes and transitions in the state. How would you put these behaviors into practice?

React Native comes with the built-in Animated API. This API is declarative: Using Animated.timing, Animated.spring, etc., we define specific animations and provide the exact parameters required to run the animation. This technique falls apart when on the fly we need lots of subtle and delicate animations; it's not efficient, and it would be a nightmare to maintain all that code.

Alternatively, we are looking at the Layout Animation module, an interpolative API. We can invoke or identify our own predefined Layout Animations. Layout Animation observes changes in the positions of elements between the render loop cycles and measures the variations in position between elements at different cycles. It then interpolates those changes and generates a smooth, native animation.

Never Miss a Post. Subscribe Now!

Contact Us:

Location : Bangalore India.

© 2019 proudly created  by Nawab Ahmad. 

  • Nawab Ahmad
  • Grey Twitter Icon
  • Nawab Ahmad