Top React Native Interview Questions for Job Seekers

A Native module in React Native is a way to add native code (i.e., code written in Java or Objective-C/Swift) to a React Native application. Native modules allow React Native apps to access functionality that isn't available in JavaScript, such as accessing the camera or making network requests.

To create a Native module in React Native, you typically need to perform the following steps:

• Create a new module file in your native code (either Java or Objective-C/Swift, depending on your platform) that exports the functionality you want to use in your React Native app.
• Add the React Native bridge code to your module file, which allows your JavaScript code to communicate with your native code.
• Create a new JavaScript file that defines a wrapper around your native module. This file should define a JavaScript class that provides methods that correspond to the functionality in your native module.
• Finally, add your new module to your app's package.json file, so that it can be installed and used by your app.

Here's an example of how to create a simple Native module in React Native for Android:

• Create a new Java file called MyModule.java, and add the following code:
  package com.myapp;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
public class MyModule extends ReactContextBaseJavaModule {
  public MyModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }
  @Override
  public String getName() {
    return "MyModule";
  }
  @ReactMethod
  public void myMethod(String message) {
    // Do something with the message
  }
}
• Add the following code to the MainApplication.java file in your Android app:
  @Override
protected List getPackages() {
    return Arrays.asList(
            new MainReactPackage(),
            new MyModulePackage() // <-- Add this line
    );
}
• Create a new JavaScript file called MyModule.js, and add the following code:
  import { NativeModules } from 'react-native';
const { MyModule } = NativeModules;
export default MyModule;
• Finally, add your new module to your app's package.json file, like so:
  {
  "name": "myapp",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "react": "16.13.1",
    "react-native": "0.63.2",
    ...
  },
  "rnpm": {
    "assets": [
      "assets/fonts/"
    ]
  },
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "test": "jest"
  },
  "devDependencies": {
    ...
  },
  "react-native": {
    "dependencies": {
      "MyModule": {
        "platforms": {
          "android": null
        }
      }
    }
  }
}
• After completing these steps, you should be able to use your new Native module in your React Native app by importing it from your MyModule.js file and calling its methods. For example:
  import MyModule from './MyModule';
MyModule.myMethod('Hello, Native module!');

The ReactJs is a JavaScript library to develop apps in HTML5 while using JavaScript as the developing language. Whereas, React Native is a JavaScript framework used to create native mobile applications while using JavaScript as the development language.

To install a specific version of React Native, use this following command:

$ react-native init newproject --version react-native@VersionNumber

Note: In the above, replace VersionNumber with the version of React you want to install.

The map function is used to show a list of elements in an array. It can be used in React Native like the following example:

Higher-Order-Component, shortly known as HOC is an advanced React Native technique to reuse the component logic. The function obtains a component and returns a new element.

NOTE: If you are a react native developer then these questions & answers will help you to crack your interview easily.

To use the camera to React Native, follow these steps carefully:

• On Android, camera permission must be asked:
  <uses-permission android:name="android.permission.CAMERA" />
• Now, to enable video recording feature add the following code to the AndroidManifest.xml:
  <uses-permission android:name="android.permission.RECORD_AUDIO"/> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
• For iOS, you must update the Info.plist with a usage description for camera
  <key>NSCameraUsageDescription</key> <string>Your own description of the purpose</string>

Yes, React Native is a mobile app development framework that allows developers to build mobile applications for both iOS and Android platforms using JavaScript and React. React Native is based on React, a popular JavaScript library for building user interfaces on the web, and uses a similar approach to building mobile apps.

React Native allows developers to write code once and reuse it across multiple platforms, which can save time and resources compared to developing separate apps for each platform. The resulting apps are considered "native" because they use the same building blocks as traditional mobile apps, such as buttons, text fields, and other UI elements.

So, in summary, React Native is a mobile app development framework that enables developers to create cross-platform mobile applications using JavaScript and React.

A React component can be viewed as pure on the chance that it renders a similar output for a similar state and props. Class components that extend the React are PureComponent class that is treated as pure components.

Yes, we can combine Android or iOS code in react native. React Native helps to smoothly combines the components written in Java, Objective-C or Swift.

The use of Arrow functions in React Native is to help reduce your application's memory consumption. It is done by reducing the CPU time required to iterate the over loops to generate the components necessary for your lists.

Here’s an example of Arrow function in render:
class Foo extends Component {
   handleClick() {
   console.log('Click happened');
}
render() {
   return <button onClick={() => this.handleClick()}>Click Me</button>;
}
}