|
1 |
| -This section describes the process of integrating the DevRev SDK with your React Native Expo app. |
| 1 | +# DevRev SDK for React Native (Expo) |
2 | 2 |
|
3 |
| -## Prerequisites |
| 3 | +This section provides documentation for integrating and using the DevRev SDK in your React Native Expo app. |
4 | 4 |
|
5 |
| -Ensure you have the following installed: |
6 |
| -- `expo` (any version) |
7 |
| -- `react-native` (compatible with Expo version) |
8 |
| -- `@devrev/sdk-react-native` (version 1.0.2 or higher) |
| 5 | +## Documentation Sections |
9 | 6 |
|
10 |
| -## Installation |
11 |
| - |
12 |
| -1. Install the Expo config plugin: |
13 |
| -```bash |
14 |
| -npx expo install @devrev/sdk-react-native-expo-plugin |
15 |
| -``` |
16 |
| - |
17 |
| -2. Configure the plugin in your `app.json` or `app.config.js`: |
18 |
| -```json |
19 |
| -{ |
20 |
| - "expo": { |
21 |
| - "plugins": [ |
22 |
| - "@devrev/sdk-react-native-expo-plugin" |
23 |
| - ] |
24 |
| - } |
25 |
| -} |
26 |
| -``` |
27 |
| - |
28 |
| -3. Rebuild your app: |
29 |
| -```bash |
30 |
| -npx expo prebuild --clean |
31 |
| -``` |
32 |
| - |
33 |
| -## Setting up the DevRev SDK |
34 |
| - |
35 |
| -### Step 1: Credentials |
36 |
| - |
37 |
| -1. Open the DevRev web app at [https://app.devrev.ai](https://app.devrev.ai). |
38 |
| -2. Navigate to the **Settings** page. |
39 |
| -3. Open the **PLuG Settings** page and copy the value under **Your Unique App ID**. |
40 |
| - |
41 |
| -### Step 2: Configuration |
42 |
| - |
43 |
| -<Callout intent="note"> |
44 |
| -The SDK must be configured before you can use any of its features. |
45 |
| -</Callout> |
46 |
| - |
47 |
| -Once you have the credentials, configure the DevRev SDK in your app. The SDK will be ready to use after calling the configuration method: |
48 |
| - |
49 |
| -```typescript |
50 |
| -DevRevSDK.configure(appID: string) |
51 |
| -``` |
52 |
| - |
53 |
| -## Features |
54 |
| - |
55 |
| -### Identification |
56 |
| - |
57 |
| -Certain features of the DevRev SDK require user identification. You can identify users in the following ways: |
58 |
| -- **Anonymous users**: Creates an anonymous user with an optional user identifier. |
59 |
| -- **Unverified users**: Identifies the user with a unique identifier but does not verify the user's identity with the DevRev backend. |
60 |
| -- **Verified users**: Identifies the user with a unique identifier and verifies their identity with the DevRev backend. |
61 |
| - |
62 |
| -The identification functions should be placed appropriately in your app after the user logs in. If you have the user information at app launch, call the function after the `DevRevSDK.configure(appID:)` method. |
63 |
| - |
64 |
| -<Callout intent="note"> |
65 |
| -If you haven't previously identified the user, the DevRev SDK will automatically create an anonymous user for you immediately after the SDK is configured. |
66 |
| -</Callout> |
67 |
| - |
68 |
| -<Callout intent="note"> |
69 |
| -The `Identity` structure allows for custom fields in the user, organization, and account traits. These fields must be configured through the DevRev app before they can be utilized. For more information, refer to [Object customization](https://devrev.ai/docs/product/object-customization). |
70 |
| -</Callout> |
71 |
| - |
72 |
| -#### Anonymous identification |
73 |
| - |
74 |
| -The anonymous identification method creates an anonymous user with an optional user identifier. |
75 |
| - |
76 |
| -```typescript |
77 |
| -DevRevSDK.identifyAnonymousUser(userID: string) |
78 |
| -``` |
79 |
| - |
80 |
| -#### Unverified identification |
81 |
| - |
82 |
| -The unverified identification method identifies the user with a unique identifier but does not verify their identity with the DevRev backend. |
83 |
| - |
84 |
| -```typescript |
85 |
| -DevRevSDK.identifyUnverifiedUser(userID: string, organizationID?: string) |
86 |
| -``` |
87 |
| - |
88 |
| -#### Verified identification |
89 |
| - |
90 |
| -The verified identification method identifies the user with a unique identifier and verifies their identity with the DevRev backend. |
91 |
| - |
92 |
| -```typescript |
93 |
| -DevRevSDK.identifyVerifiedUser(userID: string, sessionToken: string) |
94 |
| -``` |
95 |
| - |
96 |
| -#### Updating the user |
97 |
| - |
98 |
| -You can update the user's information using the following method: |
99 |
| - |
100 |
| -```typescript |
101 |
| -DevRevSDK.updateUser(identity: Identity) |
102 |
| -``` |
103 |
| - |
104 |
| -<Callout intent="note"> |
105 |
| -The `userID` property cannot be updated. |
106 |
| -</Callout> |
107 |
| - |
108 |
| -### PLuG support chat |
109 |
| - |
110 |
| -The support chat feature can be shown as a modal screen from the top-most screen. |
111 |
| - |
112 |
| -<Callout intent="note"> |
113 |
| -This feature requires the SDK to be configured and the user to be identified (unverified or anonymous users). |
114 |
| -</Callout> |
115 |
| - |
116 |
| -```typescript |
117 |
| -DevRevSDK.showSupport() |
118 |
| -``` |
119 |
| - |
120 |
| -#### Creating a new support conversation |
121 |
| - |
122 |
| -You can create a new conversation directly from your app. This method displays the support chat screen and simultaneously creates a new conversation. |
123 |
| - |
124 |
| -```typescript |
125 |
| -DevRevSDK.createSupportConversation() |
126 |
| -``` |
127 |
| - |
128 |
| -## In-app link handling |
129 |
| - |
130 |
| -The DevRev SDK provides a mechanism to handle links opened from within any screen that is part of the DevRev SDK. |
131 |
| - |
132 |
| -You can fully customize the link handling behavior by setting the specialized in-app link handler. That way you can decide what should happen when a link is opened from within the app. |
133 |
| - |
134 |
| -<Callout intent="note"> |
135 |
| -This feature is for Android only. |
136 |
| -</Callout> |
137 |
| - |
138 |
| -```typescript |
139 |
| -DevRevSDK.setInAppLinkHandler((url) => { |
140 |
| - // Perform an action here. |
141 |
| -}); |
142 |
| -``` |
143 |
| - |
144 |
| -You can further customize the behavior by setting the `setShouldDismissModalsOnOpenLink` boolean flag. This flag controls whether the DevRev SDK should dismiss the top-most modal screen when a link is opened. |
145 |
| - |
146 |
| -```typescript |
147 |
| -DevRevSDK.setShouldDismissModalsOnOpenLink(value: boolean) |
148 |
| -``` |
149 |
| - |
150 |
| -### Analytics |
151 |
| - |
152 |
| -The DevRev SDK supports sending custom analytic events using a properties map. |
153 |
| - |
154 |
| -<Callout intent="note"> |
155 |
| -This feature requires the SDK to be configured and the user to be identified (unverified or anonymous users). |
156 |
| -</Callout> |
157 |
| - |
158 |
| -```typescript |
159 |
| -DevRevSDK.trackEvent(name: string, properties?: Map<string, string>) |
160 |
| -``` |
161 |
| - |
162 |
| -### Observability |
163 |
| - |
164 |
| -The DevRev SDK provides observability features to help you understand how users interact with your app. |
165 |
| - |
166 |
| -#### Opting in/out |
167 |
| - |
168 |
| -Observability features are opted-in by default. You can opt-out by calling the following method: |
169 |
| - |
170 |
| -```typescript |
171 |
| -DevRevSDK.stopAllMonitoring() |
172 |
| -``` |
173 |
| - |
174 |
| -To opt back in, use the following method: |
175 |
| - |
176 |
| -```typescript |
177 |
| -DevRevSDK.resumeAllMonitoring() |
178 |
| -``` |
179 |
| - |
180 |
| -#### Session recording |
181 |
| - |
182 |
| -You can enable session recording to capture user interactions with your app. |
183 |
| - |
184 |
| -<Callout intent="note"> |
185 |
| -The session recording feature is opt-out and is enabled by default. |
186 |
| -</Callout> |
187 |
| - |
188 |
| -The session recording feature includes the following methods: |
189 |
| - |
190 |
| -- `DevRevSDK.startRecording()`: Starts the session recording. |
191 |
| -- `DevRevSDK.stopRecording()`: Stops the session recording and uploads it to the portal. |
192 |
| -- `DevRevSDK.pauseRecording()`: Pauses the ongoing session recording. |
193 |
| -- `DevRevSDK.resumeRecording()`: Resumes a paused session recording. |
194 |
| -- `DevRevSDK.processAllOnDemandSessions()`: Stops the ongoing session recording and uploads all offline sessions on demand. |
195 |
| - |
196 |
| -#### Session properties |
197 |
| - |
198 |
| -You can add custom properties to the session recording to help you understand the context of the session. The properties are defined as a map of string values. |
199 |
| - |
200 |
| -```typescript |
201 |
| -DevRevSDK.addSessionProperties(properties: Map<string, string>) |
202 |
| -``` |
203 |
| - |
204 |
| -To clear the session properties, use the following method: |
205 |
| - |
206 |
| -```typescript |
207 |
| -DevRevSDK.clearSessionProperties() |
208 |
| -``` |
209 |
| - |
210 |
| -#### Masking sensitive data |
211 |
| - |
212 |
| -To protect sensitive data, the DevRev SDK provides an auto-masking feature that masks data before sending it to the server. Input views such as text fields, text views, and web views are automatically masked. |
213 |
| - |
214 |
| -You can manually mark additional views as sensitive using the following method: |
215 |
| - |
216 |
| -```typescript |
217 |
| -DevRevSDK.markSensitiveViews(tags: any[]) |
218 |
| -``` |
219 |
| - |
220 |
| -If any previously masked views need to be unmasked, use the following method: |
221 |
| - |
222 |
| -```typescript |
223 |
| -DevRevSDK.unmarkSensitiveViews(tags: any[]) |
224 |
| -``` |
225 |
| - |
226 |
| -#### Timers |
227 |
| - |
228 |
| -The DevRev SDK provides a timer mechanism to measure the time spent on specific tasks. Events such as response time, loading time, or any other time-based event can be measured using the timer. |
229 |
| - |
230 |
| -To start a timer, use the following method: |
231 |
| - |
232 |
| -```typescript |
233 |
| -DevRevSDK.startTimer(name: string, properties: Map<string, string>) |
234 |
| -``` |
235 |
| - |
236 |
| -To stop a timer, use the following method: |
237 |
| - |
238 |
| -```typescript |
239 |
| -DevRevSDK.stopTimer(name: string, properties: Map<string, string>) |
240 |
| -``` |
241 |
| - |
242 |
| -#### Screen tracking |
243 |
| - |
244 |
| -The DevRev SDK provides automatic screen tracking to help you understand how users navigate through your app. You can also manually track screens using the following method: |
245 |
| - |
246 |
| -```typescript |
247 |
| -DevRevSDK.trackScreen(name: string) |
248 |
| -``` |
249 |
| - |
250 |
| -### Push notifications |
251 |
| - |
252 |
| -You can configure your app to receive push notifications from the DevRev SDK. The SDK is designed to handle push notifications and execute actions based on the notification's content. |
253 |
| - |
254 |
| -#### Configuration |
255 |
| - |
256 |
| -To receive push notifications, configure your DevRev organization by following the [Push Notifications integration guide](#). |
257 |
| - |
258 |
| -#### Registering for push notifications |
259 |
| - |
260 |
| -<Callout intent="note"> |
261 |
| -Push notifications require the SDK to be configured and the user to be identified (unverified or anonymous users). |
262 |
| -</Callout> |
263 |
| - |
264 |
| -Register your device for receiving push notifications using the following method: |
265 |
| - |
266 |
| -```typescript |
267 |
| -DevRevSDK.registerDeviceToken(deviceToken: string, deviceID: string) |
268 |
| -``` |
269 |
| - |
270 |
| -#### Unregistering from push notifications |
271 |
| - |
272 |
| -If your app no longer needs to receive push notifications, unregister the device using the following method: |
273 |
| - |
274 |
| -```typescript |
275 |
| -DevRevSDK.unregisterDevice(deviceID: string) |
276 |
| -``` |
277 |
| - |
278 |
| -#### Processing push notifications |
279 |
| - |
280 |
| -##### Android |
281 |
| - |
282 |
| -To handle notification clicks, intercept the click event, extract the payload, and pass it to the following method: |
283 |
| - |
284 |
| -```typescript |
285 |
| -DevRevSDK.processPushNotification(payload: string) |
286 |
| -``` |
287 |
| - |
288 |
| -###### Example |
289 |
| - |
290 |
| -```typescript |
291 |
| -const notificationPayload = { |
292 |
| - "message": { |
293 |
| - "title": "New Message", |
294 |
| - "body": "You have received a new message.", |
295 |
| - "data": { |
296 |
| - "messageId": "12345", |
297 |
| - "sender": "John Doe" |
298 |
| - } |
299 |
| - } |
300 |
| -}; |
301 |
| - |
302 |
| -const messageJson = notificationPayload["message"]; |
303 |
| -DevRevSDK.processPushNotification(JSON.stringify(messageJson)); |
304 |
| -``` |
305 |
| - |
306 |
| -##### iOS |
307 |
| - |
308 |
| -On iOS devices, pass the received push notification payload to the SDK for processing: |
309 |
| - |
310 |
| -```typescript |
311 |
| -DevRevSDK.processPushNotification(payload: string) |
312 |
| -``` |
313 |
| - |
314 |
| -###### Example |
315 |
| - |
316 |
| -```typescript |
317 |
| -DevRevSDK.processPushNotification(JSON.stringify(payload)); |
318 |
| -``` |
| 7 | +- [Quickstart Guide](./react-native-expo/quickstart) |
| 8 | +- [Features](./react-native-expo/features) |
| 9 | +- [Troubleshooting](./react-native-expo/troubleshooting) |
0 commit comments