Create React Native modules

Updated on 21 Mar 2024
1 Minute to read

Print
Share
Dark
Light
PDF

Article summary

Did you find this summary helpful?

Thank you for your feedback

Note

In this guide, “React Native” refers to Universal React Native Apps, built with:

React Native and Native Code on mobile platforms.
React Native and React Native for Web on the web.

Guidelines

React guidelines

Prefer	Over
function components	class components
React Hooks	React.component APIs
react-redux Hooks	connect HOC
redux-toolkit	custom redux logic setups
redux-thunk	edux-saga
pure components

General guidelines

Prefer included libraries over adding extra dependencies
Test your code. Add unit tests and integration tests, when appropriate
Avoid “magic” values. Make your software easy to change and configure.
Expose module configuration using module options.
Add detailed documentation to the README file for your module.
Make your module cross-platform. (Refer to Platform-specific module code.)

Creating a React Native module

cb create --name example --type react-native

The following files are generated:

react-native-example/
├── index.js
├── meta.json
└── package.json

Files

`meta.json`

This file holds the metadata for the module and includes the root specifier to identify where the module will be installed.

{  "title": "example",  "description": "",  "root": "/backend/modules",  "schema": {} }

Note

The meta.json file should always be in the root of the module folder. This file is not installed in an app. The meta.json file is the main configuration mechanism where you configure options such as names, titles, and root paths.

`package.json`

In this file you add npm dependencies to your module. You can include packages that are not included in the initial scaffold. Install the file in one of the following locations in your module directory:

/modules
/components
/screens

Examples

The following is the package.json file for the react-native-app-menu module from our Public catalog.
This module has a name, a description, and no dependencies.

{
  "name": "@modules/app-menu",
  "version": "1.0.0",
  "description": "Module that shows available routes in a menu with links",
  "private": true,
  "main": "index.js",
  "author": "Crowdbotics"
}

The following is the package.json file for the react-native-camera module from our public Public catalog.
This is an example of a module with dependencies.

{
    "name": "@modules/camera",
    "version": "1.0.1",
    "description": "Camera Module",
    "private": true,
    "main": "index.js",
    "author": "Crowdbotics",
    "license": "ISC",
    "dependencies": {
        "react-native-actionsheet": "^2.4.2"
    },
    "x-dependencies": {
        "react-native-image-crop-picker": "0.36.2",
        "react-native-permissions": "3.0.4"
    }
}