react-native-lumen 1.0.1 → 1.1.0

package/package.json

@@ -1,171 +1,173 @@
-{
-  "name": "react-native-lumen",
-  "version": "1.0.1",
-  "description": "A customizable app tour library for React Native",
-  "main": "./lib/module/index.js",
-  "types": "./lib/typescript/src/index.d.ts",
-  "exports": {
-    ".": {
-      "source": "./src/index.tsx",
-      "types": "./lib/typescript/src/index.d.ts",
-      "default": "./lib/module/index.js"
-    },
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "src",
-    "lib",
-    "android",
-    "ios",
-    "cpp",
-    "*.podspec",
-    "react-native.config.js",
-    "!ios/build",
-    "!android/build",
-    "!android/gradle",
-    "!android/gradlew",
-    "!android/gradlew.bat",
-    "!android/local.properties",
-    "!**/__tests__",
-    "!**/__fixtures__",
-    "!**/__mocks__",
-    "!**/.*"
-  ],
-  "scripts": {
-    "example": "yarn workspace react-native-lumen-example",
-    "clean": "del-cli lib",
-    "prepare": "bob build",
-    "typecheck": "tsc",
-    "lint": "eslint \"**/*.{js,ts,tsx}\"",
-    "test": "jest",
-    "release": "release-it --only-version"
-  },
-  "keywords": [
-    "react-native",
-    "ios",
-    "android"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/thedev204/react-native-lumen.git"
-  },
-  "author": "thedev204 <116882323+thedev204@users.noreply.github.com> (https://github.com/thedev204)",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/thedev204/react-native-lumen/issues"
-  },
-  "homepage": "https://github.com/thedev204/react-native-lumen#readme",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "devDependencies": {
-    "@commitlint/config-conventional": "^19.8.1",
-    "@eslint/compat": "^1.3.2",
-    "@eslint/eslintrc": "^3.3.1",
-    "@eslint/js": "^9.35.0",
-    "@react-native/babel-preset": "0.83.0",
-    "@react-native/eslint-config": "0.83.0",
-    "@release-it/conventional-changelog": "^10.0.1",
-    "@types/jest": "^29.5.14",
-    "@types/react": "^19.1.12",
-    "commitlint": "^19.8.1",
-    "del-cli": "^6.0.0",
-    "eslint": "^9.39.2",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "jest": "^29.7.0",
-    "lefthook": "^2.0.3",
-    "prettier": "^3.0.0",
-    "react": "19.1.0",
-    "react-native": "0.81.5",
-    "react-native-builder-bob": "^0.40.13",
-    "react-native-gesture-handler": "^2.16.0",
-    "react-native-reanimated": "^3.0.0",
-    "react-native-svg": "^12.0.0",
-    "release-it": "^19.0.4",
-    "typescript": "~5.7.0"
-  },
-  "peerDependencies": {
-    "react": "*",
-    "react-native": "*",
-    "react-native-gesture-handler": ">=2.0.0",
-    "react-native-reanimated": ">=3.0.0",
-    "react-native-svg": ">=12.0.0",
-    "react-native-worklets": ">=0.3.0"
-  },
-  "workspaces": [
-    "example"
-  ],
-  "packageManager": "yarn@4.11.0",
-  "react-native-builder-bob": {
-    "source": "src",
-    "output": "lib",
-    "targets": [
-      [
-        "module",
-        {
-          "esm": true
-        }
-      ],
-      [
-        "typescript",
-        {
-          "project": "tsconfig.build.json"
-        }
-      ]
-    ]
-  },
-  "prettier": {
-    "quoteProps": "consistent",
-    "singleQuote": true,
-    "tabWidth": 2,
-    "trailingComma": "es5",
-    "useTabs": false
-  },
-  "jest": {
-    "preset": "react-native",
-    "modulePathIgnorePatterns": [
-      "<rootDir>/example/node_modules",
-      "<rootDir>/lib/"
-    ]
-  },
-  "commitlint": {
-    "extends": [
-      "@commitlint/config-conventional"
-    ]
-  },
-  "release-it": {
-    "git": {
-      "commitMessage": "chore: release ${version}",
-      "tagName": "v${version}"
-    },
-    "npm": {
-      "publish": true
-    },
-    "github": {
-      "release": true
-    },
-    "plugins": {
-      "@release-it/conventional-changelog": {
-        "preset": {
-          "name": "angular"
-        }
-      }
-    }
-  },
-  "create-react-native-library": {
-    "type": "library",
-    "languages": "js",
-    "tools": [
-      "eslint",
-      "jest",
-      "lefthook",
-      "release-it"
-    ],
-    "version": "0.57.0"
-  },
-  "resolutions": {
-    "@types/react": "^19.1.12",
-    "typescript": "5.7.3"
-  }
-}
+{
+  "name": "react-native-lumen",
+  "version": "1.1.0",
+  "description": "A customizable app tour library for React Native",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-lumen-example",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/thedev204/react-native-lumen.git"
+  },
+  "author": "thedev204 <116882323+thedev204@users.noreply.github.com> (https://github.com/thedev204)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/thedev204/react-native-lumen/issues"
+  },
+  "homepage": "https://github.com/thedev204/react-native-lumen#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@react-native/babel-preset": "0.83.0",
+    "@react-native/eslint-config": "0.83.0",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.12",
+    "commitlint": "^19.8.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react-native": "^5.0.0",
+    "jest": "^29.7.0",
+    "lefthook": "^2.0.3",
+    "prettier": "^3.0.0",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-builder-bob": "^0.40.13",
+    "react-native-gesture-handler": "^2.16.0",
+    "react-native-reanimated": "^3.0.0",
+    "react-native-svg": "^12.0.0",
+    "release-it": "^19.0.4",
+    "typescript": "~5.7.0"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-reanimated": ">=3.0.0",
+    "react-native-svg": ">=12.0.0",
+    "react-native-worklets": ">=0.3.0"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "create-react-native-library": {
+    "type": "library",
+    "languages": "js",
+    "tools": [
+      "eslint",
+      "jest",
+      "lefthook",
+      "release-it"
+    ],
+    "version": "0.57.0"
+  },
+  "resolutions": {
+    "@types/react": "^19.1.12",
+    "typescript": "5.7.3"
+  }
+}

package/src/components/TourOverlay.tsx

@@ -1,4 +1,4 @@
-import { memo, type ComponentType } from 'react';
+import { memo, type ComponentType, useMemo } from 'react';
 import { StyleSheet, Dimensions } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import Animated, {
@@ -7,6 +7,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { useTour } from '../hooks/useTour';
 import type { InternalTourContextType } from '../types';
+import { DEFAULT_ZONE_STYLE } from '../constants/defaults';
 
 const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
 
@@ -49,11 +50,22 @@ export const TourOverlay = memo(() => {
     targetHeight,
     targetRadius,
     opacity,
+    zoneBorderWidth,
     config,
     currentStep,
     steps,
+    currentZoneStyle,
   } = useTour() as InternalTourContextType;
 
+  // Get resolved zone style for styling the glow/border
+  const zoneStyle = useMemo(() => {
+    return {
+      ...DEFAULT_ZONE_STYLE,
+      ...config?.zoneStyle,
+      ...currentZoneStyle,
+    };
+  }, [config?.zoneStyle, currentZoneStyle]);
+
   // Create the d string for the mask
   // Outer rectangle covers the whole screen
   // Inner shape is the "hole"
@@ -101,7 +113,9 @@ export const TourOverlay = memo(() => {
   //    - Overlay shouldn't block anything?
   //    - pointerEvents='none' on the whole container.
 
-  const shouldBlockOutside = config?.preventInteraction ?? false;
+  // Check per-step preventInteraction first, then fall back to global config
+  const shouldBlockOutside =
+    step?.preventInteraction ?? config?.preventInteraction ?? false;
 
   // If we don't want to block outside, we just let everything pass.
   // But wait, if we let everything pass, we can't implement 'clickable=false' strictness?
@@ -125,6 +139,31 @@ export const TourOverlay = memo(() => {
     };
   });
 
+  // Animated style for the zone border/glow ring
+  const zoneBorderStyle = useAnimatedStyle(() => {
+    const isGlowEnabled = config?.enableGlow === true;
+    const borderW = zoneBorderWidth?.value ?? zoneStyle.borderWidth;
+
+    return {
+      position: 'absolute' as const,
+      left: targetX.value,
+      top: targetY.value,
+      width: targetWidth.value,
+      height: targetHeight.value,
+      borderRadius: targetRadius.value,
+      borderWidth: borderW,
+      borderColor: zoneStyle.borderColor,
+      backgroundColor: 'transparent',
+      ...(isGlowEnabled && {
+        // Glow effect using React Native 0.76+ boxShadow API
+        boxShadow: `${zoneStyle.glowOffsetX}px ${zoneStyle.glowOffsetY}px ${zoneStyle.glowRadius}px ${zoneStyle.glowSpread}px ${zoneStyle.glowColor}`,
+      }),
+    };
+  });
+
+  // Determine if we should show the border/glow
+  const showBorder = config?.enableGlow === true || zoneStyle.borderWidth > 0;
+
   return (
     <AnimatedView
       pointerEvents={containerPointerEvents}
@@ -148,6 +187,10 @@ export const TourOverlay = memo(() => {
           // backgroundColor="transparent" // Default
         />
       )}
+      {/* Border/Glow ring around the zone */}
+      {showBorder && currentStep && (
+        <AnimatedView style={zoneBorderStyle} pointerEvents="none" />
+      )}
     </AnimatedView>
   );
 });