feature: Allow passing properties to encapsulated webview - if so, deep linking can be supported

[av185218]

Dear Authors, Contributors

By using Your package to consume dynamic content that is displayed to users, a new requirement raised to make buttons rendered within the WaveCX webview deep link compatible - in other words, if a WaveCX contains a button that could be redirected within the mobile application, then it should be redirected. If not, the handling remains as is.

Now, to implement such capability, I need your help/advise:

1. Would it be possible to pass properties to the underlying WebView component of yours? I'm interested in webivew's onShouldStartLoadWithRequest property. With the help of it, the mobile application could intercept the outgoing request and decide if it should be redirected or allowed to load by the webview. If the adjustment is applied to the package, no client-side patching is required.
2. Once the redirection is done, the WaveCX modal remains opened covering the underneath screen. To close it, session-ended event have passed to the handleEvent of useWaveCx hook. Is that a correct approach?

Demo of the feature can be found here:

https://github.com/user-attachments/assets/e4a55d5f-29d2-4cec-911d-1835a6d3b300

Suggested Diff (as I couldn't raise a PR):

git diff
diff --git a/src/index.tsx b/src/index.tsx
index 3834198..cd482bf 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -18,7 +18,7 @@ import {
   Text,
   View,
 } from 'react-native';
-import WebView from 'react-native-webview';
+import WebView, { type WebViewProps } from 'react-native-webview';

 import {
   composeFireTargetedContentEventViaApi,
@@ -58,6 +58,7 @@ export const WaveCxProvider = (props: {
   children?: ReactNode;
   apiBaseUrl?: string;
   recordEvent?: FireTargetedContentEvent;
+  webviewProps?: WebViewProps;
 }) => {
   const recordEvent = useMemo(
     () =>
@@ -260,6 +261,7 @@ export const WaveCxProvider = (props: {
             )}

             <WebView
+              {...props.webviewProps} //! Won't be able to override below props like source, ref, style etc. Verify if override of below props should be supported. If so or just partially, consume the props.
               source={{ uri: activeContentItem.viewUrl }}
               ref={webViewRef}
               style={{
@@ -274,6 +276,9 @@ export const WaveCxProvider = (props: {
                   webViewRef.current?.stopLoading();
                   Linking.openURL(event.url);
                 }
+
+                //! Example of supporting custom props partially where desired.
+                props.webviewProps?.onNavigationStateChange?.(event);
               }}
             />
           </>

Sincerely,

[SG185511]

2. Once the redirection is done, the WaveCX modal remains opened covering the underneath screen. To close it, session-ended event have passed to the handleEvent of useWaveCx hook. Is that a correct approach?

@av185218 I believe the session-ended event should only be triggered during logout, since starting a session is triggered upon user authentication only.

[av185218]

Thank you @SG185511. In that case, a way should be identified how the inner modal of WaveCX provider can be closed from outside.

[jonathanraftery]

@av185218 Yes, @SG185511 is correct. the session-ended event should only be used for the user session truly ending.

We like this general approach of allowing the consuming application to inspect/intercept links and will have an update out to allow that shortly (in the next day or two). We're working out exactly how everything will work, but most likely we will include a callback passed to those inspection functions that can be called to dismiss/close the modal content.