React Native Pt. III: Native Modules
- React Native Pt. I: Getting Started
- React Native Pt. II: Project File Structure and Concepts Explained
- React Native Pt. III: Native Modules
- React Native Pt. IV: 3rd Party Integrations
- Common Issues
Native modules allow your React Native application to access native code. This is mostly used for platform specific APIs that are not built out in React Native. These modules allow you to implement your own code, or external packages made available by other developers (npm packages). This guide will walk through the Toast example that is given in the React Native documents. I will attempt to be a little more granular than those docs, as I hit some bumps during the integration.
Native Module Setup
The easiest way to get started with native modules is to use the nifty
react-native-create-library tool. Details on the tool can be found here, but in short it creates all of the files and directories you need to get started with building your own module. We can use the following commands to install the tool globally and the run the command where you want your module directory to be created.
npm install -g react-native-create-library
You should now have a basic native module in it’s own directory that looks like the following.
You can now
cd into that directory and run
npm install to pull in all dependencies this package requires. Next we will add some code into the module that will allow you to use the native Android Toast feature.
Building the Toast Module and Package
In the screenshot above, you can see module and package files in the directory
ToastLibrary/android/src/main/java/com/reactlibrary, but we will create our own native module,
ToastModule.java, and register it as a package,
ToastPackage.java. All native modules extend
show method used by Toast. Along with this, we need the required
getName() method that returns the name of the native module. Your code should look similar to the following
show method may look different for you (you may also take in toast length as a parameter for example), but this shows the most basic setup. Be sure to include the
@ReactMethod annotation over the
ReactPackage and looks like the following.
Lastly, we add this line to the
module.exports = NativeModules.ToastModule;
Configuring the App
To finish up our Toast module integration, we need to make some changes to our HelloWorld app and pull in the package for use. First, you need to add the Toast module you just created as a dependency within your apps
package.json file. Since this module is local (and not in the npm registry) your dependency will have a directory listed instead of a version.
After this has been added, you need to install and link the dependency to your project by running these commands.
Now, open up your
MainApplication.java file within the
HelloWorld/android/src/main/java/com/helloworld directory and add your ToastPackage to the
ReactPackage array in the
getPackages() method. Be sure to import the package as well.
show method. Updating our
App.js file from earlier in the series would look like this
That’s it! You should be able to run your app and see a toast when the Switch button is pressed.