react-native-tree-multi-select 3.0.0-beta.5 → 3.0.0-beta.7

package/src/hooks/useScrollToNode.ts

@@ -62,6 +62,27 @@ export interface ScrollToNodeHandlerRef<ID> {
   scrollToNodeID: (params: ScrollToNodeParams<ID>) => void;
 }
 
+/**
+ * Scroll a just-moved node into view with the `DropAutoScrollOptions` defaults
+ * (animated, centered). Deferred a tick so the post-move expand/render settles
+ * first. Shared by the interactive drop path and the programmatic `moveNode`.
+ */
+export function scrollMovedNodeIntoView<ID>(
+  scrollToNodeHandlerRef: RefObject<ScrollToNodeHandlerRef<ID> | null>,
+  nodeId: ID,
+  options: boolean | { animated?: boolean; viewPosition?: number; viewOffset?: number; } | undefined
+): void {
+  const custom = typeof options === "object" ? options : {};
+  setTimeout(() => {
+    scrollToNodeHandlerRef.current?.scrollToNodeID({
+      nodeId,
+      animated: custom.animated ?? true,
+      viewPosition: custom.viewPosition ?? 0.5,
+      viewOffset: custom.viewOffset,
+    });
+  }, 0);
+}
+
 // Enum representing the two milestones needed before scrolling
 enum ExpandQueueAction {
   EXPANDED,

package/src/index.tsx

@@ -22,7 +22,8 @@ import type {
     DragCancelEvent,
     DragEndEvent,
     DragStartEvent,
-    DropPosition
+    DropPosition,
+    MoveResult
 } from "./types/dragDrop.types";
 
 export * from "./TreeView";
@@ -47,6 +48,7 @@ export type {
     DragEndEvent,
     DragStartEvent,
     DropPosition,
+    MoveResult,
     DragDropCustomizations,
     DragOverlayStyleProps,
     DragOverlayComponentProps,

package/src/store/treeView.store.ts

@@ -158,6 +158,12 @@ export function deleteTreeViewStore(id: string) {
     treeViewStores.delete(id);
 }
 
+/**
+ * Returns the per-instance bound Zustand store for the given id. The returned
+ * store is itself callable as a hook with a selector - e.g.
+ * `useTreeViewStore(id)(useShallow(state => ...))` - which is why it keeps the
+ * `use` prefix. Internal helper; not part of the public API.
+ */
 export function useTreeViewStore<ID = string>(id: string) {
     return getTreeViewStore<ID>(id);
 }

package/src/types/dragDrop.types.ts

@@ -1,5 +1,3 @@
-import type { TreeNode } from "./treeView.types";
-
 /** Where a node is dropped relative to the target: as a sibling above/below, or as a child inside */
 export type DropPosition = "above" | "below" | "inside";
 
@@ -15,19 +13,37 @@ export interface DragCancelEvent<ID = string> {
     draggedNodeId: ID;
 }
 
-/** Event payload passed to the onDragEnd callback after a successful drop */
-export interface DragEndEvent<ID = string> {
-    /** The id of the node that was dragged */
+/**
+ * Lightweight description of a completed move. Returned by the imperative
+ * `moveNode` ref method and delivered to the `onDragEnd` callback. It carries
+ * only the delta (ids, position, and the moved node's previous/new parent and
+ * index) so a consumer can update external state or persist the change without
+ * handling a full tree copy. To get the full reordered tree, use the
+ * `getTreeData` ref method or reconstruct it with the exported `moveTreeNode`.
+ */
+export interface MoveResult<ID = string> {
+    /** The id of the node that was moved */
     draggedNodeId: ID;
-    /** The id of the target node where the dragged node was dropped */
+    /** The id of the target node the move was relative to */
     targetNodeId: ID;
     /** Where relative to the target: above/below = sibling, inside = child */
     position: DropPosition;
-    /** The reordered tree data after the move */
-    newTreeData: TreeNode<ID>[];
+    /** Parent id before the move (null if it was a root-level node) */
+    previousParentId: ID | null;
+    /** Parent id after the move (null if it is now a root-level node) */
+    newParentId: ID | null;
+    /** Index within the previous parent's children (or the root array) */
+    previousIndex: number;
+    /** Index within the new parent's children (or the root array) */
+    newIndex: number;
 }
 
-/** Internal representation of the current drop target during a drag operation */
+/** Event payload passed to the onDragEnd callback after a successful drop. */
+export type DragEndEvent<ID = string> = MoveResult<ID>;
+
+/** Internal representation of the current drop target during a drag operation.
+ *  Held in a ref and read at commit time; the per-node visual indicator is driven
+ *  separately by the store (dropTargetNodeId / dropPosition / dropLevel). */
 export interface DropTarget<ID = string> {
     /** The id of the node being hovered over */
     targetNodeId: ID;
@@ -37,8 +53,4 @@ export interface DropTarget<ID = string> {
     position: DropPosition;
     /** Whether this is a valid drop location (e.g. not dropping a node onto itself or its descendants) */
     isValid: boolean;
-    /** Nesting level of the target node */
-    targetLevel: number;
-    /** Y-coordinate for positioning the drop indicator */
-    indicatorTop: number;
 }

package/src/types/treeView.types.ts

@@ -1,5 +1,6 @@
 import { ComponentType, RefObject } from "react";
 import type {
+    GestureResponderEvent,
     StyleProp,
     TextProps,
     TouchableOpacityProps,
@@ -13,7 +14,7 @@ import type {
 import type {
     CheckboxProps as _CheckboxProps
 } from "@futurejj/react-native-checkbox";
-import type { DragCancelEvent, DragEndEvent, DragStartEvent, DropPosition } from "./dragDrop.types";
+import type { DragCancelEvent, DragEndEvent, DragStartEvent, DropPosition, MoveResult } from "./dragDrop.types";
 
 /** The tri-state value of a checkbox: checked, unchecked, or indeterminate */
 export type CheckboxValueType = boolean | "indeterminate";
@@ -85,13 +86,17 @@ export interface NodeRowProps<ID = string> {
 
 /** Touch handlers to spread on a drag handle element within a custom node row */
 export interface DragHandleProps {
-    onTouchStart: (e: any) => void;
+    /** Arms the long-press timer that initiates a drag. Fires on finger down. */
+    onTouchStart: (e: GestureResponderEvent) => void;
+    /** Cancels a pending long-press, or ends a drag the PanResponder never
+     *  captured (finger lifted without movement). Fires on finger up. */
     onTouchEnd: () => void;
+    /** Cancels a pending long-press when the system interrupts the touch. */
     onTouchCancel: () => void;
 }
 
 /** Customization options for tree item appearance and behavior */
-export interface TreeItemCustomizations<ID> {
+export interface TreeItemCustomizations<ID = string> {
     /** Style props for the built-in checkbox view */
     checkBoxViewStyleProps?: BuiltInCheckBoxViewStyleProps;
 
@@ -110,7 +115,7 @@ export interface TreeItemCustomizations<ID> {
 }
 
 /** Internal props for a single node in the list (extends TreeItemCustomizations) */
-export interface NodeProps<ID> extends TreeItemCustomizations<ID> {
+export interface NodeProps<ID = string> extends TreeItemCustomizations<ID> {
     /** The flattened tree node data */
     node: __FlattenedTreeNode__<ID>;
     /** Nesting depth of this node */
@@ -133,8 +138,9 @@ export interface NodeProps<ID> extends TreeItemCustomizations<ID> {
     ) => void;
     /** Callback when a touch ends on this node */
     onNodeTouchEnd?: () => void;
-    /** Callback reporting this node's measured height */
-    onItemLayout?: (height: number) => void;
+    /** Callback reporting this node's measured height, keyed by its stable node id
+     *  (used for accurate variable-height drop targeting) */
+    onItemLayout?: (id: ID, height: number) => void;
     /** Customizations for drag-and-drop visuals */
     dragDropCustomizations?: DragDropCustomizations<ID>;
 }
@@ -164,8 +170,20 @@ export interface DragAndDropOptions<ID = string> {
     autoScrollSpeed?: number;
     /** Offset of the dragged overlay from the finger, in item-height units. Default: -2 (two items above finger) */
     dragOverlayOffset?: number;
+    /** Advanced: extra vertical correction for the drag overlay, in item-height units,
+     *  added on top of `dragOverlayOffset`. Compensates for Android reporting touch
+     *  `locationY` differently from iOS. Default: -2 on Android, 0 on other platforms.
+     *  Override only if the overlay sits noticeably off from the finger on a device. */
+    overlayYCorrection?: number;
     /** Delay in ms before auto-expanding a collapsed node during drag hover. Default: 800 */
     autoExpandDelay?: number;
+    /** Auto-expand a collapsed node while hovering "inside" it during a drag.
+     *  Default: true. Set false to disable hover-to-expand entirely. */
+    autoExpand?: boolean;
+    /** Animate the drag overlay with a magnetic "snap" spring when the effective drop
+     *  level changes. Default: true. Set false to keep the overlay tracking the level
+     *  without the spring animation (e.g. for reduced-motion preferences). */
+    magneticSnap?: boolean;
     /** Customizations for drag-and-drop visuals (overlay, indicator, opacity) */
     customizations?: DragDropCustomizations<ID>;
 
@@ -180,14 +198,15 @@ export interface DragAndDropOptions<ID = string> {
     /** Callback to determine if a node can be dragged.
      *  Return false to prevent dragging this node. Default: all nodes are draggable. */
     canDrag?: (node: TreeNode<ID>) => boolean;
-    /** Auto-scroll to the dropped node after a successful drop.
+    /** Auto-scroll to the dropped node after a successful drop, if it ended up
+     *  outside the viewport (no scroll when the node is already visible).
      *  Pass `false` to disable, `true` for defaults, or an object to customize.
      *  Default: `{ enabled: true, animated: true, viewPosition: 0.5 }` */
     autoScrollToDroppedNode?: boolean | DropAutoScrollOptions;
 }
 
 /** Props for the NodeList component that renders the flattened tree */
-export interface NodeListProps<ID> extends TreeItemCustomizations<ID> {
+export interface NodeListProps<ID = string> extends TreeItemCustomizations<ID> {
     /** Additional props passed to the underlying FlashList */
     treeFlashListProps?: TreeFlatListProps;
 
@@ -298,9 +317,42 @@ export interface TreeViewRef<ID = string> {
     /** Get a map of child node IDs to their parent node IDs */
     getChildToParentMap: () => Map<ID, ID>;
 
+    /** Get the current tree data held by the component (the original `data` prop
+     *  before any move, or the reordered structure after a drag-and-drop / `moveNode`).
+     *  Useful for reading the full tree without pushing it through the `onDragEnd` /
+     *  `moveNode` move delta.
+     *
+     *  NOTE: this returns a LIVE internal reference - treat it as read-only and do
+     *  NOT mutate it in place. Mutating it desyncs the internal node maps and the
+     *  reinit-skip diff. Clone it (e.g. with the exported `moveTreeNode`, or
+     *  `structuredClone`) before modifying. */
+    getTreeData: () => TreeNode<ID>[];
+
     /** Programmatically move a node to a new position in the tree.
-     *  Works like a drag-and-drop but without user interaction. */
-    moveNode: (nodeId: ID, targetNodeId: ID, position: DropPosition) => void;
+     *  Works like a drag-and-drop but without user interaction.
+     *  Returns a lightweight {@link MoveResult} describing the move, or `null` if it
+     *  was a no-op / invalid (e.g. moving a node onto itself or into its own
+     *  descendant, or - with `{ validate: true }` - blocked by `canDrop`,
+     *  `maxDepth`, or `canNodeHaveChildren`).
+     *
+     *  `{ validate: true }` enforces the `canDrop` / `maxDepth` / `canNodeHaveChildren`
+     *  rules - but those rules live on the `dragAndDrop` prop, so validation only runs
+     *  when a `dragAndDrop` prop is configured. Without it, `validate` is ignored (in
+     *  dev a warning is logged) and the move proceeds subject only to the structural
+     *  no-op checks.
+     *
+     *  `{ scrollToNode: true }` scrolls the moved node into view after the move (the
+     *  interactive drag does this automatically; programmatic moves do not by default).
+     *  Pass a {@link DropAutoScrollOptions} object to customize the scroll. */
+    moveNode: (
+        nodeId: ID,
+        targetNodeId: ID,
+        position: DropPosition,
+        options?: {
+            validate?: boolean;
+            scrollToNode?: boolean | DropAutoScrollOptions;
+        }
+    ) => MoveResult<ID> | null;
 }
 
 /** Controls how checkbox selection propagates through the tree hierarchy */
@@ -335,6 +387,10 @@ export interface DropIndicatorStyleProps {
     highlightColor?: string;
     /** Border color of the "inside" highlight. Default: "rgba(0, 120, 255, 0.5)" */
     highlightBorderColor?: string;
+    /** Border width of the "inside" highlight box. Default: 2 */
+    highlightBorderWidth?: number;
+    /** Corner radius of the "inside" highlight box. Default: 4 */
+    highlightBorderRadius?: number;
 }
 
 /** Style props for customizing the drag overlay (the "lifted" node ghost) */
@@ -343,12 +399,16 @@ export interface DragOverlayStyleProps {
     backgroundColor?: string;
     /** Shadow color. Default: "#000" */
     shadowColor?: string;
+    /** Shadow offset (iOS). Default: { width: 0, height: 2 } */
+    shadowOffset?: { width: number; height: number; };
     /** Shadow opacity. Default: 0.25 */
     shadowOpacity?: number;
     /** Shadow radius. Default: 4 */
     shadowRadius?: number;
     /** Android elevation. Default: 10 */
     elevation?: number;
+    /** Stacking order of the overlay. Default: 9999 */
+    zIndex?: number;
     /** Custom style applied to the overlay container */
     style?: StyleProp<ViewStyle>;
 }
@@ -372,7 +432,7 @@ export interface DragDropCustomizations<ID = string> {
 /** Props passed to a custom drag overlay component */
 export interface DragOverlayComponentProps<ID = string> {
     /** The node being dragged */
-    node: __FlattenedTreeNode__<ID>;
+    node: TreeNode<ID>;
     /** The nesting level of the dragged node */
     level: number;
     /** The current checkbox value of the dragged node */

package/lib/module/components/DropIndicator.js

@@ -1,79 +0,0 @@
-"use strict";
-
-import { memo } from "react";
-import { Animated, View, StyleSheet } from "react-native";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const DropIndicator = /*#__PURE__*/memo(function DropIndicator(props) {
-  const {
-    position,
-    overlayY,
-    itemHeight,
-    targetLevel,
-    indentationMultiplier
-  } = props;
-  const indent = targetLevel * indentationMultiplier;
-  if (position === "inside") {
-    return /*#__PURE__*/_jsx(Animated.View, {
-      pointerEvents: "none",
-      style: [styles.highlightIndicator, {
-        transform: [{
-          translateY: overlayY
-        }],
-        height: itemHeight,
-        left: indent
-      }]
-    });
-  }
-
-  // For "above", the line is at the overlay's top edge (offset 0)
-  // For "below", the line is at the overlay's bottom edge (offset +itemHeight)
-  const lineOffset = position === "above" ? 0 : itemHeight;
-  return /*#__PURE__*/_jsxs(Animated.View, {
-    pointerEvents: "none",
-    style: [styles.lineContainer, {
-      transform: [{
-        translateY: Animated.add(overlayY, lineOffset - 1)
-      }],
-      left: indent
-    }],
-    children: [/*#__PURE__*/_jsx(View, {
-      style: styles.lineCircle
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.line
-    })]
-  });
-});
-const styles = StyleSheet.create({
-  highlightIndicator: {
-    position: "absolute",
-    left: 0,
-    right: 0,
-    backgroundColor: "rgba(0, 200, 0, 0.2)",
-    borderWidth: 2,
-    borderColor: "rgba(0, 200, 0, 0.6)",
-    borderRadius: 4,
-    zIndex: 9998
-  },
-  lineContainer: {
-    position: "absolute",
-    right: 0,
-    flexDirection: "row",
-    alignItems: "center",
-    height: 3,
-    zIndex: 9998
-  },
-  lineCircle: {
-    width: 10,
-    height: 10,
-    borderRadius: 5,
-    backgroundColor: "#00CC00",
-    marginLeft: -5,
-    marginTop: -4
-  },
-  line: {
-    flex: 1,
-    height: 3,
-    backgroundColor: "#00CC00"
-  }
-});
-//# sourceMappingURL=DropIndicator.js.map

package/lib/module/components/DropIndicator.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["memo","Animated","View","StyleSheet","jsx","_jsx","jsxs","_jsxs","DropIndicator","props","position","overlayY","itemHeight","targetLevel","indentationMultiplier","indent","pointerEvents","style","styles","highlightIndicator","transform","translateY","height","left","lineOffset","lineContainer","add","children","lineCircle","line","create","right","backgroundColor","borderWidth","borderColor","borderRadius","zIndex","flexDirection","alignItems","width","marginLeft","marginTop","flex"],"sourceRoot":"../../../src","sources":["components/DropIndicator.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,OAAO;AAC5B,SAASC,QAAQ,EAAEC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAW1D,OAAO,MAAMC,aAAa,gBAAGR,IAAI,CAAC,SAASQ,aAAaA,CACpDC,KAAyB,EAC3B;EACE,MAAM;IACFC,QAAQ;IACRC,QAAQ;IACRC,UAAU;IACVC,WAAW;IACXC;EACJ,CAAC,GAAGL,KAAK;EAET,MAAMM,MAAM,GAAGF,WAAW,GAAGC,qBAAqB;EAElD,IAAIJ,QAAQ,KAAK,QAAQ,EAAE;IACvB,oBACIL,IAAA,CAACJ,QAAQ,CAACC,IAAI;MACVc,aAAa,EAAC,MAAM;MACpBC,KAAK,EAAE,CACHC,MAAM,CAACC,kBAAkB,EACzB;QACIC,SAAS,EAAE,CAAC;UAAEC,UAAU,EAAEV;QAAS,CAAC,CAAC;QACrCW,MAAM,EAAEV,UAAU;QAClBW,IAAI,EAAER;MACV,CAAC;IACH,CACL,CAAC;EAEV;;EAEA;EACA;EACA,MAAMS,UAAU,GAAGd,QAAQ,KAAK,OAAO,GAAG,CAAC,GAAGE,UAAU;EAExD,oBACIL,KAAA,CAACN,QAAQ,CAACC,IAAI;IACVc,aAAa,EAAC,MAAM;IACpBC,KAAK,EAAE,CACHC,MAAM,CAACO,aAAa,EACpB;MACIL,SAAS,EAAE,CAAC;QAAEC,UAAU,EAAEpB,QAAQ,CAACyB,GAAG,CAACf,QAAQ,EAAEa,UAAU,GAAG,CAAC;MAAE,CAAC,CAAC;MACnED,IAAI,EAAER;IACV,CAAC,CACH;IAAAY,QAAA,gBAEFtB,IAAA,CAACH,IAAI;MAACe,KAAK,EAAEC,MAAM,CAACU;IAAW,CAAE,CAAC,eAClCvB,IAAA,CAACH,IAAI;MAACe,KAAK,EAAEC,MAAM,CAACW;IAAK,CAAE,CAAC;EAAA,CACjB,CAAC;AAExB,CAAC,CAAC;AAEF,MAAMX,MAAM,GAAGf,UAAU,CAAC2B,MAAM,CAAC;EAC7BX,kBAAkB,EAAE;IAChBT,QAAQ,EAAE,UAAU;IACpBa,IAAI,EAAE,CAAC;IACPQ,KAAK,EAAE,CAAC;IACRC,eAAe,EAAE,sBAAsB;IACvCC,WAAW,EAAE,CAAC;IACdC,WAAW,EAAE,sBAAsB;IACnCC,YAAY,EAAE,CAAC;IACfC,MAAM,EAAE;EACZ,CAAC;EACDX,aAAa,EAAE;IACXf,QAAQ,EAAE,UAAU;IACpBqB,KAAK,EAAE,CAAC;IACRM,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBhB,MAAM,EAAE,CAAC;IACTc,MAAM,EAAE;EACZ,CAAC;EACDR,UAAU,EAAE;IACRW,KAAK,EAAE,EAAE;IACTjB,MAAM,EAAE,EAAE;IACVa,YAAY,EAAE,CAAC;IACfH,eAAe,EAAE,SAAS;IAC1BQ,UAAU,EAAE,CAAC,CAAC;IACdC,SAAS,EAAE,CAAC;EAChB,CAAC;EACDZ,IAAI,EAAE;IACFa,IAAI,EAAE,CAAC;IACPpB,MAAM,EAAE,CAAC;IACTU,eAAe,EAAE;EACrB;AACJ,CAAC,CAAC","ignoreList":[]}

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

@@ -1,12 +0,0 @@
-import { Animated } from "react-native";
-import type { DropPosition } from "../types/dragDrop.types";
-interface DropIndicatorProps {
-    position: DropPosition;
-    overlayY: Animated.Value;
-    itemHeight: number;
-    targetLevel: number;
-    indentationMultiplier: number;
-}
-export declare const DropIndicator: import("react").NamedExoticComponent<DropIndicatorProps>;
-export {};
-//# sourceMappingURL=DropIndicator.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"DropIndicator.d.ts","sourceRoot":"","sources":["../../../../src/components/DropIndicator.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAoB,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,UAAU,kBAAkB;IACxB,QAAQ,EAAE,YAAY,CAAC;IACvB,QAAQ,EAAE,QAAQ,CAAC,KAAK,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,qBAAqB,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,aAAa,0DAgDxB,CAAC"}

package/src/components/DropIndicator.tsx

@@ -1,95 +0,0 @@
-import { memo } from "react";
-import { Animated, View, StyleSheet } from "react-native";
-import type { DropPosition } from "../types/dragDrop.types";
-
-interface DropIndicatorProps {
-    position: DropPosition;
-    overlayY: Animated.Value;
-    itemHeight: number;
-    targetLevel: number;
-    indentationMultiplier: number;
-}
-
-export const DropIndicator = memo(function DropIndicator(
-    props: DropIndicatorProps
-) {
-    const {
-        position,
-        overlayY,
-        itemHeight,
-        targetLevel,
-        indentationMultiplier,
-    } = props;
-
-    const indent = targetLevel * indentationMultiplier;
-
-    if (position === "inside") {
-        return (
-            <Animated.View
-                pointerEvents="none"
-                style={[
-                    styles.highlightIndicator,
-                    {
-                        transform: [{ translateY: overlayY }],
-                        height: itemHeight,
-                        left: indent,
-                    },
-                ]}
-            />
-        );
-    }
-
-    // For "above", the line is at the overlay's top edge (offset 0)
-    // For "below", the line is at the overlay's bottom edge (offset +itemHeight)
-    const lineOffset = position === "above" ? 0 : itemHeight;
-
-    return (
-        <Animated.View
-            pointerEvents="none"
-            style={[
-                styles.lineContainer,
-                {
-                    transform: [{ translateY: Animated.add(overlayY, lineOffset - 1) }],
-                    left: indent,
-                },
-            ]}
-        >
-            <View style={styles.lineCircle} />
-            <View style={styles.line} />
-        </Animated.View>
-    );
-});
-
-const styles = StyleSheet.create({
-    highlightIndicator: {
-        position: "absolute",
-        left: 0,
-        right: 0,
-        backgroundColor: "rgba(0, 200, 0, 0.2)",
-        borderWidth: 2,
-        borderColor: "rgba(0, 200, 0, 0.6)",
-        borderRadius: 4,
-        zIndex: 9998,
-    },
-    lineContainer: {
-        position: "absolute",
-        right: 0,
-        flexDirection: "row",
-        alignItems: "center",
-        height: 3,
-        zIndex: 9998,
-    },
-    lineCircle: {
-        width: 10,
-        height: 10,
-        borderRadius: 5,
-        backgroundColor: "#00CC00",
-        marginLeft: -5,
-        marginTop: -4,
-    },
-    line: {
-        flex: 1,
-        height: 3,
-        backgroundColor: "#00CC00",
-    },
-});