usabilla-react-native0.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:
- In a terminal window, navigate to the root directory of your project and run :
npm install usabilla-react-native
yarn add usabilla-react-native
- To link the bridge to your project:
react-native link usabilla-react-native
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"
In your iOS project go to
Framework Search Pathsand add :
Build Phasescreate a
New Copy Files Phase
- Setup Destination to Frameworks.
- Drag and drop the
ReactNativeUsabilla/Frameworksand 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
- Make sure that your
- In case of compilation problems in Android Studio, set the
compileSdkVersionin the app module
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
errorcontaining a text explaining what happened
NOTE: Usabilla provides a standard callback for showing a successfully fetched form with the method
[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:
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 firstname.lastname@example.org