Nocturnally Psychologizing Millipede


Don't miss out on this year's npm Pride t-shirt designs!Order your favorites here »


0.8.0 • Public • Published


Usabilla for React Native

Usabilla for Apps allows you to collect feedback from your users with great ease and flexibility. This React Native bridge to the Native Usabilla SDK allows you to load passive feedback forms and submit results from a React Native app.


To install the Usabilla SDK into your React Native Application:

  1. In a terminal window, navigate to the root directory of your project and run :
npm install usabilla-react-native


yarn add usabilla-react-native
  1. To link the bridge to your project:
react-native link usabilla-react-native

Additional setup


  1. The native Usabilla SDK is written in Swift, So make sure that your iOS Project contains a Bridging-Header file or add one. The default project created by react-native will not create this. To have XCode create the bridge-header automatically, open the ios-project in XCode:

    • select "New File"
    • select "Swift file"
    • save it with any name, as its not being used
    • choose "Create Bridging Header"

  2. In your iOS project go to Build Settings -> Framework Search Paths and add : $(SRCROOT)/../node_modules/usabilla-react-native/ios

  3. In Build Phases create a New Copy Files Phase

  • Setup Destination to Frameworks.
  • Drag and drop the Usabilla.framework from ReactNativeUsabilla/Frameworks and check the code sign on copy.
  • Make sure that You set Destination to "Frameworks"

The project can now be compiled without any errors related to Usabilla SDK


  1. Make sure that your extends ReactFragmentActivity
  2. In case of compilation problems in Android Studio, set the compileSdkVersion in the app module build.gradle to 26


This version of the react native bridge works with the latest release of XCode 9.3. In order to use this bridge with older XCode versions please use the package version @0.5.3 or less.


You can start using the Usabilla for React Native module in your app by requiring:

const usabilla = require('usabilla-react-native')

Load a Passive Feedback form

In order to load a Passive Feedback form with the Usabilla library you need to call:


This method only performs the call to fetch the Passive Feedback form and in order to handle its response there are two methods available:

  • usabilla.setFormDidLoadSuccessfully(usabilla.showLoadedForm()): Sets the callback to execute when the form is fetched successfully
  • usabilla.setFormDidFailLoading((error) => console.log(error)): Sets the callback to execute when the form fails to be fetched. This callback has a parameter error containing a text explaining what happened

NOTE: Usabilla provides a standard callback for showing a successfully fetched form with the method usabilla.showLoadedForm()

[iOS ONLY]: When a user submits or closes the form, it is possible to get a callback containing information about the submission using the method:

usabilla.setFormDidClose((reminder) => console.log(reminder))

This callback has a parameter containing the information:

  • formId (string)
  • isRedirectToAppStoreEnabled (boolean)

Pre-fill a Passive Feedback form with a custom screenshot

Usabilla for React Native allows you to attach a screenshot to a form before sending it by calling:


This method will take a screenshot of the current visible view and pre-fill the form with it.

Submit the results of the form

This functionality is embedded in the native Usabilla library and there is no need to perform any specific action from the React Native environment.

Support for custom variables

In order to set custom variables in the Usabilla native library it's necessary to call the method:


This method accepts as parameter a valid JSON object with two limitations:

  • Arrays should only contain same type components.
  • Objects can be nested up to one level (currently undergoing work to enable deeper nesting).

NOTE: Feedback sent without respecting those limitations will still be received and saved, but the values of the customer input context won't be displayed nor exported.


In order to be able to run campaigns in your app, you should first start by initializing the SDK:


This call loads and updates all your campaigns locally and you can start targeting them by sending events from your app using the method:


The Usabilla SDK allows you to reset all the campaign data by calling:

Android: usabilla.resetCampaignData()

iOS: usabilla.resetCampaignData(callback) , the callback here lets you know when the reset is done.


Usabilla For React Native is maintained by the Usabilla Development Team. Everyone is encouraged to file bug reports, feature requests, and pull requests through GitHub. This input is critical and will be carefully considered, but we cannot promise a specific resolution or time frame for your request. For more information please email our Support Team at


npm i usabilla-react-native

Downloadsweekly downloads









last publish


  • avatar
  • avatar
Report a vulnerability