Linking native libraries in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a native module in React Native.

React Native

import [1] from 'react-native';

Drag options to blanks, or click blank then click option'

ANativeModules

BNativeModule

CNativeModuleManager

DNativeModuleLoader

Attempts:

3 left

💡 Hint

Common Mistakes

Using singular form like NativeModule.

Using incorrect names like NativeModuleManager.

The correct import to access native modules in React Native is NativeModules from 'react-native'.

2fill in blank

medium

Complete the code to access a native module named 'CalendarManager'.

React Native

const calendar = NativeModules.[1];

Drag options to blanks, or click blank then click option'

ACalendarManager

BcalendarManager

CCalendar_Module

Dcalendar_module

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase or snake_case names.

Adding extra underscores or suffixes.

Native module names are case sensitive and usually use PascalCase. The correct name is CalendarManager.

3fill in blank

hard

Fix the error in the code to call a native method 'addEvent' with parameters.

React Native

calendar.[1]('Birthday Party', '2024-07-01', (error, eventId) => {
  if (error) {
    console.error(error);
  } else {
    console.log('Event ID:', eventId);
  }
});

Drag options to blanks, or click blank then click option'

AAddEvent

BaddEvent

Caddevent

Dadd_event

Attempts:

3 left

💡 Hint

Common Mistakes

Using capitalized or snake_case method names.

Misspelling the method name.

Native method names are case sensitive and usually camelCase. The correct method name is addEvent.

4fill in blank

hard

Fill both blanks to correctly link a native library in React Native's Android build.gradle file.

React Native

implementation project(':[1]')
apply from: '../../node_modules/react-native/[2].gradle'

Drag options to blanks, or click blank then click option'

Amylibrary

Breact.gradle

Cnative-library

Dnative.gradle

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect project names or gradle script names.

Confusing gradle script with library name.

The native library name in settings.gradle and build.gradle is usually the project name like mylibrary. The gradle script applied is react.gradle from react-native node_modules.

5fill in blank

hard

Fill all three blanks to correctly link a native iOS library in Podfile.

React Native

pod '[1]', :path => '../node_modules/[2]'

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == '[3]'
      target.build_configurations.each do |config|
        config.build_settings['ENABLE_BITCODE'] = 'NO'
      end
    end
  end
end

Drag options to blanks, or click blank then click option'

ARNMyLibrary

Brn-my-library

Attempts:

3 left

💡 Hint

Common Mistakes

Using inconsistent names between pod, path, and target.

Using wrong casing or underscores.

The pod name is usually PascalCase like RNMyLibrary. The path uses the npm package folder name rn-my-library. The target name matches the pod name RNMyLibrary.