react-native-lumen 1.0.0

package/lib/typescript/src/components/TourProvider.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { TourConfig, InternalTourContextType } from '../types';
+export declare const TourContext: React.Context<InternalTourContextType | null>;
+interface TourProviderProps {
+    children: React.ReactNode;
+    /**
+     * Optional custom steps order. If provided, the tour will follow this array of keys.
+     */
+    stepsOrder?: string[];
+    /**
+     * Initial overlay opacity. Default 0.5
+     */
+    backdropOpacity?: number;
+    /**
+     * Global configuration for the tour.
+     */
+    config?: TourConfig;
+}
+export declare const TourProvider: React.FC<TourProviderProps>;
+export {};
+//# sourceMappingURL=TourProvider.d.ts.map

package/lib/typescript/src/components/TourProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TourProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/TourProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAGV,UAAU,EACV,uBAAuB,EACxB,MAAM,UAAU,CAAC;AAQlB,eAAO,MAAM,WAAW,+CAAsD,CAAC;AAE/E,UAAU,iBAAiB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAID,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAiTpD,CAAC"}

package/lib/typescript/src/components/TourTooltip.d.ts

@@ -0,0 +1,2 @@
+export declare const TourTooltip: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element | null>;
+//# sourceMappingURL=TourTooltip.d.ts.map

package/lib/typescript/src/components/TourTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TourTooltip.d.ts","sourceRoot":"","sources":["../../../../src/components/TourTooltip.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,WAAW,2FAyKtB,CAAC"}

package/lib/typescript/src/components/TourZone.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { ViewStyle, StyleProp } from 'react-native';
+interface TourZoneProps {
+    stepKey: string;
+    name?: string;
+    description: string;
+    order?: number;
+    shape?: 'rect' | 'circle';
+    borderRadius?: number;
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    clickable?: boolean;
+}
+export declare const TourZone: React.FC<TourZoneProps>;
+export {};
+//# sourceMappingURL=TourZone.d.ts.map

package/lib/typescript/src/components/TourZone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TourZone.d.ts","sourceRoot":"","sources":["../../../../src/components/TourZone.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAkBzD,UAAU,aAAa;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+U5C,CAAC"}

package/lib/typescript/src/constants/animations.d.ts

@@ -0,0 +1,34 @@
+import type { WithSpringConfig } from 'react-native-reanimated';
+/**
+ * Default spring configuration matching Reanimated 3 defaults.
+ */
+export declare const Reanimated3DefaultSpringConfig: WithSpringConfig;
+/**
+ * Spring configuration with duration.
+ */
+export declare const Reanimated3DefaultSpringConfigWithDuration: WithSpringConfig;
+/**
+ * A bouncy and energetic spring configuration.
+ */
+export declare const WigglySpringConfig: WithSpringConfig;
+/**
+ * A bouncy spring configuration with fixed duration.
+ */
+export declare const WigglySpringConfigWithDuration: WithSpringConfig;
+/**
+ * A gentle and smooth spring configuration.
+ */
+export declare const GentleSpringConfig: WithSpringConfig;
+/**
+ * A gentle spring configuration with fixed duration.
+ */
+export declare const GentleSpringConfigWithDuration: WithSpringConfig;
+/**
+ * A snappy and responsive spring configuration.
+ */
+export declare const SnappySpringConfig: WithSpringConfig;
+/**
+ * A snappy spring configuration with fixed duration.
+ */
+export declare const SnappySpringConfigWithDuration: WithSpringConfig;
+//# sourceMappingURL=animations.d.ts.map

package/lib/typescript/src/constants/animations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animations.d.ts","sourceRoot":"","sources":["../../../../src/constants/animations.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE;;GAEG;AACH,eAAO,MAAM,8BAA8B,EAAE,gBAI5C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,0CAA0C,EAAE,gBAGxD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,gBAIhC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,8BAA8B,EAAE,gBAG5C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,gBAIhC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,8BAA8B,EAAE,gBAG5C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,gBAKhC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,8BAA8B,EAAE,gBAI5C,CAAC"}

package/lib/typescript/src/constants/defaults.d.ts

@@ -0,0 +1,10 @@
+import type { WithSpringConfig } from 'react-native-reanimated';
+export declare const DEFAULT_SPRING_CONFIG: WithSpringConfig;
+export declare const DEFAULT_BACKDROP_OPACITY = 0.5;
+export declare const DEFAULT_LABELS: {
+    next: string;
+    previous: string;
+    finish: string;
+    skip: string;
+};
+//# sourceMappingURL=defaults.d.ts.map

package/lib/typescript/src/constants/defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../../src/constants/defaults.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,eAAO,MAAM,qBAAqB,EAAE,gBAGnC,CAAC;AAEF,eAAO,MAAM,wBAAwB,MAAM,CAAC;AAE5C,eAAO,MAAM,cAAc;;;;;CAK1B,CAAC"}

package/lib/typescript/src/hooks/useTour.d.ts

@@ -0,0 +1,2 @@
+export declare const useTour: () => import("..").InternalTourContextType;
+//# sourceMappingURL=useTour.d.ts.map

package/lib/typescript/src/hooks/useTour.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTour.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTour.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,4CAMnB,CAAC"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,9 @@
+export * from './types';
+export * from './components/TourProvider';
+export * from './components/TourZone';
+export * from './hooks/useTour';
+export { TourOverlay } from './components/TourOverlay';
+export { TourTooltip } from './components/TourTooltip';
+export * from './constants/defaults';
+export * from './constants/animations';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC"}

package/lib/typescript/src/types/index.d.ts

@@ -0,0 +1,135 @@
+import type { WithSpringConfig, SharedValue } from 'react-native-reanimated';
+import React from 'react';
+export interface TourStep {
+    /**
+     * Unique key for this step.
+     */
+    key: string;
+    /**
+     * Optional display name/label for this step.
+     */
+    name?: string;
+    /**
+     * Description text to show in the tooltip.
+     */
+    description: string;
+    /**
+     * Optional order index. If not provided, registration order is used (or explicit ordering in context).
+     */
+    order?: number;
+    /**
+     * Optional data for custom tooltip rendering
+     */
+    meta?: any;
+    /**
+     * If true, allows user interaction with the target element.
+     * If false, interactions are blocked (default behavior depends on global config).
+     */
+    clickable?: boolean;
+}
+export interface MeasureResult {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export type StepMap = Record<string, TourStep>;
+export interface TourLabels {
+    next?: string;
+    previous?: string;
+    finish?: string;
+    skip?: string;
+}
+export interface CardProps {
+    step: TourStep;
+    currentStepIndex: number;
+    totalSteps: number;
+    next: () => void;
+    prev: () => void;
+    stop: () => void;
+    isFirst: boolean;
+    isLast: boolean;
+    labels?: TourLabels;
+}
+export interface TourConfig {
+    /**
+     * Animation configuration for the spotlight movement.
+     */
+    springConfig?: WithSpringConfig;
+    /**
+     * If true, prevents interaction with the underlying app while tour is active.
+     * Default: false (interactions allowed outside the tooltip, but overlay might block them depending on implementation).
+     */
+    preventInteraction?: boolean;
+    /**
+     * Custom labels for buttons.
+     */
+    labels?: TourLabels;
+    /**
+     * Custom renderer for the card/tooltip.
+     */
+    renderCard?: (props: CardProps) => React.ReactNode;
+    /**
+     * Backdrop opacity. Default 0.5
+     */
+    backdropOpacity?: number;
+}
+export interface TourContextType {
+    /**
+     * Starts the tour at the first step or a specific step (by key).
+     */
+    start: (stepKey?: string) => void;
+    /**
+     * Stops the tour and hides the overlay.
+     */
+    stop: () => void;
+    /**
+     * Advances to the next step.
+     */
+    next: () => void;
+    /**
+     * Goes back to the previous step.
+     */
+    prev: () => void;
+    /**
+     * Registers a zone/step.
+     */
+    registerStep: (step: TourStep) => void;
+    /**
+     * Unregisters a zone/step.
+     */
+    unregisterStep: (key: string) => void;
+    /**
+     * Updates the layout of a specific step.
+     * This is called by TourZone on layout/mount.
+     */
+    updateStepLayout: (key: string, measure: MeasureResult) => void;
+    /**
+     * The current active step key, or null if tour is inactive.
+     */
+    currentStep: string | null;
+    /**
+     * Map of registered steps.
+     */
+    steps: StepMap;
+    /**
+     * Global tour configuration
+     */
+    config?: TourConfig;
+    /**
+     * Registers the main ScrollView ref for auto-scrolling
+     */
+    setScrollViewRef: (ref: any) => void;
+}
+export interface InternalTourContextType extends TourContextType {
+    targetX: SharedValue<number>;
+    targetY: SharedValue<number>;
+    targetWidth: SharedValue<number>;
+    targetHeight: SharedValue<number>;
+    targetRadius: SharedValue<number>;
+    opacity: SharedValue<number>;
+    containerRef: React.RefObject<any>;
+    scrollViewRef: React.RefObject<any>;
+    setScrollViewRef: (ref: any) => void;
+}
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/types/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,171 @@
+{
+  "name": "react-native-lumen",
+  "version": "1.0.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-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"
+  }
+}

package/src/components/TourOverlay.tsx

@@ -0,0 +1,153 @@
+import { memo, type ComponentType } from 'react';
+import { StyleSheet, Dimensions } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import Animated, {
+  useAnimatedProps,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+import { useTour } from '../hooks/useTour';
+import type { InternalTourContextType } from '../types';
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+const AnimatedView = Animated.View as unknown as ComponentType<any>;
+
+// Helper to create rounded rect path
+// x,y are top-left coordinates
+const createRoundedRectPath = (
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  r: number
+) => {
+  'worklet';
+  // Ensure radius doesn't exceed dimensions
+  const radius = Math.min(r, w / 2, h / 2);
+
+  // Standard SVG Path command for rounded rect
+  return `
+    M ${x + radius}, ${y}
+    H ${x + w - radius}
+    A ${radius} ${radius} 0 0 1 ${x + w}, ${y + radius}
+    V ${y + h - radius}
+    A ${radius} ${radius} 0 0 1 ${x + w - radius}, ${y + h}
+    H ${x + radius}
+    A ${radius} ${radius} 0 0 1 ${x}, ${y + h - radius}
+    V ${y + radius}
+    A ${radius} ${radius} 0 0 1 ${x + radius}, ${y}
+    Z
+  `;
+};
+
+export const TourOverlay = memo(() => {
+  const {
+    targetX,
+    targetY,
+    targetWidth,
+    targetHeight,
+    targetRadius,
+    opacity,
+    config,
+    currentStep,
+    steps,
+  } = useTour() as InternalTourContextType;
+
+  // Create the d string for the mask
+  // Outer rectangle covers the whole screen
+  // Inner shape is the "hole"
+  // fillRule="evenodd" makes the intersection transparent
+  const animatedProps = useAnimatedProps(() => {
+    const holePath = createRoundedRectPath(
+      targetX.value,
+      targetY.value,
+      targetWidth.value,
+      targetHeight.value,
+      targetRadius.value
+    );
+
+    const path = `
+      M 0,0 
+      H ${SCREEN_WIDTH} 
+      V ${SCREEN_HEIGHT} 
+      H 0 
+      Z 
+      ${holePath}
+    `;
+
+    return {
+      d: path,
+      fillOpacity: opacity.value,
+    };
+  });
+
+  const step = currentStep ? steps[currentStep] : null;
+  const isClickable = step?.clickable ?? false;
+
+  // Interaction Logic:
+  // 1. preventInteraction = true:
+  //    - Wrapper pointerEvents = 'box-none' (pass through) BUT SVG is auto?
+  //    - Actually, if we want to block OUTSIDE but allow INSIDE:
+  //      - SVG path normally blocks where it draws (the dark part).
+  //      - The 'hole' is empty, so touches pass through the hole to the app?
+  //      - YES, with fillRule="evenodd", the hole effectively has no fill.
+  //      - So if SVG is 'auto', touching the dark mask is blocked (if we consume touch).
+  //      - Touching the hole goes through to the app (GOOD for clickable).
+  //    - IF we want to BLOCK the hole (clickable=false):
+  //      - We need a transparent view covering the hole that consumes touches.
+  //
+  // 2. preventInteraction = false (default):
+  //    - Overlay shouldn't block anything?
+  //    - pointerEvents='none' on the whole container.
+
+  const shouldBlockOutside = 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?
+  // Usually preventInteraction=false means "just show the highlighter, let user do whatever".
+
+  const containerPointerEvents =
+    shouldBlockOutside && currentStep ? 'box-none' : 'none';
+
+  // If blocking outside, the SVG (which is absolute fill) needs to catch touches on the dark part.
+
+  // Blocker style for the hole (only if NOT clickable)
+  const blockerStyle = useAnimatedStyle(() => {
+    return {
+      position: 'absolute',
+      left: targetX.value,
+      top: targetY.value,
+      width: targetWidth.value,
+      height: targetHeight.value,
+      // We can match radius too if needed, but rect is fine for touch area usually
+      borderRadius: targetRadius.value,
+    };
+  });
+
+  return (
+    <AnimatedView
+      pointerEvents={containerPointerEvents}
+      style={StyleSheet.absoluteFill}
+    >
+      <Svg height="100%" width="100%" style={StyleSheet.absoluteFill}>
+        <AnimatedPath
+          animatedProps={animatedProps as any}
+          fill="black" // The backdrop color
+          fillRule="evenodd"
+          onPress={() => {
+            // Consume touch on the backdrop?
+          }}
+        />
+      </Svg>
+      {/* If strictly blocking interaction AND current step is NOT clickable, we cover the hole */}
+      {shouldBlockOutside && !isClickable && currentStep && (
+        <AnimatedView
+          style={blockerStyle}
+          pointerEvents="auto" // Catch touches
+          // backgroundColor="transparent" // Default
+        />
+      )}
+    </AnimatedView>
+  );
+});