feat: enhance EmbeddedSessionManager to manage session state based on screen focus

Author: lposen

example/src/components/Embedded/Embedded.tsx

@@ -1,3 +1,4 @@
+import { useIsFocused } from '@react-navigation/native';
 import { useCallback, useState } from 'react';
 import {
   Alert,
@@ -25,6 +26,7 @@ const DEFAULT_CONFIG_JSON = `{
 }`;
 
 export const Embedded = () => {
+  const isFocused = useIsFocused();
   const [placementIdsInput, setPlacementIdsInput] = useState<string>('');
   const [embeddedMessages, setEmbeddedMessages] = useState<
     IterableEmbeddedMessage[]
@@ -77,7 +79,7 @@ export const Embedded = () => {
   }, []);
 
   return (
-    <EmbeddedSessionManager>
+    <EmbeddedSessionManager isActive={isFocused}>
       <SafeAreaView style={styles.container}>
         <Text style={styles.title}>Embedded</Text>
         {!Iterable.embeddedManager.isEnabled && (

src/embedded/components/EmbeddedSessionManager.test.tsx

@@ -55,4 +55,44 @@ describe('EmbeddedSessionManager', () => {
 
     expect(Iterable.embeddedManager.endSession).toHaveBeenCalledTimes(1);
   });
+
+  it('does not start session when isActive is false', () => {
+    const { unmount } = render(
+      <EmbeddedSessionManager isActive={false}>
+        <Text>child</Text>
+      </EmbeddedSessionManager>
+    );
+
+    expect(Iterable.embeddedManager.startSession).not.toHaveBeenCalled();
+
+    unmount();
+
+    expect(Iterable.embeddedManager.endSession).not.toHaveBeenCalled();
+  });
+
+  it('ends session when isActive becomes false and restarts when true again', () => {
+    const { rerender } = render(
+      <EmbeddedSessionManager isActive={true}>
+        <Text>child</Text>
+      </EmbeddedSessionManager>
+    );
+
+    expect(Iterable.embeddedManager.startSession).toHaveBeenCalledTimes(1);
+
+    rerender(
+      <EmbeddedSessionManager isActive={false}>
+        <Text>child</Text>
+      </EmbeddedSessionManager>
+    );
+
+    expect(Iterable.embeddedManager.endSession).toHaveBeenCalledTimes(1);
+
+    rerender(
+      <EmbeddedSessionManager isActive={true}>
+        <Text>child</Text>
+      </EmbeddedSessionManager>
+    );
+
+    expect(Iterable.embeddedManager.startSession).toHaveBeenCalledTimes(2);
+  });
 });

src/embedded/components/EmbeddedSessionManager.tsx

@@ -6,8 +6,18 @@ import type { ViewProps } from 'react-native';
 import { Iterable } from '../../core/classes/Iterable';
 import { EmbeddedSessionContext } from '../context/EmbeddedSessionContext';
 
-interface EmbeddedSessionManagerProps extends ViewProps {
+export interface EmbeddedSessionManagerProps extends ViewProps {
   children?: ReactNode;
+  /**
+   * Is the current screen in focus?
+   *
+   * When `false`, this wrapper does not start an embedded session (e.g. host
+   * screen not focused). Defaults to `true`.
+   *
+   * This is not necessary to use.  It is only useful if you want to avoid
+   * starting the session when the screen is hidden but still technically there.
+   */
+  isActive?: boolean;
 }
 
 /**
@@ -17,12 +27,13 @@ interface EmbeddedSessionManagerProps extends ViewProps {
  */
 export const EmbeddedSessionManager = ({
   children,
+  isActive = true,
   ...viewProps
 }: EmbeddedSessionManagerProps) => {
   const hasActiveParentSession = useContext(EmbeddedSessionContext);
 
   useEffect(() => {
-    if (hasActiveParentSession) {
+    if (hasActiveParentSession || !isActive) {
       return;
     }
 
@@ -31,7 +42,7 @@ export const EmbeddedSessionManager = ({
     return () => {
       Iterable.embeddedManager.endSession();
     };
-  }, [hasActiveParentSession]);
+  }, [hasActiveParentSession, isActive]);
 
   return (
     <EmbeddedSessionContext.Provider value={true}>

src/index.tsx

@@ -41,6 +41,7 @@ export {
   IterableEmbeddedView,
   IterableEmbeddedViewType,
   useEmbeddedView,
+  type EmbeddedSessionManagerProps,
   type IterableEmbeddedComponentProps,
   type IterableEmbeddedMessage,
   type IterableEmbeddedMessageElements,