Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


    ​ # React-Native Cordova Plugin Adapter

    A way to use Cordova plugins in React-Native Applications


    The Cordova plugin ecosystem is diverse and rich. Many native device capabilities are already available as a plugin with a W3C like Javascript API in most cases. Using them to access native capabilities from React Native can be done using Cordova plugins without having to rewrite all those plugins.


    To start using Cordova Plugins in your ReactNative project, follow these steps

    1. Getting Started
    2. Setup your ReactNative project with this react-native-cordova-plugin module.
    3. Add/Removing the required Cordova Plugin to the ReactNative project. (link)
    4. Use the required Cordova Plugin in your ReactNative Javascript code. (link)

    You can also check out the example project in the example branch of this repository.

    Step 0 - Getting Started

    First, Install this native module in your ReactNative project by running the following at the root of your ReactNative Project.

    npm install react-native-cordova-plugin --save

    Step 1 - Setup the ReactNative project

    As with all other React Native plugins, the integration experience is different for iOS and Android, so perform the next set of setup steps depending on which platform(s) you are targetting.

    Step 1.1 For Anrdoid

    1. In android/settings.gradle file, make the following changes
      include ':app'
    + include ':cordovaplugin'
    + project(':cordovaplugin').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-cordova-plugin/framework/android')
    1. In android/app/build.gradle, look for dependencies section and add the following line
    android {
    dependencies {
        compile fileTree(dir: 'libs', include: ['*.jar'])
        compile ""
        compile "com.facebook.react:react-native:+"  // From node_modules    ...
    +   compile project(':cordovaplugin')
    1. In android/app/src/main/java/com/appname/ (your main Android activity file), add a reference to react-native-cordova-plugin.
    +  import io.cordova.reactnative.CordovaPluginPackage;
    public class MainActivity extends ReactActivity {
         protected List<ReactPackage> getPackages() {
             return Arrays.<ReactPackage>asList(
                     new MainReactPackage(),
    +                cordovaPluginPackage = new CordovaPluginPackage(this)
    +    private CordovaPluginPackage cordovaPluginPackage;
    +    @Override
    +    protected void onCreate(Bundle savedInstanceState) {
    +        super.onCreate(savedInstanceState);
    +        cordovaPluginPackage.setSavedInstanceState(savedInstanceState);
    +    }
    +    @Override
    +    public void onActivityResult(int requestCode, int resultCode, Intent intent) {
    +        super.onActivityResult(requestCode, resultCode, intent);
    +        cordovaPluginPackage.onActivityResult(requestCode, resultCode, intent);
    +    }

    Step 3 - Adding Cordova Plugin to ReactNative project

    To install a plugin, say the cordova-plugin-camera and cordova-plugin-contacts, run the following command from the root of your ReactNative project

    $ node_modules/.bin/react-native-cordova-plugin add cordova-plugin-camera cordova-plugin-contacts

    The add command takes one of more Cordova plugins that can be added to the project. To remove a plugin, use

    $ node_modules/.bin/react-native-cordova-plugin rm cordova-plugin-contacts

    Step 4 - Using the Plugins

    In either or any other component, simply require this module using

    var Cordova = require('react-native-cordova-plugin');

    In Cordova, all plugin methods are available on the window object. ReactNative does not run in a WebView and does not have a window object. Thus, all the methods and constants that a Cordova plugin defines are available in the Cordova object that was just required using the statement above., onFail, {sourceType: Cordova.Camera.PictureSourceType.SAVEDPHOTOALBUM)}); 
    // Listen to cordova-plugin-network-information plugin's events 
    Cordova.addEventListener('offline', onEvent);

    There are more examples of using the plugins in the examples branch - look for files with plugin names.

    Older Versions

    To run this plugin for older versions of ReactNative, use older versions published on npm

    • 0.14 to 0.17: react-native-cordova-plugin@0.0.9
    • 0.18 and above: Latest published on npm


    Some JavaScript errors may be caused due to the way cordova.js is generated. You can try tto re-generate cordova.js using

    $ node_modules/.bin/react-native-cordova-plugin repair

    If that does not work, try cleaning all the cordova plugins using the following, and then add the plugins again

    $ node_modules/.bin/react-native-cordova-plugin clean

    If none of these work, please open an issue with a prefix [QUESTION] in the title, and I could try helping you. It would help to open the issue with a reduced way to reproduce the error.




    npm i react-native-cordova-plugin

    Downloadslast 7 days







    last publish


    • avatar