creating module for react-native

The module is a very important thing in our development, By using module we split our problems into many parts or we can generalize our problems into a specific form. In this blog, I will focus on how to create a module in the react-native project and how to implement it on our existing project manually.

Native Module Setup

Native modules are usually distributed as npm packages, apart from the typical javascript files and resources they will contain an Android library project. This project is, from NPM’s perspective similar to any other media asset, meaning there isn’t anything unique about it from this point of view.

React native Community recommends us the third party tool library to create a basic structure of module without any worry for module structure.

Library Name– “create-react-native-module”

Installation-

Requirements: Node 8.0+

Packages required to be installed globally if the recommended example app is generated:

React Native CLI installation –

$ npm install -g react-native-cli yarn

1	$ npm install -g react-native-cli yarn

To install this tool package-

$ npm install -g create-react-native-module

1	$ npm install -g create-react-native-module

Creating a module by using this tool-

$ create-react-native-module MobikulToast

1	$ create-react-native-module MobikulToast

This will create the folder react-native-mobikul-toast in which the library will be created in.

Now install dependencies by running this command in the newly created library.

npm install

1	npm install

How to look its folder structure-

Options with creating modules by this tool-

Usage: create-react-native-module [options] <name>

Options:

  -V, --version                             output the version number
  --prefix <prefix>                         The prefix for the library module (Default: ``)
  --module-name <moduleName>                The module library package name to be used in package.json. Default: react-native-(name in param-case)
  --module-prefix <modulePrefix>            The module prefix for the library module, ignored if --module-name is specified (Default: `react-native`)
  --package-identifier <packageIdentifier>  [Android] The Java package identifier used by the Android module (Default: `com.reactlibrary`)
  --platforms <platforms>                   Platforms the library module will be created for - comma separated (Default: `ios,android`)
  --tvos-enabled                            Generate the module with tvOS build enabled (requires react-native-tvos fork, with minimum version of 0.60, and iOS platform to be enabled)
  --github-account <githubAccount>          The github account where the library module is hosted (Default: `github_account`)
  --author-name <authorName>                The author's name (Default: `Your Name`)
  --author-email <authorEmail>              The author's email (Default: `yourname@email.com`)
  --license <license>                       The license type (Default: `MIT`)
  --view                                    Generate the module as a very simple native view component
  --use-apple-networking                    [iOS] Use `AFNetworking` dependency as a sample in the podspec & use it from the iOS code
  --generate-example                        Generate an example project and links the library module to it, requires both react-native-cli and yarn to be installed globally
  --example-name <exampleName>              Name for the example project (default: `example`)
  --example-react-native-version <version>  React Native version for the generated example project (default: `react-native@0.59`)
  --write-example-podfile                   [iOS] EXPERIMENTAL FEATURE NOT SUPPORTED: write (or overwrite) example ios/Podfile
  -h, --help                                output usage information

Usage: create-react-native-module [options] <name>

Options:

-V, --version output the version number

--prefix <prefix> The prefix for the library module (Default: ``)

--module-name <moduleName> The module library package name to be used in package.json. Default: react-native-(name in param-case)

--module-prefix <modulePrefix> The module prefix for the library module, ignored if --module-name is specified (Default: `react-native`)

--package-identifier <packageIdentifier> [Android] The Java package identifier used by the Android module (Default: `com.reactlibrary`)

--platforms <platforms> Platforms the library module will be created for - comma separated (Default: `ios,android`)

--tvos-enabled Generate the module with tvOS build enabled (requires react-native-tvos fork, with minimum version of 0.60, and iOS platform to be enabled)

--github-account <githubAccount> The github account where the library module is hosted (Default: `github_account`)

--author-name <authorName> The author's name (Default: `Your Name`)

--author-email <authorEmail> The author's email (Default: `yourname@email.com`)

--license <license> The license type (Default: `MIT`)

--view Generate the module as a very simple native view component

--use-apple-networking [iOS] Use `AFNetworking` dependency as a sample in the podspec & use it from the iOS code

--generate-example Generate an example project and links the library module to it, requires both react-native-cli and yarn to be installed globally

--example-name <exampleName> Name for the example project (default: `example`)

--example-react-native-version <version> React Native version for the generated example project (default: `react-native@0.59`)

--write-example-podfile [iOS] EXPERIMENTAL FEATURE NOT SUPPORTED: write (or overwrite) example ios/Podfile

-h, --help output usage information

The alternative of this tool-

After this, we will be able to continue to Native Modules (iOS) or Native Modules (Android) to add in some code. Make sure to read the README.md within our MobikulToast Directory for platform-specific instructions on how to include the project.

How to use this module in our existing Applications?

We can use this library via uploading on npm server and then install it like other library-

npm install react-native-mobikul-toast

1	npm install react-native-mobikul-toast

or we can use manually- For manual use follow the following process.

We need to add our “react-native-mobikul-toast” module folder to node_modules.

For Android Setup-

Include our module setup in our setting.gradle file as like another npm library

include ':react-native-mobikul-toast'
project(':react-native-mobikul-toast').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-mobikul-toast/android')

1 2	include ':react-native-mobikul-toast' project(':react-native-mobikul-toast').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-mobikul-toast/android')

Add module dependency in our app-level build.gradle file

implementation project (':react-native-mobikul-toast')

1	implementation project (':react-native-mobikul-toast')

For iOS Setup-

Add this module dependency in our existing project Podfile in iOS application

  pod 'react-native-mobikul-toast', :path => '../node_modules/react-native-mobikul-toast'

1	pod 'react-native-mobikul-toast', :path => '../node_modules/react-native-mobikul-toast'

This is all my prospect to create a module and how to use our module to our existing Application. If you have any queries for this blog please comment.

NOTE- I will explain how to use library functions for our application in my next blog. It will come soon and link provides in this blog.

Thanks for reading my blog.

References-
https://github.com/brodybits/create-react-native-module

https://facebook.github.io/react-native/docs/getting-started