React Native

Installation
1
npm install @gistproduct/react-native
Copied!
Open the build.gradle file located inside the android directory and add the Gist maven repository.
1
allprojects {
2
    repositories {
3
        ...
4
        maven { url 'https://maven.gist.build' }
5
    }
6
}
Copied!
Link the Gist pod with react native project
1
npx pod-install
Copied!
Setup
1
import Gist from '@gistproduct/react-native';
Copied!
Gist can be initialized anywhere within your app, the organizationId property can be retrieved from the Gist dashboard.
1
Gist.setup("your-organization-id");
Copied!
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.
1
Gist.setUserToken("unique-user-token");
Copied!
To clear the user token:
1
Gist.clearUserToken()
Copied!
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:
1
Gist.setCurrentRoute("users/home");
Copied!
Broadcasts
Broadcasts enable you to receive messages based on topics the client is subscribed to.
Subscribing
1
Gist.subscribeToTopic("announcements")
Copied!
Unsubscribing
1
Gist.unsubscribeFromTopic("announcements")
Copied!
Clear All Topics
1
Gist.clearTopics()
Copied!
Event Handling
1
const eventEmitter = new NativeEventEmitter(NativeModules.GistEventEmitter);
2
​
3
eventEmitter.addListener('onMessageShown', (message) => {
4
  console.log("Gist onMessageShown:");
5
  console.log(message.messageId);
6
});
7
​
8
eventEmitter.addListener('onMessageDismissed', (message) => {
9
  console.log("Gist onMessageDismissed:");
10
  console.log(message.messageId);
11
});
12
​
13
eventEmitter.addListener('onAction', (event) => {
14
  console.log("Gist onAction:");
15
  console.log(event.messageId);
16
  console.log(event.action);
17
  console.log(event.currentRoute);
18
});
19
​
20
eventEmitter.addListener('onError', (message) => {
21
  console.log("Gist onError:");
22
  console.log(message.messageId);
23
});
Copied!
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.

Guides - Previous

Google Tag Manager

Next - Libraries

Web

Last modified 1mo ago

Copy link

Contents