fix: click outside close (#47)

* fix: click outside close

* transparent

Author: pandeymangg

apps/playground/package.json

@@ -15,7 +15,8 @@
     "expo": "54.0.29",
     "expo-status-bar": "3.0.9",
     "react": "19.1.0",
-    "react-native": "0.81.5"
+    "react-native": "0.81.5",
+    "react-native-webview": "13.15.0"
   },
   "devDependencies": {
     "@babel/core": "7.28.5",

packages/react-native/src/components/survey-web-view.tsx

@@ -3,15 +3,27 @@ import { RNConfig } from "@/lib/common/config";
 import { Logger } from "@/lib/common/logger";
 import { filterSurveys, getLanguageCode, getStyling } from "@/lib/common/utils";
 import { SurveyStore } from "@/lib/survey/store";
+import type { TOverlay } from "@/types/common";
 import { type TUserState, ZJsRNWebViewOnMessageData } from "@/types/config";
 import type { TSurvey, SurveyContainerProps } from "@/types/survey";
-import React, { type JSX, useEffect, useRef, useState } from "react";
+import React, { type JSX, useEffect, useMemo, useRef, useState } from "react";
 import { KeyboardAvoidingView, Modal, View, StyleSheet } from "react-native";
 import { WebView, type WebViewMessageEvent } from "react-native-webview";
 
 const logger = Logger.getInstance();
 logger.configure({ logLevel: "debug" });
 
+const getOverlayBackgroundColor = (overlay: TOverlay): string => {
+  switch (overlay) {
+    case "dark":
+      return "rgba(51, 65, 85, 0.8)";
+    case "light":
+      return "rgba(148, 163, 184, 0.5)";
+    case "none":
+      return "transparent";
+  }
+};
+
 const surveyStore = SurveyStore.getInstance();
 
 interface SurveyWebViewProps {
@@ -85,6 +97,15 @@ export function SurveyWebView(
     setShowSurvey(true);
   }, [props.survey.delay, isSurveyRunning, props.survey.name]);
 
+  const overlay = appConfig
+    ? (props.survey.projectOverwrites?.overlay ?? appConfig.get().environment.data.project.overlay)
+    : "none";
+
+  const modalContainerStyle = useMemo(
+    () => [styles.modalContainer, { backgroundColor: getOverlayBackgroundColor(overlay) }],
+    [overlay]
+  );
+
   if (!appConfig) {
     return;
   }
@@ -114,8 +135,6 @@ export function SurveyWebView(
   const clickOutside =
     props.survey.projectOverwrites?.clickOutsideClose ??
     project.clickOutsideClose;
-  const darkOverlay =
-    props.survey.projectOverwrites?.darkOverlay ?? project.darkOverlay;
 
   return (
     <Modal
@@ -127,7 +146,7 @@ export function SurveyWebView(
         setIsSurveyRunning(false);
       }}
     >
-      <View style={styles.modalContainer}>
+      <View style={modalContainerStyle}>
         <KeyboardAvoidingView
           behavior="padding"
           style={styles.keyboardAvoidingView}
@@ -145,9 +164,8 @@ export function SurveyWebView(
                 languageCode,
                 placement: surveyPlacement,
                 appUrl: appConfig.get().appUrl,
-                clickOutside:
-                  surveyPlacement === "center" ? clickOutside : true,
-                darkOverlay,
+                clickOutside,
+                overlay,
                 getSetIsResponseSendingFinished: (
                   _f: (value: boolean) => void
                 ) => undefined,
@@ -269,7 +287,6 @@ export function SurveyWebView(
 const styles = StyleSheet.create({
   modalContainer: {
     flex: 1,
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
   },
   keyboardAvoidingView: {
     flex: 1,

packages/react-native/src/lib/common/tests/api.test.ts

@@ -262,7 +262,7 @@ describe("api.ts", () => {
             id: "project123",
             recontactDays: 30,
             clickOutsideClose: true,
-            darkOverlay: false,
+            overlay: "none",
             placement: "bottomRight",
             inAppSurveyBranding: true,
             styling: {

packages/react-native/src/lib/common/tests/utils.test.ts

@@ -106,7 +106,7 @@ describe("utils.ts", () => {
             id: mockProjectId,
             recontactDays: 7, // fallback if survey doesn't have it
             clickOutsideClose: false,
-            darkOverlay: false,
+            overlay: "none",
             placement: "bottomRight",
             inAppSurveyBranding: true,
             styling: { allowStyleOverwrite: false },

packages/react-native/src/types/common.ts

@@ -0,0 +1 @@
+export type TOverlay = "none" | "light" | "dark";

packages/react-native/src/types/config.ts

@@ -11,7 +11,7 @@ export type TEnvironmentStateProject = Pick<
   | "id"
   | "recontactDays"
   | "clickOutsideClose"
-  | "darkOverlay"
+  | "overlay"
   | "placement"
   | "inAppSurveyBranding"
 > & {

packages/react-native/src/types/project.ts

@@ -1,3 +1,4 @@
+import type { TOverlay } from "./common";
 import type { TBaseStyling } from "./styling";
 
 export type TProject = {
@@ -20,7 +21,7 @@ export type TProject = {
   };
   placement: "topLeft" | "topRight" | "bottomLeft" | "bottomRight"; // assumed from WidgetPlacement
   clickOutsideClose: boolean;
-  darkOverlay: boolean;
+  overlay: TOverlay;
   logo?: {
     url?: string;
     bgColor?: string;

packages/react-native/src/types/survey.ts

@@ -1,5 +1,6 @@
 import type { TResponseData, TResponseUpdate } from "@/types/response";
 import type { TFileUploadParams, TUploadFileConfig } from "@/types/storage";
+import type { TOverlay } from "./common";
 import type { TProjectStyling } from "./project";
 
 export type TJsFileUploadParams = {
@@ -45,7 +46,7 @@ export interface SurveyBaseProps {
   isCardBorderVisible?: boolean;
   startAtQuestionId?: string;
   clickOutside?: boolean;
-  darkOverlay?: boolean;
+  overlay?: TOverlay;
   hiddenFieldsRecord?: TResponseData;
   shouldResetQuestionId?: boolean;
   fullSizeCards?: boolean;
@@ -72,7 +73,7 @@ export interface SurveyContainerProps
   mode?: "modal" | "inline";
   containerId?: string;
   clickOutside?: boolean;
-  darkOverlay?: boolean;
+  overlay?: TOverlay;
   placement?: "bottomLeft" | "bottomRight" | "topLeft" | "topRight" | "center";
   action?: string;
   singleUseId?: string;
@@ -239,7 +240,7 @@ export type TSurvey = {
       | "center"
       | null;
     clickOutsideClose?: boolean | null;
-    darkOverlay?: boolean | null;
+    overlay?: TOverlay | null;
   } | null;
   languages: {
     default: boolean;