Why native modules extend capabilities in React Native - Quick Recap

Recall & Review

beginner

What is a native module in React Native?

A native module is a piece of code written in the platform's native language (like Java/Kotlin for Android or Objective-C/Swift for iOS) that can be called from React Native JavaScript code to access features not available in React Native by default.

beginner

Why do React Native apps sometimes need native modules?

Because React Native does not cover all device features or platform-specific APIs, native modules let developers add those missing capabilities by bridging native code with JavaScript.

intermediate

How do native modules improve app performance?

Native modules run directly on the device's native platform, so they can perform heavy or complex tasks faster than JavaScript code running in React Native.

beginner

Give an example of a feature that might require a native module.

Accessing the device's camera, fingerprint sensor, or Bluetooth functionality often requires native modules because these features need platform-specific code.

intermediate

What is the role of the bridge in React Native native modules?

The bridge connects JavaScript code with native code, allowing communication between them so native modules can be called from React Native and return results back.

Why do React Native apps use native modules?

A To access device features not available in React Native by default

B To write all app code in JavaScript only

C To avoid using any native platform code

D To make the app slower

Native modules let React Native apps use device features or platform APIs that React Native does not support out of the box.

Which languages are native modules typically written in for Android and iOS?

A Java/Kotlin for Android and Objective-C/Swift for iOS

B JavaScript and TypeScript

C Python and Ruby

D HTML and CSS

Native modules use platform-specific languages: Java or Kotlin for Android, and Objective-C or Swift for iOS.

What does the React Native bridge do?

A Runs the app only on web browsers

B Connects JavaScript code with native platform code

C Compiles JavaScript into native code automatically

D Prevents communication between native and JavaScript code

The bridge allows JavaScript and native code to communicate, enabling native modules to be used in React Native.

Which of these is NOT a reason to use native modules?

A Accessing hardware features like camera or sensors

B Improving performance for complex tasks

C Writing UI components in JavaScript

D Using platform-specific APIs

UI components are usually written in JavaScript with React Native; native modules are for accessing features outside React Native's default scope.

What happens if you try to use a device feature not supported by React Native without a native module?

A The app will crash immediately

B The app will run faster

C React Native will automatically add support

D The feature will not work or be accessible

Without native modules, unsupported device features cannot be accessed from React Native code.

Explain in your own words why native modules are important in React Native development.

Think about what React Native cannot do alone and how native code helps.

Describe how the React Native bridge works with native modules to enable app features.

Imagine the bridge as a messenger between two languages.

Practice

1. Why do React Native apps use native modules?

easy

A. To make the app slower and less efficient

B. To write all app code in JavaScript only

C. To avoid using any native platform code

D. To access device features not available in JavaScript

Solution

1. Step 1: Understand React Native limitations

   JavaScript in React Native cannot access all device hardware or native libraries directly.

2. Step 2: Role of native modules

   Native modules bridge JavaScript with native platform code to access those features.

3. Final Answer:

   To access device features not available in JavaScript -> Option D

4. Quick Check:

   Native modules = access device features [OK]

Hint: Native modules add device features JavaScript lacks [OK]

Common Mistakes:

• Thinking native modules replace JavaScript code
• Believing native modules slow down the app
• Assuming native modules are optional for all features

2. Which of the following is the correct way to import a native module in React Native?

easy

A. import { NativeModules } from 'react-native';

B. import NativeModules from 'react-native';

C. require('NativeModules');

D. import NativeModules from 'native-modules';

Solution

1. Step 1: Recall React Native import syntax

   NativeModules is a named export from 'react-native', so it must be imported with curly braces.

2. Step 2: Check each option

   import { NativeModules } from 'react-native'; uses correct syntax with curly braces; others are incorrect or invalid module names.

3. Final Answer:

   import { NativeModules } from 'react-native'; -> Option A

4. Quick Check:

   Correct import uses curly braces [OK]

Hint: Use curly braces to import named exports [OK]

Common Mistakes:

• Omitting curly braces for named imports
• Using wrong module names
• Using require without assignment

3. What will the following React Native code output if the native module 'DeviceInfo' returns the device name 'Pixel 5'?

import { NativeModules } from 'react-native';
const { DeviceInfo } = NativeModules;

DeviceInfo.getDeviceName((name) => {
  console.log('Device:', name);
});

medium

A. Device: Pixel 5

B. Device: undefined

C. Error: getDeviceName is not a function

D. Device: null

Solution

1. Step 1: Understand native module callback

   The native module 'DeviceInfo' calls the callback with the device name 'Pixel 5'.

2. Step 2: Check console.log output

   The callback logs 'Device: Pixel 5' to the console.

3. Final Answer:

   Device: Pixel 5 -> Option A

4. Quick Check:

   Callback logs device name correctly [OK]

Hint: Callbacks print native data as expected [OK]

Common Mistakes:

• Assuming synchronous return instead of callback
• Expecting undefined if native module not linked
• Confusing function names or parameters

4. You wrote this code to use a native module but get an error: TypeError: NativeModules.CameraModule.getPicture is not a function. What is the most likely cause?

medium

A. You forgot to import React

B. JavaScript syntax error in your code

C. The native module is not properly linked or registered

D. You used the wrong variable name for NativeModules

Solution

1. Step 1: Analyze the error message

   The error says the function does not exist on the native module object.

2. Step 2: Understand native module linking

   If the native module is not linked or registered correctly, its functions won't be available in JavaScript.

3. Final Answer:

   The native module is not properly linked or registered -> Option C

4. Quick Check:

   Linking issues cause missing native functions [OK]

Hint: Check native module linking if functions missing [OK]

Common Mistakes:

• Assuming import errors cause this
• Ignoring native build steps
• Confusing variable names with linking problems

5. You want to create a React Native app that uses a native module to access the phone's biometric sensor for fingerprint authentication. Which of the following is the best approach?

hard

A. Write all biometric code in JavaScript without native modules

B. Use a native module to connect JavaScript with the platform's biometric API

C. Use only React Native UI components without any native code

D. Use a web API inside a WebView for biometric access

Solution

1. Step 1: Identify biometric sensor access needs

   Biometric sensors require native platform APIs not accessible directly from JavaScript.

2. Step 2: Choose the correct integration method

   Native modules bridge JavaScript with native biometric APIs for secure and efficient access.

3. Step 3: Evaluate other options

   JavaScript alone or WebView cannot access biometric hardware securely or at all.

4. Final Answer:

   Use a native module to connect JavaScript with the platform's biometric API -> Option B

5. Quick Check:

   Native modules enable hardware access [OK]

Hint: Use native modules for hardware features like biometrics [OK]

Common Mistakes:

• Trying to access hardware only with JavaScript
• Ignoring security and platform API requirements
• Using WebView for native hardware access