Native modules – react native development

You may no find so easy this chapter in react native and because I had this problem I want to share my experience. There are a lot of libraries for react native so before you start a project you can take a look here. Native modules for react-native can be sometimes deprecated and you need to check first if the module is still up to date, if not there is another solution like refactoring or create a new one.

One tool that we need is react-native-create-library and needs to be installed globally with npm install -g react-native-create-library or, yarn add -g react-native-create-library also, you can find some useful docs on Github

“Native modules are usually distributed as npm packages, apart from the typical javascript files and resources they will contain an Android library project.” So let’s create this npm package with the tool installed before: react-native-create-library myLib, then cd myLib and run npm install. With those we created the native module structure, the next step is to add native code in the android/ios/windows folder.

An example can be to add a method for android to show the call logs:

Add local dependency

Our next step is to link our native module to package.json in order to have access on what we wrote, open your installed react-native project and create a folder named ‘native’ then copy your native module in the folder created. The next step is to add our dependency in package.json with a file because we link the package from a local project.

Run yarn install or npm install to install all our dependencies and navigate to node_modules and look for your native modules if exists.

To use the code from the native module don’t forget to check README.MD file from the module, there are instructions of how to use it in your react-native project. One more important step after you installed the module with yarn install is to create the symlink with react-native link .

Check out how to set up redux for react native if you use state management for your application or add some rules for formatting your code. Check my updates on Twitter!

Sharing is caring!