refactor: tickets sdk embedded and modal

ticketmaster · Jul 22, 2024 · 1902d9d · 1902d9d
1 parent 2f17e3f
commit 1902d9d
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 66 deletions.
diff --git a/README.md b/README.md
@@ -242,11 +242,17 @@ Example:
 
 ```typescript
 
-import { TicketsSdk } from 'react-native-ticketmaster-ignite';
+import { TicketsSdkModal } from 'react-native-ticketmaster-ignite';
+
+const [showTicketsSdk, setShowTicketsSdk] = useState(false);
+
+return (
+  <TicketsSdkModal
+     showTicketsModal={showTicketsSdk}
+     setShowTicketsModal={setShowTicketsSdk}
+   />
+);
 
-<View>
-  <TicketsSdk />
-</View>
 ```
 
 #### TicketsSdkEmbeddedIos (embedded tickets for ios)
@@ -257,9 +263,7 @@ Example:
 
 import { TicketsSdkEmbeddedIos } from 'react-native-ticketmaster-ignite';
 
-<View>
-  <TicketsSdkEmbeddedIos />
-</View>
+return <TicketsSdkEmbeddedIos style={{ flex: 1 }} />;
 ```
 
 #### TicketsSdkEmbeddedAndroid (embedded tickets for android)
@@ -270,9 +274,7 @@ Example:
 
 import { TicketsSdkEmbeddedAndroid } from 'react-native-ticketmaster-ignite';
 
-<View>
-  <TicketsSdkEmbeddedAndroid />
-</View>
+return  <TicketsSdkEmbeddedAndroid />;
 ```
 
 #### RetailSDK

diff --git a/example/src/screens/Home.tsx b/example/src/screens/Home.tsx
@@ -10,7 +10,7 @@ import {
 } from 'react-native';
 import {
   RetailSDK,
-  TicketsSdk,
+  TicketsSdkModal,
   useIgnite,
 } from 'react-native-ticketmaster-ignite';
 import Config from 'react-native-config';
@@ -30,28 +30,6 @@ const Home = () => {
   } = useIgnite();
 
   const DATA = [
-    {
-      header: 'Retail SDK',
-      data: [
-        {
-          title: 'Show Retail PrePurchase Venue',
-          platforms: ['android', 'ios'],
-          onPress: () => onShowPrePurchaseVenue(),
-          first: true,
-        },
-        {
-          title: 'Show Retail PrePurchase Attraction',
-          platforms: ['android', 'ios'],
-          onPress: () => onShowPrePurchaseAttraction(),
-        },
-        {
-          title: 'Show Retail Purchase',
-          platforms: ['android', 'ios'],
-          onPress: () => onShowPurchase(),
-          last: true,
-        },
-      ],
-    },
     {
       header: 'Accounts SDK',
       data: [
@@ -89,6 +67,28 @@ const Home = () => {
         },
       ],
     },
+    {
+      header: 'Retail SDK',
+      data: [
+        {
+          title: 'Show Retail PrePurchase Venue',
+          platforms: ['android', 'ios'],
+          onPress: () => onShowPrePurchaseVenue(),
+          first: true,
+        },
+        {
+          title: 'Show Retail PrePurchase Attraction',
+          platforms: ['android', 'ios'],
+          onPress: () => onShowPrePurchaseAttraction(),
+        },
+        {
+          title: 'Show Retail Purchase',
+          platforms: ['android', 'ios'],
+          onPress: () => onShowPurchase(),
+          last: true,
+        },
+      ],
+    },
     {
       header: 'Tickets SDK',
       data: [
@@ -103,13 +103,6 @@ const Home = () => {
     },
   ];
 
-  const onShowTicketsSDK = () => {
-    setShowTicketsSdk(true);
-    setTimeout(() => {
-      setShowTicketsSdk(false);
-    }, 500);
-  };
-
   const onShowPurchase = async () => {
     try {
       await RetailSDK.presentPurchase(Config.DEMO_EVENT_ID);
@@ -185,6 +178,10 @@ const Home = () => {
     }
   };
 
+  const onShowTicketsSDK = () => {
+    setShowTicketsSdk(true);
+  };
+
   return (
     <>
       {!!isLoggingIn && (
@@ -234,12 +231,10 @@ const Home = () => {
         )}
         contentContainerStyle={styles.listPadding}
       />
-
-      {showTicketsSdk && (
-        <View>
-          <TicketsSdk />
-        </View>
-      )}
+      <TicketsSdkModal
+        showTicketsModal={showTicketsSdk}
+        setShowTicketsModal={setShowTicketsSdk}
+      />
     </>
   );
 };

diff --git a/example/src/screens/MyEvents.ios.tsx b/example/src/screens/MyEvents.ios.tsx
@@ -1,16 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { TicketsSdkEmbeddedIos } from 'react-native-ticketmaster-ignite';
 
 const MyEvents = () => {
-  const [initialFocus, setInitialFocus] = useState(true);
-
-  useEffect(() => {
-    // Initially, the altered Bottom Tabs View frame height is not available to Native code on iOS, this becomes available after a rerender.
-    // If needed an additional delay can be used before setting to false
-    setInitialFocus(false);
-  }, []);
-
-  return <>{!initialFocus && <TicketsSdkEmbeddedIos style={{ flex: 1 }} />}</>;
+  return <TicketsSdkEmbeddedIos style={{ flex: 1 }} />;
 };
 
 export default MyEvents;
diff --git a/src/TicketsSdk.tsx b/src/TicketsSdk.tsx
diff --git a/src/TicketsSdkEmbeddedIos.tsx b/src/TicketsSdkEmbeddedIos.tsx
@@ -1,10 +1,31 @@
+import React, { useEffect, useState } from 'react';
+import { ViewStyle } from 'react-native';
 import { requireNativeComponent, ViewProps } from 'react-native';
 
 interface RNTTicketsSdkEmbeddedViewProps extends ViewProps {
-  style: Record<string, any>;
+  style: ViewStyle;
 }
 
-export const TicketsSdkEmbeddedIos =
-  requireNativeComponent<RNTTicketsSdkEmbeddedViewProps>(
-    'RNTTicketsSdkEmbeddedView'
-  );
+type TicketsSdkEmbeddedIosProps = {
+  style?: ViewStyle;
+  renderTimeDelay?: number | undefined;
+};
+
+const TicketsSdk = requireNativeComponent<RNTTicketsSdkEmbeddedViewProps>(
+  'RNTTicketsSdkEmbeddedView'
+);
+
+export const TicketsSdkEmbeddedIos = ({
+  style,
+  renderTimeDelay,
+}: TicketsSdkEmbeddedIosProps) => {
+  const [initialFocus, setInitialFocus] = useState(true);
+
+  useEffect(() => {
+    // Initially, the altered Bottom Tabs View frame height is not available to Native code on iOS, this becomes available after a rerender.
+    // If needed an additional delay can be used before setting to false
+    setTimeout(() => setInitialFocus(false), renderTimeDelay || 0);
+  }, [renderTimeDelay]);
+
+  return <>{!initialFocus && <TicketsSdk style={style || { flex: 1 }} />}</>;
+};
diff --git a/src/TicketsSdkModal.tsx b/src/TicketsSdkModal.tsx
@@ -0,0 +1,31 @@
+import React, { useEffect } from 'react';
+import { requireNativeComponent, View } from 'react-native';
+
+const TicketsSdk = requireNativeComponent('RNTTicketsSdkView');
+
+type TicketsSdkModalProps = {
+  showTicketsModal: boolean;
+  setShowTicketsModal: (arg0: boolean) => void;
+};
+
+export const TicketsSdkModal = ({
+  showTicketsModal,
+  setShowTicketsModal,
+}: TicketsSdkModalProps) => {
+  useEffect(() => {
+    setShowTicketsModal(showTicketsModal);
+    setTimeout(() => {
+      setShowTicketsModal(false);
+    }, 500);
+  }, [showTicketsModal, setShowTicketsModal]);
+
+  return (
+    <>
+      {showTicketsModal && (
+        <View>
+          <TicketsSdk />
+        </View>
+      )}
+    </>
+  );
+};
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,5 +1,5 @@
 import { AccountsSDK } from './AccountsSdk';
-import { TicketsSdk } from './TicketsSdk';
+import { TicketsSdkModal } from './TicketsSdkModal';
 import { TicketsSdkEmbeddedIos } from './TicketsSdkEmbeddedIos';
 import { TicketsSdkEmbeddedAndroid } from './TicketsSdkEmbeddedAndroid';
 import { RetailSDK } from './RetailSdk';
@@ -8,7 +8,7 @@ import { useIgnite } from './useIgnite';
 
 export {
   AccountsSDK,
-  TicketsSdk, // Tickets SDK modal is only available for iOS
+  TicketsSdkModal, // Tickets SDK modal is only available for iOS
   TicketsSdkEmbeddedIos,
   TicketsSdkEmbeddedAndroid,
   RetailSDK,