related-ui-components 1.8.6 → 1.8.7

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

@@ -1,3 +1,4 @@
+import "react-native-reanimated";
 export * from "./theme";
 export * from "./components";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAQA,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,yBAAyB,CAAC;AAOjC,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAC"}

package/lib/typescript/module/app.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-declare const MyScreen: () => React.JSX.Element;
-export default MyScreen;
+declare const MockWheelScreen: () => React.JSX.Element;
+export default MockWheelScreen;
 //# sourceMappingURL=app.d.ts.map

package/lib/typescript/module/app.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,QAAA,MAAM,QAAQ,yBAiGb,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../../src/app.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAaxC,QAAA,MAAM,eAAe,yBA6BpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/typescript/module/components/Wheel/Wheel.d.ts

@@ -9,8 +9,10 @@ export interface SpinWheelItem {
 }
 interface SpinWheelProps {
     items: SpinWheelItem[];
+    predeterminedWinner?: SpinWheelItem | string | number;
     size?: number;
     spinDuration?: number;
+    friction?: number;
     enabled?: boolean;
     onSpinStart?: () => void;
     onSpinEnd?: (item: SpinWheelItem) => void;
@@ -21,10 +23,10 @@ interface SpinWheelProps {
     knobStyle?: ViewStyle;
     actionButtonStyle?: ViewStyle;
     actionButtonTextStyle?: TextStyle;
+    wheelBorderColor?: string;
     wheelTextColor?: string;
     knobColor?: string;
     centerComponent?: React.ReactNode;
-    winner?: SpinWheelItem | null;
 }
 declare const SpinWheel: React.FC<SpinWheelProps>;
 export default SpinWheel;

package/lib/typescript/module/components/Wheel/Wheel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Wheel/Wheel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAOL,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAGtB,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AASD,UAAU,cAAc;IACtB,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,qBAAqB,CAAC,EAAE,SAAS,CAAC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,MAAM,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;CAC/B;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAqOvC,CAAC;AAsDF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Wheel/Wheel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAOL,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAGtB,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA+BD,UAAU,cAAc;IAEtB,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,mBAAmB,CAAC,EAAE,aAAa,GAAG,MAAM,GAAG,MAAM,CAAC;IAGtD,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAGlB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;IAG1C,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,qBAAqB,CAAC,EAAE,SAAS,CAAC;IAGlC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACnC;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAwRvC,CAAC;AAqDF,eAAe,SAAS,CAAC"}

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

@@ -1,3 +1,4 @@
+import "react-native-reanimated";
 export * from "./theme";
 export * from "./components";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAQA,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,yBAAyB,CAAC;AAOjC,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "related-ui-components",
   "main": "./src/index.ts",
-  "version": "1.8.6",
+  "version": "1.8.7",
   "scripts": {
     "start": "expo start",
     "reset-project": "node ./scripts/reset-project.js",

package/src/app.tsx

@@ -1,109 +1,45 @@
 import React, { useState } from "react";
 import { View, Button } from "react-native";
-import { FilterResult, Filters, Popup, UnlockRewards } from "./components";
-import BRANDS from "./constants/BRANDS";
-import { Ionicons } from "@expo/vector-icons";
-import { useTheme } from "./theme";
-import RedeemedVoucherSheet from "./components/RedeemedVoucher/RedeemedVoucherSheet";
-import { GestureHandlerRootView } from "react-native-gesture-handler";
+import SpinWheel, { SpinWheelItem } from "./components/Wheel/Wheel";
 
-const MyScreen = () => {
-  const [isFilterVisible, setIsFilterVisible] = useState(false);
+const wheelItems: SpinWheelItem[] = [
+  { id: 1, label: "Prize 1", color: "#FF6384" },
+  { id: 2, label: "Prize 2", color: "#36A2EB" },
+  { id: 3, label: "Prize 3", color: "#FFCE56" },
+  { id: 4, label: "Prize 4", color: "#4BC0C0" },
+  { id: 5, label: "Prize 5", color: "#9966FF" },
+  { id: 6, label: "Prize 6", color: "#FF9F40" },
+];
 
-  const { theme } = useTheme();
-
-  const handleApplyFilters = (result: FilterResult) => {
-    console.log("Filters applied:", result);
-    // Process filter results...
-  };
-
-  const rewardsData = [
-    {
-      icon: (
-        <Ionicons name="briefcase-outline" size={30} color={theme.primary} />
-      ),
-      activeIcon: (
-        <Ionicons name="briefcase-outline" size={30} color={theme.onPrimary} />
-      ),
-      title: "Aqua Guardian",
-      description:
-        "Maintain water usage below the community average for a month.",
-      isActive: false,
-      status: "0/1",
-      statusBackgroundColor: "#FFCDD2",
-      statusTextColor: "#D32F2F",
-    },
-    {
-      icon: <Ionicons name="heart-outline" size={30} color={theme.primary} />,
-      activeIcon: (
-        <Ionicons name="heart-outline" size={30} color={theme.onPrimary} />
-      ),
-      title: "Wellness Warrior",
-      description: "Complete 30 days of healthy hydration tracking.",
-      isActive: true,
-      status: "15/30",
-      statusBackgroundColor: "#C8E6C9",
-      statusTextColor: "#388E3C",
-    },
-    {
-      icon: <Ionicons name="airplane-outline" size={24} color={theme.helper} />,
-      activeIcon: (
-        <Ionicons name="airplane-outline" size={24} color={theme.primary} />
-      ),
-      title: "Eco Traveler",
-      description: "Log 5 trips where you chose sustainable travel options.",
-      isActive: false,
-      status: "2/5",
-      statusBackgroundColor: theme.disabled,
-      statusTextColor: theme.text,
-    },
-    {
-      icon: <Ionicons name="school-outline" size={24} color={theme.helper} />,
-      activeIcon: (
-        <Ionicons name="school-outline" size={24} color={theme.primary} />
-      ),
-      title: "Knowledge Seeker",
-      description: "Complete all water conservation learning modules.",
-      isActive: false,
-      status: "3/5",
-      statusBackgroundColor: theme.disabled,
-      statusTextColor: theme.text,
-    },
-    {
-      icon: <Ionicons name="settings-outline" size={24} color={theme.helper} />,
-      activeIcon: (
-        <Ionicons name="settings-outline" size={24} color={theme.primary} />
-      ),
-      title: "Smart Saver",
-      description: "Set up and use all water-saving features in the app.",
-      isActive: true,
-      status: "4/4",
-      statusBackgroundColor: theme.primary,
-      statusTextColor: theme.background,
-    },
-  ];
+const MockWheelScreen = () => {
+  const [winner, setWinner] = useState<SpinWheelItem | null>(null);
 
   return (
-    <>
-    <GestureHandlerRootView>
-      <RedeemedVoucherSheet
-        visible={true}
-        onClose={() => {}}
-        code="0000P78SHV50KK"
-        // amount={100}
-        expiry="22/01/2025"
-        currency="USD"
-        title="Voucher Activated!"
-        // primaryButtonColors={["red", "blue"]}
-        onMyVouchersButtonPress={() => console.log("My Vouchers pressed")}
-        onCopyCode={(code) => console.log("Copied:", code)}
-        // To use custom icons:
-        // amountIconComponent={<Image source={YourCustomAmountIcon} style={{width: 20, height: 20, marginRight: 5}} />}
-        // renderCopyIcon={() => <Text style={{fontSize: 22, color: 'blue'}}>COPY</Text>}
+    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+      <SpinWheel
+        items={wheelItems}
+        predeterminedWinner={wheelItems[2]}
+        onSpinEnd={(item) => {
+          alert(`Winner: ${item.label}`);
+          setWinner(null);
+        }}
+        size={300}
+        spinButtonText="Spin Randomly"
       />
-      </GestureHandlerRootView>
-    </>
+
+      <View style={{ flexDirection: "row", marginTop: 20 }}>
+        <Button
+          title="Spin to Prize 3"
+          onPress={() => setWinner(wheelItems[2])}
+        />
+        <View style={{ width: 20 }} />
+        <Button
+          title="Spin Random"
+          onPress={() => setWinner(null)}
+        />
+      </View>
+    </View>
   );
 };
 
-export default MyScreen;
+export default MockWheelScreen;

package/src/components/Wheel/Wheel.tsx

@@ -19,20 +19,53 @@ export interface SpinWheelItem {
   textColor?: string;
 }
 
+//default random colors
 const colors = [
-  "#FF0000", "#FFA500", "#FFFF00", "#008000", "#0000FF", "#800080",
-  "#FFC0CB", "#00FFFF", "#FF00FF", "#00FF00", "#4B0082", "#EE82EE",
-  "#40E0D0", "#FFD700", "#C0C0C0", "#FFDAB9", "#E6E6FA", "#008080",
-  "#FF7F50", "#DC143C", "#87CEEB", "#7FFF00", "#CCCCFF", "#FF6347", "#FA8072"
+  "#FF0000", // Red
+  "#FFA500", // Orange
+  "#FFFF00", // Yellow
+  "#008000", // Green
+  "#0000FF", // Blue
+  "#800080", // Purple
+  "#FFC0CB", // Pink
+  "#00FFFF", // Cyan
+  "#FF00FF", // Magenta
+  "#00FF00", // Lime
+  "#4B0082", // Indigo
+  "#EE82EE", // Violet
+  "#40E0D0", // Turquoise
+  "#FFD700", // Gold
+  "#C0C0C0", // Silver
+  "#FFDAB9", // Peach
+  "#E6E6FA", // Lavender
+  "#008080", // Teal
+  "#FF7F50", // Coral
+  "#DC143C", // Crimson
+  "#87CEEB", // Sky Blue
+  "#7FFF00", // Chartreuse
+  "#CCCCFF", // Periwinkle
+  "#FF6347", // Tomato
+  "#FA8072", // Salmon
 ];
 
 interface SpinWheelProps {
+  // Data
   items: SpinWheelItem[];
+  predeterminedWinner?: SpinWheelItem | string | number; // New prop
+
+  // Dimensions
   size?: number;
+
+  // Behavior
   spinDuration?: number;
+  friction?: number; // Note: friction prop is declared but not used in original logic
   enabled?: boolean;
+
+  // Events
   onSpinStart?: () => void;
   onSpinEnd?: (item: SpinWheelItem) => void;
+
+  // Styling
   containerStyle?: ViewStyle;
   centerStyle?: ViewStyle;
   spinButtonText?: string;
@@ -40,14 +73,19 @@ interface SpinWheelProps {
   knobStyle?: ViewStyle;
   actionButtonStyle?: ViewStyle;
   actionButtonTextStyle?: TextStyle;
+
+  // Custom colors
+  wheelBorderColor?: string; 
   wheelTextColor?: string;
   knobColor?: string;
-  centerComponent?: React.ReactNode;
-  winner?: SpinWheelItem | null; // Winner to spin to
+
+  // Custom components
+  centerComponent?: React.ReactNode; // Note: centerComponent prop is declared but not used
 }
 
 const SpinWheel: React.FC<SpinWheelProps> = ({
   items,
+  predeterminedWinner, // Destructure new prop
   size = 300,
   spinDuration = 5000,
   enabled = true,
@@ -61,52 +99,72 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
   knobColor = "#D81E5B",
   actionButtonStyle,
   actionButtonTextStyle,
+  wheelBorderColor,
   wheelTextColor = "#FFFFFF",
-  winner,
 }) => {
   const wheelItems = items.length > 0 ? items : [];
+
   const [spinning, setSpinning] = useState(false);
-  const [internalWinner, setInternalWinner] = useState<SpinWheelItem | null>(null);
+  const [_, setWinner] = useState<SpinWheelItem | null>(null);
   const rotateValue = useRef(new Animated.Value(0)).current;
+
+  // Track rotation manually for calculations
   const rotationRef = useRef(0);
 
+  // Update tracked rotation when animation completes
   useEffect(() => {
     const listener = rotateValue.addListener(({ value }) => {
       rotationRef.current = value;
     });
+
     return () => {
       rotateValue.removeListener(listener);
     };
   }, [rotateValue]);
 
-  const anglePerItem = 360 / wheelItems.length;
+  // Calculate angle for each segment
+  const anglePerItem =
+    wheelItems.length > 0 ? 360 / wheelItems.length : 0;
 
-  // Generate wheel paths and text positions
+  // Create wheel segments
   const generateWheelPaths = () => {
+    if (wheelItems.length === 0) return [];
     return wheelItems.map((item, index) => {
       const startAngle = index * anglePerItem;
       const endAngle = (index + 1) * anglePerItem;
+
       const startRad = (startAngle * Math.PI) / 180;
       const endRad = (endAngle * Math.PI) / 180;
+
       const x1 = size / 2 + (size / 2) * Math.cos(startRad);
       const y1 = size / 2 + (size / 2) * Math.sin(startRad);
       const x2 = size / 2 + (size / 2) * Math.cos(endRad);
       const y2 = size / 2 + (size / 2) * Math.sin(endRad);
+
       const largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
+
       const pathData = [
         `M ${size / 2} ${size / 2}`,
         `L ${x1} ${y1}`,
         `A ${size / 2} ${size / 2} 0 ${largeArcFlag} 1 ${x2} ${y2}`,
         "Z",
       ].join(" ");
+
       const midRad = ((startAngle + endAngle) / 2) * (Math.PI / 180);
       const textX = size / 2 + size * 0.32 * Math.cos(midRad);
       const textY = size / 2 + size * 0.32 * Math.sin(midRad);
+
+      // decorationX and decorationY are calculated but not used in the provided JSX
+      // const decorationX = size / 2 + size * 0.43 * Math.cos(midRad);
+      // const decorationY = size / 2 + size * 0.43 * Math.sin(midRad);
+
       return {
         path: pathData,
         item,
         textX,
         textY,
+        // decorationX,
+        // decorationY,
         angle: (startAngle + endAngle) / 2,
       };
     });
@@ -114,56 +172,82 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
 
   const wheelPaths = generateWheelPaths();
 
-  // Helper: get index of a SpinWheelItem
-  const getItemIndex = (target: SpinWheelItem) =>
-    wheelItems.findIndex((item) => item.id === target.id);
+  // Handle spin button press
+  const handleSpin = () => {
+    if (spinning || !enabled || wheelItems.length === 0) return;
 
-  // Helper: spin to a given index
-  const spinToIndex = (targetIndex: number, callbackItem: SpinWheelItem) => {
     setSpinning(true);
     onSpinStart?.();
 
-    // The pointer is at 270deg (top), so we want the winner to land there.
-    // The center of the segment is at: (index + 0.5) * anglePerItem
-    const winnerAngle =
-      360 - ((targetIndex + 0.5) * anglePerItem - 270);
+    let targetRotation = 0;
+    let winnerTargetIndex = -1;
+
+    if (predeterminedWinner) {
+      const winnerId =
+        typeof predeterminedWinner === "object"
+          ? predeterminedWinner.id
+          : predeterminedWinner;
+      winnerTargetIndex = wheelItems.findIndex((item) => item.id === winnerId);
+    }
+
+    if (winnerTargetIndex !== -1) {
+      const targetSegmentCenterAngle =
+        (winnerTargetIndex + 0.5) * anglePerItem;
+
+      const targetNormalizedAngle =
+        (270 - targetSegmentCenterAngle + 360) % 360;
+
+      const currentAbsoluteAngle = rotationRef.current * 360;
+      const currentNormalizedAngle = (currentAbsoluteAngle % 360 + 360) % 360;
+
+      // Additional angle needed to reach the targetNormalizedAngle from currentNormalizedAngle
+      const angleOffset =
+        (targetNormalizedAngle - currentNormalizedAngle + 360) % 360;
+
+      // Number of full spins (e.g., 3 to 5)
+      const numberOfFullSpins = 3 + Math.floor(Math.random() * 3); // 3, 4, or 5 spins
+      targetRotation = numberOfFullSpins * 360 + angleOffset;
+
+      // Ensure minimum rotation if already aligned (e.g. if angleOffset is 0)
+      if (targetRotation < 360) {
+        targetRotation += 360 * (3 + Math.floor(Math.random() * 3));
+      }
 
-    // Add extra spins for effect
-    const extraSpins = 3;
-    const currentRotation = rotationRef.current * 360;
-    const targetRotation = currentRotation + extraSpins * 360 + winnerAngle;
+    } else {
+      const randomSpins = 3 + Math.random() * 2;
+      const randomAngle = Math.random() * 360;
+      targetRotation = 360 * randomSpins + randomAngle;
+    }
 
     Animated.timing(rotateValue, {
-      toValue: targetRotation / 360,
+      toValue: rotationRef.current + targetRotation / 360,
       duration: spinDuration,
       easing: Easing.out(Easing.cubic),
       useNativeDriver: true,
-    }).start(() => {
-      setSpinning(false);
-      setInternalWinner(callbackItem);
-      onSpinEnd?.(callbackItem);
-    });
+    }).start(() => handleSpinEnd());
   };
 
-  // If winner prop changes, spin to it
-  useEffect(() => {
-    if (!winner || spinning) return;
-    const winnerIndex = getItemIndex(winner);
-    if (winnerIndex === -1) return;
-    spinToIndex(winnerIndex, winner);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [winner]);
-
-  // Handle random spin (if no winner is set)
-  const handleSpin = () => {
-    if (spinning || !enabled) return;
-    // If winner prop is set, ignore button (or you can allow override)
-    if (winner) return;
-
-    // Pick a random winner
-    const randomIndex = Math.floor(Math.random() * wheelItems.length);
-    const randomWinner = wheelItems[randomIndex];
-    spinToIndex(randomIndex, randomWinner);
+  // Handle spin completion
+  const handleSpinEnd = () => {
+    setSpinning(false);
+
+    const normalizedAngle = (rotationRef.current * 360) % 360;
+    const winningIndex = Math.floor(
+      ((normalizedAngle - 270) % 360) / anglePerItem
+    );
+    const adjustedIndex =
+      (wheelItems.length - 1 - winningIndex) % wheelItems.length;
+
+    const finalWinnerIndex =
+      adjustedIndex >= 0 ? adjustedIndex : wheelItems.length + adjustedIndex;
+
+    if (finalWinnerIndex >= 0 && finalWinnerIndex < wheelItems.length) {
+      const winningItem = wheelItems[finalWinnerIndex];
+      setWinner(winningItem);
+      onSpinEnd?.(winningItem);
+    } else if (wheelItems.length > 0) {
+      onSpinEnd?.(wheelItems[0]); 
+    }
   };
 
   // Animation interpolation for rotation
@@ -190,32 +274,38 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
           <Svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
             <G>
               {wheelPaths.map(
-                ({ path, item, textX, textY, angle }, index) => (
-                  <React.Fragment key={item.id}>
-                    <Path
-                      d={path}
-                      fill={
-                        !item.color
-                          ? colors[index % colors.length]
-                          : item.color
-                      }
-                      stroke="#000000"
-                      strokeWidth={1}
-                    />
-                    <SvgText
-                      x={textX}
-                      y={textY}
-                      fill={item.textColor || wheelTextColor}
-                      fontSize={wheelTextStyle?.fontSize || 14}
-                      fontWeight={wheelTextStyle?.fontWeight || "bold"}
-                      textAnchor="middle"
-                      alignmentBaseline="central"
-                      transform={`rotate(${angle + 180}, ${textX}, ${textY})`}
-                    >
-                      {item.label}
-                    </SvgText>
-                  </React.Fragment>
-                )
+                ({ path, item, textX, textY, angle }, index) => {
+                  return (
+                    <React.Fragment key={item.id}>
+                      <Path
+                        d={path}
+                        fill={
+                          item.color == "" || item.color == null
+                            ? colors[
+                                Math.floor(Math.random() * colors.length)
+                              ]
+                            : item.color
+                        }
+                        stroke="#000000"
+                        strokeWidth={1}
+                      />
+                      <SvgText
+                        x={textX}
+                        y={textY}
+                        fill={item.textColor || wheelTextColor}
+                        fontSize={wheelTextStyle?.fontSize || 14}
+                        fontWeight={
+                          (wheelTextStyle?.fontWeight as any) || "bold"
+                        }
+                        textAnchor="middle"
+                        alignmentBaseline="central"
+                        transform={`rotate(${angle + 180}, ${textX}, ${textY} )`}
+                      >
+                        {item.label}
+                      </SvgText>
+                    </React.Fragment>
+                  );
+                }
               )}
             </G>
           </Svg>
@@ -232,13 +322,11 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
                 { translateX: -size / 10 },
                 { translateY: -size / 10 },
               ],
-              borderRadius: size / 5,
+              borderRadius: size / 5, // Should be (size / 5) / 2 for a circle
             },
             centerStyle,
           ]}
-        >
-          {/** Optional: custom center component */}
-        </View>
+        />
 
         {/* The pointer is a triangle on top */}
         <View style={styles.pointerPosition}>
@@ -264,7 +352,7 @@ const SpinWheel: React.FC<SpinWheelProps> = ({
         >
           <TouchableOpacity
             onPress={handleSpin}
-            disabled={spinning || !enabled || !!winner}
+            disabled={spinning || !enabled || wheelItems.length === 0}
             style={[styles.actionButton, actionButtonStyle]}
           >
             <Text style={[styles.actionButtonText, actionButtonTextStyle]}>
@@ -282,7 +370,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     marginTop: 20,
-    marginBottom: 70,
+    marginBottom: 70, // Space for the button
   },
   wheelContainer: {
     overflow: "hidden",
@@ -310,10 +398,9 @@ const styles = StyleSheet.create({
     borderStyle: "solid",
     borderLeftWidth: 10,
     borderRightWidth: 10,
-    borderBottomWidth: 15,
+    borderBottomWidth: 15, 
     borderLeftColor: "transparent",
     borderRightColor: "transparent",
-    borderBottomColor: "#D81E5B",
   },
   actionButton: {
     paddingHorizontal: 30,

package/src/index.ts

@@ -1,10 +1,10 @@
-// import { registerRootComponent } from 'expo';
-// import "react-native-reanimated";
+import { registerRootComponent } from 'expo';
+import "react-native-reanimated";
 
 
-// import App from "./app";
+import App from "./app";
 
-// registerRootComponent(App);
+registerRootComponent(App);
 
 export * from "./theme"
 export * from "./components";