react-native-tuto-showcase 1.0.4 → 1.0.5

package/dist/components/LottieAboveTarget.d.ts

@@ -1,6 +1,18 @@
 import React from 'react';
 import { AnyShape } from '../types/shapes';
-export default function LottieAboveTarget({ shapes, lottie, }: {
+export type LottiePlacement = 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center' | 'center';
+type Offset = {
+    dx?: number;
+    dy?: number;
+};
+type Props = {
     shapes: AnyShape[];
     lottie: React.ReactElement<any>;
-}): import("react/jsx-runtime").JSX.Element | null;
+    overlayWidth: number;
+    overlayHeight: number;
+    placement?: LottiePlacement;
+    offset?: Offset;
+};
+export default function LottieAboveTarget({ shapes, lottie, overlayWidth, overlayHeight, placement, // 👈 الديفولت: فوق في النص بالنسبة للشاشة كلها
+offset, }: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/LottieAboveTarget.js

@@ -1,17 +1,56 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-export default function LottieAboveTarget({ shapes, lottie, }) {
-    if (!lottie || shapes.length === 0)
+const PADDING_H = 24;
+const PADDING_V = 32;
+export default function LottieAboveTarget({ shapes, lottie, overlayWidth, overlayHeight, placement = 'top-center', // 👈 الديفولت: فوق في النص بالنسبة للشاشة كلها
+offset, }) {
+    if (!lottie)
         return null;
-    const focus = shapes[shapes.length - 1];
     const layout = StyleSheet.flatten(lottie.props?.style) || {};
     const lw = layout.width ?? 100;
     const lh = layout.height ?? 100;
-    const cx = focus.cx;
-    const topOfHole = focus.type === 'circle' ? focus.cy - focus.r : focus.y;
-    const top = topOfHole - lh + 50;
-    const left = cx - lw / 2;
+    let top = 0;
+    let left = 0;
+    switch (placement) {
+        case 'top-left':
+            top = PADDING_V;
+            left = PADDING_H;
+            break;
+        case 'top-right':
+            top = PADDING_V;
+            left = overlayWidth - lw - PADDING_H;
+            break;
+        case 'top-center':
+            top = PADDING_V;
+            left = (overlayWidth - lw) / 2;
+            break;
+        case 'bottom-left':
+            top = overlayHeight - lh - PADDING_V;
+            left = PADDING_H;
+            break;
+        case 'bottom-right':
+            top = overlayHeight - lh - PADDING_V;
+            left = overlayWidth - lw - PADDING_H;
+            break;
+        case 'bottom-center':
+            top = overlayHeight - lh - PADDING_V;
+            left = (overlayWidth - lw) / 2;
+            break;
+        case 'center':
+            top = (overlayHeight - lh) / 2;
+            left = (overlayWidth - lw) / 2;
+            break;
+        default:
+            top = PADDING_V;
+            left = (overlayWidth - lw) / 2;
+            break;
+    }
+    // ✅ اختياري: إزاحة إضافية
+    if (offset?.dx)
+        left += offset.dx;
+    if (offset?.dy)
+        top += offset.dy;
     return (_jsx(View, { pointerEvents: "none", style: [
             styles.container,
             { top, left, width: lw, height: lh },

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { LottiePlacement } from './components/LottieAboveTarget';
 export type TutoShowcaseHandle = {
     on: (r: any) => any;
     show: () => void;
@@ -7,5 +8,20 @@ export type TutoShowcaseHandle = {
     isShowOnce: (key: string) => boolean;
     resetShowOnce: (key: string) => void;
 };
-declare const TutoShowcase: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<TutoShowcaseHandle>>;
+type TutoShowcaseProps = {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    buttonText?: string;
+    buttonTextStyle?: any;
+    buttonContainerStyle?: any;
+    overlayBackgroundColor?: string;
+    onGotIt?: () => void;
+    lottie?: React.ReactElement<any> | null;
+    lottiePlacement?: LottiePlacement;
+    lottieOffset?: {
+        dx?: number;
+        dy?: number;
+    };
+};
+declare const TutoShowcase: React.ForwardRefExoticComponent<TutoShowcaseProps & React.RefAttributes<TutoShowcaseHandle>>;
 export default TutoShowcase;

package/dist/index.js

@@ -11,7 +11,8 @@ import { usePulseAnimation } from './hooks/usePulseAnimation';
 import { buildActionsFactory } from './helpers/buildActions';
 import { useContentPosition } from './hooks/useContentPosition';
 const DEFAULT_BG = 'rgba(0,0,0,0.78)';
-const TutoShowcase = forwardRef(function Tuto({ title, description, buttonText = 'GOT IT', buttonTextStyle, buttonContainerStyle, overlayBackgroundColor, onGotIt, lottie, }, ref) {
+const TutoShowcase = forwardRef(function Tuto({ title, description, buttonText = 'GOT IT', buttonTextStyle, buttonContainerStyle, overlayBackgroundColor, onGotIt, lottie, lottiePlacement, // 👈 خدناه من props
+lottieOffset, }, ref) {
     // -------- Hooks يجب أن تكون في الأعلى وبنفس الترتيب دائماً --------
     const [visible, setVisible] = useState(false);
     const [bgColor, setBgColor] = useState(overlayBackgroundColor || DEFAULT_BG);
@@ -84,7 +85,7 @@ const TutoShowcase = forwardRef(function Tuto({ title, description, buttonText =
     // ✅ الشرط هنا بعد كل الـ hooks
     if (!visible)
         return null;
-    return (_jsx(Modal, { visible: true, transparent: true, animationType: "fade", children: _jsx(TouchableWithoutFeedback, { onPress: onOverlayPress, children: _jsxs(View, { ref: rootRef, onLayout: onLayout, style: [StyleSheet.absoluteFill, { direction: 'ltr' }], children: [_jsx(Overlay, { width: width, height: height, shapes: shapes, bgColor: bgColor, spotScale: spotScale, spotOpacity: spotOpacity }), lottie && _jsx(LottieAboveTarget, { shapes: shapes, lottie: lottie }), (title || description) && (_jsx(ContentSection, { title: title, description: description, buttonText: buttonText, buttonTextStyle: buttonTextStyle, buttonContainerStyle: buttonContainerStyle, coords: coords, onPress: () => {
+    return (_jsx(Modal, { visible: true, transparent: true, animationType: "fade", children: _jsx(TouchableWithoutFeedback, { onPress: onOverlayPress, children: _jsxs(View, { ref: rootRef, onLayout: onLayout, style: [StyleSheet.absoluteFill, { direction: 'ltr' }], children: [_jsx(Overlay, { width: width, height: height, shapes: shapes, bgColor: bgColor, spotScale: spotScale, spotOpacity: spotOpacity }), lottie && (_jsx(LottieAboveTarget, { shapes: shapes, lottie: lottie, overlayWidth: width, overlayHeight: height, placement: lottiePlacement, offset: lottieOffset })), (title || description) && (_jsx(ContentSection, { title: title, description: description, buttonText: buttonText, buttonTextStyle: buttonTextStyle, buttonContainerStyle: buttonContainerStyle, coords: coords, onPress: () => {
                             onGotIt?.();
                             dismiss();
                         } })), _jsx(GestureHints, { hints: hints })] }) }) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-tuto-showcase",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Customizable tutorial / spotlight overlay for React Native (onboarding, feature tours, coachmarks).",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -26,18 +26,18 @@
   ],
   "author": "Ahmed Mohamed Ali Ali Hegazy",
   "license": "MIT",
+  "packageManager": "yarn@3.6.4+sha512.e70835d4d6d62c07be76b3c1529cb640c7443f0fe434ef4b6478a5a399218cbaf1511b396b3c56eb03bc86424cff2320f6167ad2fde273aa0df6e60b7754029f",
   "peerDependencies": {
+    "@react-native-async-storage/async-storage": ">=1.17.0",
     "react": ">=18.0.0",
-    "react-native": ">=0.72.0"
-  },
-  "dependencies": {
-    "@react-native-async-storage/async-storage": "^1.23.0",
-    "react-native-svg": "^13.14.0"
+    "react-native": ">=0.72.0",
+    "react-native-svg": ">=13.0.0"
   },
-  "packageManager": "yarn@3.6.4+sha512.e70835d4d6d62c07be76b3c1529cb640c7443f0fe434ef4b6478a5a399218cbaf1511b396b3c56eb03bc86424cff2320f6167ad2fde273aa0df6e60b7754029f",
   "devDependencies": {
+    "@react-native-async-storage/async-storage": "^1.23.0",
     "@types/react": "^19.2.7",
     "@types/react-native": "^0.72.8",
+    "react-native-svg": "^13.14.0",
     "typescript": "^5.9.3"
   }
 }