@kontextso/sdk-react-native 2.2.0-rc.1 → 2.2.0-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kontextso/sdk-react-native",
-  "version": "2.2.0-rc.1",
+  "version": "2.2.0-rc.2",
   "description": "Kontext SDK for React Native",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/formats/Format.tsx

@@ -59,6 +59,7 @@ const Format = ({ code, messageId, wrapper, ...otherParams }: FormatProps) => {
   const webViewRef = useRef<WebView>(null)
   const modalWebViewRef = useRef<WebView>(null)
   const modalInitTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const isModalInitRef = useRef<boolean>(false)
 
   const { height: windowHeight, width: windowWidth } = useWindowDimensions()
 
@@ -79,6 +80,7 @@ const Format = ({ code, messageId, wrapper, ...otherParams }: FormatProps) => {
       modalInitTimeoutRef.current = null
     }
 
+    isModalInitRef.current = false
     setModalOpen(false)
     setModalLoaded(false)
     setModalShown(false)
@@ -175,7 +177,11 @@ const Format = ({ code, messageId, wrapper, ...otherParams }: FormatProps) => {
             case 'open-component-iframe':
               setModalOpen(true)
 
-              modalInitTimeoutRef.current = setTimeout(resetModal, message.data.timeout ?? 5000)
+              modalInitTimeoutRef.current = setTimeout(() => {
+                if (!isModalInitRef.current) {
+                  resetModal()
+                }
+              }, message.data.timeout ?? 5000)
               break
           }
         },
@@ -209,6 +215,9 @@ const Format = ({ code, messageId, wrapper, ...otherParams }: FormatProps) => {
               break
 
             case 'init-component-iframe':
+              // Just clearing the timeoutRef didn't work in Android, so we need to set a flag and check it in the timeout callback
+              isModalInitRef.current = true
+
               if (modalInitTimeoutRef.current) {
                 clearTimeout(modalInitTimeoutRef.current)
                 modalInitTimeoutRef.current = null
@@ -220,6 +229,7 @@ const Format = ({ code, messageId, wrapper, ...otherParams }: FormatProps) => {
             case 'error-component-iframe':
             case 'error-iframe':
               resetModal()
+              context?.captureError(new Error('Processing modal iframe error'))
               break
 
             case 'click-iframe':
@@ -304,7 +314,13 @@ const Format = ({ code, messageId, wrapper, ...otherParams }: FormatProps) => {
 
   const content = (
     <>
-      <Modal visible={modalOpen} transparent={true} onRequestClose={resetModal}>
+      <Modal
+        visible={modalOpen}
+        transparent={true}
+        onRequestClose={resetModal}
+        animationType="slide"
+        statusBarTranslucent={true}
+      >
         <View
           style={{
             flex: 1,
@@ -342,7 +358,7 @@ const Format = ({ code, messageId, wrapper, ...otherParams }: FormatProps) => {
           style={{
             height: getHeight(),
             width: getWidth(),
-            background: 'transparent',
+            backgroundColor: 'transparent',
             borderWidth: 0,
             ...iframeStyles,
           }}