Skip to content

Commit ecaa390

Browse files
committed
Merge branch 'release/RN-3.15' into develop
2 parents d791ac4 + 3070b9a commit ecaa390

1 file changed

Lines changed: 64 additions & 0 deletions

File tree

versioned_docs/version-3.0/react-native-present-onboardings.md

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,70 @@ try {
160160
}
161161
```
162162

163+
## Customize how links open in onboardings
164+
165+
:::important
166+
Customizing how links open in onboardings is supported starting from Adapty SDK v. 3.15.1.
167+
:::
168+
169+
By default, links in onboardings open in an in-app browser. This provides a seamless user experience by displaying web pages within your application, allowing users to view them without switching apps.
170+
171+
If you prefer to open links in an external browser instead, you can customize this behavior by setting the `externalUrlsPresentation` parameter to `WebPresentation.BrowserOutApp`:
172+
173+
<Tabs groupId="rn-onboarding-views" queryString>
174+
<TabItem value="component" label="React component" default>
175+
176+
```typescript showLineNumbers title="React Native (TSX)"
177+
import React, { useCallback } from 'react';
178+
import { AdaptyOnboardingView, WebPresentation } from 'react-native-adapty';
179+
import type { OnboardingEventHandlers } from 'react-native-adapty';
180+
181+
function MyOnboarding({ onboarding }) {
182+
const onAnalytics = useCallback<OnboardingEventHandlers['onAnalytics']>((event, meta) => {}, []);
183+
const onClose = useCallback<OnboardingEventHandlers['onClose']>((actionId, meta) => {}, []);
184+
const onCustom = useCallback<OnboardingEventHandlers['onCustom']>((actionId, meta) => {}, []);
185+
const onPaywall = useCallback<OnboardingEventHandlers['onPaywall']>((actionId, meta) => {}, []);
186+
const onStateUpdated = useCallback<OnboardingEventHandlers['onStateUpdated']>((action, meta) => {}, []);
187+
const onFinishedLoading = useCallback<OnboardingEventHandlers['onFinishedLoading']>((meta) => {}, []);
188+
const onError = useCallback<OnboardingEventHandlers['onError']>((error) => {}, []);
189+
190+
return (
191+
<AdaptyOnboardingView
192+
onboarding={onboarding}
193+
style={styles.container}
194+
externalUrlsPresentation={WebPresentation.BrowserOutApp} // default – BrowserInApp
195+
onAnalytics={onAnalytics}
196+
onClose={onClose}
197+
onCustom={onCustom}
198+
onPaywall={onPaywall}
199+
onStateUpdated={onStateUpdated}
200+
onFinishedLoading={onFinishedLoading}
201+
onError={onError}
202+
/>
203+
);
204+
}
205+
```
206+
</TabItem>
207+
208+
<TabItem value="modal" label="Modal presentation">
209+
210+
```typescript showLineNumbers title="React Native (TSX)"
211+
import { createOnboardingView, WebPresentation } from 'react-native-adapty';
212+
213+
const view = await createOnboardingView(
214+
onboarding,
215+
WebPresentation.BrowserOutApp // default – BrowserInApp
216+
);
217+
218+
try {
219+
await view.present();
220+
} catch (error) {
221+
// handle the error
222+
}
223+
```
224+
</TabItem>
225+
</Tabs>
226+
163227
## Next steps
164228

165229
Once you've presented your onboarding, you'll want to [handle user interactions and events](react-native-handling-onboarding-events.md). Learn how to handle onboarding events to respond to user actions and track analytics.

0 commit comments

Comments
 (0)