Gist
Search
⌃K

React Native

Our React Native library wraps around the native iOS & Android libraries

Installation

npm install @gistproduct/react-native
Open the build.gradle file located inside the android directory and add the Gist maven repository.
allprojects {
repositories {
...
maven { url 'https://maven.gist.build' }
}
}
Link the Gist pod with react native project
npx pod-install

Setup

import Gist from '@gistproduct/react-native';
Gist can be initialized anywhere within your app, the organizationId property can be retrieved from the Gist dashboard.
Gist.setup("your-organization-id");

User Token

If your app is relying on Gist’s webhook service to trigger in-app messages, a user token must be set. This user token should be generated by your services and set at any point during runtime, for example, login or registration.
Gist.setUserToken("unique-user-token");
To clear the user token:
Gist.clearUserToken();

Current Route

Gist is able to show messages when a user reaches a particular route within your product. This is completely optional but messages containing route rules will not be displayed unless the route matches.
In your route handler add:
Gist.setCurrentRoute("users/home");

Broadcasts

Broadcasts enable you to receive messages based on topics the client is subscribed to.

Subscribing

Gist.subscribeToTopic("announcements");

Unsubscribing

Gist.unsubscribeFromTopic("announcements");

Clear All Topics

Gist.clearTopics();

Event Handling

const eventEmitter = new NativeEventEmitter(NativeModules.GistEventEmitter);
eventEmitter.addListener('onMessageShown', (message) => {
console.log("Gist onMessageShown:");
console.log(message.messageId);
});
eventEmitter.addListener('onMessageDismissed', (message) => {
console.log("Gist onMessageDismissed:");
console.log(message.messageId);
});
eventEmitter.addListener('onAction', (event) => {
console.log("Gist onAction:");
console.log(event.messageId);
console.log(event.action);
console.log(event.currentRoute);
});
eventEmitter.addListener('onError', (message) => {
console.log("Gist onError:");
console.log(message.messageId);
});

Messages

To programmatically dismiss messages Gist.dismissMessage() can be used to dismiss any active modal message being displayed.

Important

The current React Native implementation doesn't support message embedding or manual triggering of Gist messages, these features will be available at a later date.