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 –
|
1 |
$ npm install -g react-native-cli yarn |
To install this tool package-
|
1 |
$ npm install -g create-react-native-module |
Creating a module by using this tool-
|
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.
|
1 |
npm install |
How to look its folder structure-
Options with creating modules by this tool-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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-
|
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
|
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
|
1 |
implementation project (':react-native-mobikul-toast') |
For iOS Setup-
Add this module dependency in our existing project Podfile in iOS application
|
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
Be the first to comment.