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

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.
Last modified 1mo ago