From 006d8147d20bf9a69f72331a6b28986194d6fd1b Mon Sep 17 00:00:00 2001 From: Mahabeer Date: Fri, 27 Mar 2026 09:51:14 +0530 Subject: [PATCH 01/10] feat: add labelButtonStyle prop to Tooltip and CopilotModal components --- src/components/CopilotModal.tsx | 20 ++++++++++---------- src/components/default-ui/Tooltip.tsx | 10 +++++----- src/types.ts | 10 +++++++--- 3 files changed, 22 insertions(+), 18 deletions(-) diff --git a/src/components/CopilotModal.tsx b/src/components/CopilotModal.tsx index 772ab05c..09b41c7b 100644 --- a/src/components/CopilotModal.tsx +++ b/src/components/CopilotModal.tsx @@ -52,6 +52,7 @@ export const CopilotModal = forwardRef( animationDuration = 400, tooltipComponent: TooltipComponent = Tooltip, tooltipStyle = {}, + labelButtonStyle = {}, stepNumberComponent: StepNumberComponent = StepNumber, overlay = typeof NativeModules.RNSVGSvgViewManager !== "undefined" ? "svg" @@ -272,15 +273,11 @@ export const CopilotModal = forwardRef( } }; - useImperativeHandle( - ref, - () => { - return { - animateMove, - }; - }, - [animateMove], - ); + useImperativeHandle(ref, () => { + return { + animateMove, + }; + }, [animateMove]); const modalVisible = containerVisible || visible; const contentVisible = layout != null && containerVisible; @@ -361,7 +358,10 @@ export const CopilotModal = forwardRef( key="tooltip" style={[styles.tooltip, tooltipStyles, tooltipStyle]} > - + ); diff --git a/src/components/default-ui/Tooltip.tsx b/src/components/default-ui/Tooltip.tsx index a624f712..85120a77 100644 --- a/src/components/default-ui/Tooltip.tsx +++ b/src/components/default-ui/Tooltip.tsx @@ -8,7 +8,7 @@ import { styles } from "../style"; import type { TooltipProps } from "../../types"; import { useCopilot } from "../../contexts/CopilotProvider"; -export const Tooltip = ({ labels }: TooltipProps) => { +export const Tooltip = ({ labels, labelButtonStyle = {} }: TooltipProps) => { const { goToNext, goToPrev, stop, currentStep, isFirstStep, isLastStep } = useCopilot(); @@ -33,21 +33,21 @@ export const Tooltip = ({ labels }: TooltipProps) => { {!isLastStep ? ( - + ) : null} {!isFirstStep ? ( - + ) : null} {!isLastStep ? ( - + ) : ( - + )} diff --git a/src/types.ts b/src/types.ts index 9ba8c31f..b4a38570 100644 --- a/src/types.ts +++ b/src/types.ts @@ -2,6 +2,8 @@ import type { Animated, LayoutRectangle, NativeMethods, + StyleProp, + TextStyle, ViewStyle, } from "react-native"; @@ -44,6 +46,7 @@ export type Labels = Partial< export interface TooltipProps { labels: Labels; + labelButtonStyle?: StyleProp; } export interface MaskProps { @@ -69,15 +72,16 @@ export interface CopilotOptions { animationDuration?: number; tooltipComponent?: React.ComponentType; tooltipStyle?: ViewStyle; - stepNumberComponent?: React.ComponentType; + stepNumberComponent?: React.ComponentType; animated?: boolean; labels?: Labels; androidStatusBarVisible?: boolean; svgMaskPath?: SvgMaskPathFunction; verticalOffset?: number; arrowColor?: string; - arrowSize?: number - margin?: number + arrowSize?: number; + margin?: number; stopOnOutsideClick?: boolean; backdropColor?: string; + labelButtonStyle?: StyleProp; } From cf60934941a463d2d0784a70bd61548ddc21baf4 Mon Sep 17 00:00:00 2001 From: Mahabeer Date: Fri, 27 Mar 2026 09:57:58 +0530 Subject: [PATCH 02/10] chore: update package name and version, enhance README for clarity and maintenance --- README.md | 35 ++++++++++++++++++++++++----------- package.json | 14 +++++++------- 2 files changed, 31 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index b4530f5c..fa132545 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,28 @@ -

React Native Copilot

+

@mr-mahabeer/react-native-copilot

+ +

+ This is a maintained fork of react-native-copilot with bug fixes and improvements. +

+ +## Why this fork? + +- **Fixes pending issues** — Addresses open problems from the upstream project where practical. +- **Active maintenance** — Regular updates, reviews, and releases for dependents who need a supported line. + +## Credits + +This project is based on [react-native-copilot](https://github.com/mohebifar/react-native-copilot) by Mohamad Mohebifar. @@ -31,11 +44,11 @@ ## Installation ``` -yarn add react-native-copilot +yarn add @mr-mahabeer/react-native-copilot # or with npm: -npm install --save react-native-copilot +npm install --save @mr-mahabeer/react-native-copilot ``` **Optional**: If you want to have the smooth SVG animation, you should install and link [`react-native-svg`](https://github.com/software-mansion/react-native-svg). @@ -45,7 +58,7 @@ npm install --save react-native-copilot Wrap the portion of your app that you want to use copilot with inside ``: ```js -import { CopilotProvider } from "react-native-copilot"; +import { CopilotProvider } from "@mr-mahabeer/react-native-copilot"; const AppWithCopilot = () => { return ( @@ -65,7 +78,7 @@ import { CopilotProvider, CopilotStep, walkthroughable, -} from "react-native-copilot"; +} from "@mr-mahabeer/react-native-copilot"; const CopilotText = walkthroughable(Text); @@ -284,7 +297,7 @@ const customSvgPath = (args) => { The components wrapped inside `CopilotStep`, will receive a `copilot` prop with a mutable `ref` and `onLayou` which the outermost rendered element of the component or the element that you want the tooltip be shown around, must extend. ```js -import { CopilotStep } from "react-native-copilot"; +import { CopilotStep } from "@mr-mahabeer/react-native-copilot"; const CustomComponent = ({ copilot }) => ( @@ -368,7 +381,7 @@ List of available events is: **Example:** ```js -import { useCopilot } from "react-native-copilot"; +import { useCopilot } from "@mr-mahabeer/react-native-copilot"; const HomeScreen = () => { const { copilotEvents } = useCopilot(); diff --git a/package.json b/package.json index 46d32076..7f2e720e 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "react-native-copilot", - "version": "3.3.3", - "description": "Make an interactive step by step tour guide for you react-native app", + "name": "@mr-mahabeer/react-native-copilot", + "version": "3.3.4", + "description": "Maintained fork of react-native-copilot with bug fixes and improvements", "main": "dist/index.js", "types": "dist/index.d.ts", "module": "dist/index.mjs", @@ -16,7 +16,7 @@ }, "repository": { "type": "git", - "url": "git+https://github.com/mohebifar/react-native-copilot.git" + "url": "git+https://github.com/mahabeer-dev/react-native-copilot.git" }, "keywords": [ "react-native", @@ -29,12 +29,12 @@ "files": [ "dist" ], - "author": "Mohamad Mohebifar ", + "author": "Mr Mahabeer", "license": "MIT", "bugs": { - "url": "https://github.com/mohebifar/react-native-copilot/issues" + "url": "https://github.com/mahabeer-dev/react-native-copilot/issues" }, - "homepage": "https://github.com/mohebifar/react-native-copilot#readme", + "homepage": "https://github.com/mahabeer-dev/react-native-copilot#readme", "devDependencies": { "@testing-library/jest-native": "^5.4.3", "@testing-library/react-native": "^12.4.3", From 5761a6c19e0be110c77b7d50ee5fdab5c1686d90 Mon Sep 17 00:00:00 2001 From: Mahabeer Date: Fri, 27 Mar 2026 10:17:31 +0530 Subject: [PATCH 03/10] chore: bump version to 3.3.5 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7f2e720e..726335e7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@mr-mahabeer/react-native-copilot", - "version": "3.3.4", + "version": "3.3.5", "description": "Maintained fork of react-native-copilot with bug fixes and improvements", "main": "dist/index.js", "types": "dist/index.d.ts", From cdbc4471a8cd5ff87604f55d2db875a323a49a28 Mon Sep 17 00:00:00 2001 From: Mahabeer Date: Tue, 31 Mar 2026 15:28:21 +0530 Subject: [PATCH 04/10] chore: bump version to 3.3.6 and add shouldShowStepNumber option to CopilotModal --- package.json | 5 ++-- src/components/CopilotModal.tsx | 42 ++++++++++++++++++++------------- src/types.ts | 1 + 3 files changed, 29 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 726335e7..8f990b91 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@mr-mahabeer/react-native-copilot", - "version": "3.3.5", + "version": "3.3.6", "description": "Maintained fork of react-native-copilot with bug fixes and improvements", "main": "dist/index.js", "types": "dist/index.d.ts", @@ -12,7 +12,8 @@ "lint": "eslint src/ --ext .ts,.tsx", "test": "jest", "changeset": "changeset", - "release": "changeset publish" + "release": "changeset publish", + "build:pack": "yarn build && npm pack" }, "repository": { "type": "git", diff --git a/src/components/CopilotModal.tsx b/src/components/CopilotModal.tsx index 09b41c7b..7b4fdd16 100644 --- a/src/components/CopilotModal.tsx +++ b/src/components/CopilotModal.tsx @@ -54,6 +54,7 @@ export const CopilotModal = forwardRef( tooltipStyle = {}, labelButtonStyle = {}, stepNumberComponent: StepNumberComponent = StepNumber, + shouldShowStepNumber = true, overlay = typeof NativeModules.RNSVGSvgViewManager !== "undefined" ? "svg" : "view", @@ -273,11 +274,15 @@ export const CopilotModal = forwardRef( } }; - useImperativeHandle(ref, () => { - return { - animateMove, - }; - }, [animateMove]); + useImperativeHandle( + ref, + () => { + return { + animateMove, + }; + }, + [animateMove], + ); const modalVisible = containerVisible || visible; const contentVisible = layout != null && containerVisible; @@ -339,18 +344,21 @@ export const CopilotModal = forwardRef( } return ( <> - - - + {shouldShowStepNumber && ( + + + + )} + {!!arrowSize && ( )} diff --git a/src/types.ts b/src/types.ts index b4a38570..f706ca1b 100644 --- a/src/types.ts +++ b/src/types.ts @@ -84,4 +84,5 @@ export interface CopilotOptions { stopOnOutsideClick?: boolean; backdropColor?: string; labelButtonStyle?: StyleProp; + shouldShowStepNumber?: boolean; } From 9f842dfb4db2d17d135147a05c771ff46af53331 Mon Sep 17 00:00:00 2001 From: Mahabeer Date: Tue, 31 Mar 2026 15:29:28 +0530 Subject: [PATCH 05/10] docs: enhance README with additional options for CopilotProvider, including stopOnOutsideClick, labelButtonStyle, shouldShowStepNumber, arrowSize, and margin --- README.md | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/README.md b/README.md index fa132545..29edcee1 100644 --- a/README.md +++ b/README.md @@ -225,6 +225,34 @@ You can customize the tooltip's arrow color: ``` +### Additional `CopilotProvider` options + +These optional props are available on ``: + +- **`stopOnOutsideClick`** (`boolean`, default `false`) — When `true`, tapping the dimmed backdrop (outside the highlighted step) ends the tour, same as skipping. + +- **`labelButtonStyle`** — `StyleProp` applied to the default tooltip’s action labels (Skip, Previous, Next, Finish). If you use a custom `tooltipComponent`, it receives `labelButtonStyle` (and `labels`) as props—see [`TooltipProps`](https://github.com/mahabeer-dev/react-native-copilot/blob/master/src/types.ts). + +- **`shouldShowStepNumber`** (`boolean`, default `true`) — Set to `false` to hide the circular step-number badge. + +- **`arrowSize`** (`number`, default `6`) — Size of the tooltip pointer (arrow). Use `0` to hide the arrow. + +- **`margin`** (`number`, default `13`) — Minimum spacing between the highlighted area and the tooltip when the library positions the tooltip on screen. + +Example combining several options: + +```js + + + +``` + ### Custom overlay color You can customize the mask color - default is `rgba(0, 0, 0, 0.4)`, by passing a color string to the `CopilotProvider` component. From 6529d3546ae8af0f8e4697f05d6661f9c2f81279 Mon Sep 17 00:00:00 2001 From: Mahabeer Date: Tue, 31 Mar 2026 16:00:57 +0530 Subject: [PATCH 06/10] chore: bump version to 3.3.7 and update arrow styling in CopilotModal and style components --- package.json | 2 +- src/components/CopilotModal.tsx | 7 ++++++- src/components/style.ts | 4 +++- tsup.config.ts | 8 ++++---- 4 files changed, 14 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 8f990b91..e019496c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@mr-mahabeer/react-native-copilot", - "version": "3.3.6", + "version": "3.3.7", "description": "Maintained fork of react-native-copilot with bug fixes and improvements", "main": "dist/index.js", "types": "dist/index.d.ts", diff --git a/src/components/CopilotModal.tsx b/src/components/CopilotModal.tsx index 7b4fdd16..c47a10b3 100644 --- a/src/components/CopilotModal.tsx +++ b/src/components/CopilotModal.tsx @@ -155,7 +155,12 @@ export const CopilotModal = forwardRef( relativeToLeft > relativeToRight ? "left" : "right"; const tooltip: ViewStyle = {}; - const arrow: ViewStyle = {}; + const arrow: ViewStyle = { + width: 0, + height: 0, + backgroundColor: "transparent", + borderWidth: arrowSize, + }; arrow.position = "absolute"; diff --git a/src/components/style.ts b/src/components/style.ts index 13ced248..20b11957 100644 --- a/src/components/style.ts +++ b/src/components/style.ts @@ -18,7 +18,9 @@ export const styles = StyleSheet.create({ }, arrow: { position: "absolute", - borderWidth: ARROW_SIZE, + width: 0, + height: 0, + backgroundColor: "transparent", }, tooltip: { position: "absolute", diff --git a/tsup.config.ts b/tsup.config.ts index 5933a4f7..38da7d6d 100644 --- a/tsup.config.ts +++ b/tsup.config.ts @@ -12,19 +12,19 @@ export default defineConfig({ async onSuccess() { if (process.env.NODE_ENV === "development") { const exampleOutputPath = path.resolve( - "./example/node_modules/react-native-copilot" + "./example/node_modules/react-native-copilot", ); const exampleOutputNodeModulesPath = path.resolve( exampleOutputPath, - "node_modules" + "node_modules", ); await Promise.all( ["dist/index.js", "dist/index.d.ts"].map(async (file) => { const outputPath = path.resolve(exampleOutputPath, file); console.log("Copying file: ", file, "to ->", outputPath); - await fs.copyFile(file, outputPath); - }) + // await fs.copyFile(file, outputPath); + }), ); await fs.rm(exampleOutputNodeModulesPath, { recursive: true, From 1f16586e61529effe100c5eebad97ba467c0a187 Mon Sep 17 00:00:00 2001 From: Mahabeer Date: Tue, 31 Mar 2026 16:01:17 +0530 Subject: [PATCH 07/10] fix: enable file copying in tsup.config.ts for output files --- tsup.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tsup.config.ts b/tsup.config.ts index 38da7d6d..58c5ff07 100644 --- a/tsup.config.ts +++ b/tsup.config.ts @@ -23,7 +23,7 @@ export default defineConfig({ ["dist/index.js", "dist/index.d.ts"].map(async (file) => { const outputPath = path.resolve(exampleOutputPath, file); console.log("Copying file: ", file, "to ->", outputPath); - // await fs.copyFile(file, outputPath); + await fs.copyFile(file, outputPath); }), ); await fs.rm(exampleOutputNodeModulesPath, { From f1a7eb28fbb52531d7a08da8e8e14fec90511da1 Mon Sep 17 00:00:00 2001 From: Mahabeer Date: Wed, 8 Apr 2026 16:02:48 +0530 Subject: [PATCH 08/10] feat: add maskRadius and borderRadius properties to Copilot components for enhanced customization --- src/components/CopilotModal.tsx | 5 ++++- src/components/CopilotStep.tsx | 7 +++++-- src/components/SvgMask.tsx | 31 +++++++++++++++++++++++-------- src/contexts/CopilotProvider.tsx | 26 +++++++++++++------------- src/types.ts | 3 +++ 5 files changed, 48 insertions(+), 24 deletions(-) diff --git a/src/components/CopilotModal.tsx b/src/components/CopilotModal.tsx index c47a10b3..e6b358fb 100644 --- a/src/components/CopilotModal.tsx +++ b/src/components/CopilotModal.tsx @@ -75,7 +75,7 @@ export const CopilotModal = forwardRef( }, ref, ) { - const { stop, currentStep, visible } = useCopilot(); + const { stop, currentStep, visible, steps } = useCopilot(); const [tooltipStyles, setTooltipStyles] = useState({}); const [arrowStyles, setArrowStyles] = useState({}); const [animatedValues] = useState({ @@ -337,6 +337,9 @@ export const CopilotModal = forwardRef( animationDuration={animationDuration} backdropColor={backdropColor} svgMaskPath={svgMaskPath} + borderRadius={ + currentStep ? steps[currentStep?.name]?.maskRadius ?? 0 : 0 + } onClick={handleMaskClick} currentStep={currentStep} /> diff --git a/src/components/CopilotStep.tsx b/src/components/CopilotStep.tsx index e0cdb588..88827e46 100644 --- a/src/components/CopilotStep.tsx +++ b/src/components/CopilotStep.tsx @@ -9,6 +9,7 @@ interface Props { text: string; children: React.ReactElement; active?: boolean; + maskRadius?: number; } export const CopilotStep = ({ @@ -17,6 +18,7 @@ export const CopilotStep = ({ text, children, active = true, + maskRadius = 0, }: Props) => { const registeredName = useRef(null); const { registerStep, unregisterStep } = useCopilot(); @@ -61,10 +63,11 @@ export const CopilotStep = ({ measure, wrapperRef, visible: true, + maskRadius, }); registeredName.current = name; } - }, [name, order, text, registerStep, unregisterStep, active]); + }, [name, order, text, registerStep, unregisterStep, active, maskRadius]); useEffect(() => { if (active) { @@ -81,7 +84,7 @@ export const CopilotStep = ({ ref: wrapperRef, onLayout: () => {}, // Android hack }), - [] + [], ); return React.cloneElement(children, { copilot: copilotProps }); diff --git a/src/components/SvgMask.tsx b/src/components/SvgMask.tsx index 7b9359e8..0d066bbf 100644 --- a/src/components/SvgMask.tsx +++ b/src/components/SvgMask.tsx @@ -17,15 +17,27 @@ const defaultSvgPath: SvgMaskPathFunction = ({ size, position, canvasSize, + borderRadius: br = 0, }): string => { - const positionX = (position.x as any)._value as number; - const positionY = (position.y as any)._value as number; - const sizeX = (size.x as any)._value as number; - const sizeY = (size.y as any)._value as number; + const x = (position.x as any)._value as number; + const y = (position.y as any)._value as number; + const w = (size.x as any)._value as number; + const h = (size.y as any)._value as number; - return `M0,0H${canvasSize.x}V${canvasSize.y}H0V0ZM${positionX},${positionY}H${ - positionX + sizeX - }V${positionY + sizeY}H${positionX}V${positionY}Z`; + const r = Math.max(0, Math.min(br, w / 2, h / 2)); + + if (r <= 0) { + return `M0,0H${canvasSize.x}V${canvasSize.y}H0V0ZM${x},${y}H${x + w}V${y + h}H${x}V${y}Z`; + } + + return [ + `M0,0H${canvasSize.x}V${canvasSize.y}H0V0Z`, + `M${x + r},${y}`, + `H${x + w - r}A${r},${r} 0 0 1 ${x + w},${y + r}`, + `V${y + h - r}A${r},${r} 0 0 1 ${x + w - r},${y + h}`, + `H${x + r}A${r},${r} 0 0 1 ${x},${y + h - r}`, + `V${y + r}A${r},${r} 0 0 1 ${x + r},${y}Z`, + ].join(""); }; export const SvgMask = ({ @@ -37,6 +49,7 @@ export const SvgMask = ({ animated, backdropColor, svgMaskPath = defaultSvgPath, + borderRadius, onClick, currentStep, }: MaskProps) => { @@ -58,12 +71,13 @@ export const SvgMask = ({ position: positionValue, canvasSize, step: currentStep, + borderRadius, }); if (maskRef.current) { maskRef.current.setNativeProps({ d }); } - }, [canvasSize, currentStep, svgMaskPath, positionValue, sizeValue]); + }, [canvasSize, currentStep, svgMaskPath, positionValue, sizeValue, borderRadius]); const animate = useCallback( (toSize: ValueXY = size, toPosition: ValueXY = position) => { @@ -140,6 +154,7 @@ export const SvgMask = ({ position: positionValue, canvasSize, step: currentStep, + borderRadius, })} /> diff --git a/src/contexts/CopilotProvider.tsx b/src/contexts/CopilotProvider.tsx index 331c2735..57d2b691 100644 --- a/src/contexts/CopilotProvider.tsx +++ b/src/contexts/CopilotProvider.tsx @@ -16,7 +16,7 @@ import { import { OFFSET_WIDTH } from "../components/style"; import { useStateWithAwait } from "../hooks/useStateWithAwait"; import { useStepsMap } from "../hooks/useStepsMap"; -import { type CopilotOptions, type Step } from "../types"; +import type { StepsMap, CopilotOptions, Step } from "../types"; // eslint-disable-next-line @typescript-eslint/consistent-type-definitions type Events = { @@ -31,7 +31,7 @@ interface CopilotContextType { currentStep: Step | undefined; start: ( fromStep?: string, - suppliedScrollView?: ScrollView | null + suppliedScrollView?: ScrollView | null, ) => Promise; stop: () => Promise; goToNext: () => Promise; @@ -43,6 +43,7 @@ interface CopilotContextType { isLastStep: boolean; currentStepNumber: number; totalStepsNumber: number; + steps: StepsMap; } /* @@ -96,7 +97,7 @@ export const CopilotProvider = ({ y: size.y - OFFSET_WIDTH / 2 + verticalOffset, }); }, - [verticalOffset] + [verticalOffset], ); const setCurrentStep = useCallback( @@ -112,7 +113,7 @@ export const CopilotProvider = ({ (_x, y, _w, h) => { const yOffset = y > 0 ? y - h / 2 : 0; scrollView.scrollTo({ y: yOffset, animated: false }); - } + }, ); } } @@ -123,10 +124,10 @@ export const CopilotProvider = ({ void moveModalToStep(step); } }, - scrollView != null ? 100 : 0 + scrollView != null ? 100 : 0, ); }, - [copilotEvents, moveModalToStep, scrollView, setCurrentStepState] + [copilotEvents, moveModalToStep, scrollView, setCurrentStepState], ); const start = useCallback( @@ -163,7 +164,7 @@ export const CopilotProvider = ({ setCurrentStep, setVisibility, steps, - ] + ], ); const stop = useCallback(async () => { @@ -179,7 +180,7 @@ export const CopilotProvider = ({ async (n: number) => { await setCurrentStep(getNthStep(n)); }, - [getNthStep, setCurrentStep] + [getNthStep, setCurrentStep], ); const prev = useCallback(async () => { @@ -202,6 +203,7 @@ export const CopilotProvider = ({ isLastStep, currentStepNumber, totalStepsNumber, + steps, }), [ registerStep, @@ -218,16 +220,14 @@ export const CopilotProvider = ({ isLastStep, currentStepNumber, totalStepsNumber, - ] + steps, + ], ); return ( <> - + {children} diff --git a/src/types.ts b/src/types.ts index f706ca1b..d8b33ea8 100644 --- a/src/types.ts +++ b/src/types.ts @@ -16,6 +16,7 @@ export interface Step { wrapperRef: React.RefObject; measure: () => Promise; text: string; + maskRadius?: number; } export interface CopilotContext { @@ -34,6 +35,7 @@ export type SvgMaskPathFunction = (args: { position: Animated.ValueXY; canvasSize: ValueXY; step: Step; + borderRadius?: number; }) => string; export type StepsMap = Record; @@ -58,6 +60,7 @@ export interface MaskProps { animated: boolean; backdropColor: string; svgMaskPath?: SvgMaskPathFunction; + borderRadius: number; layout: { width: number; height: number; From c563eb2535b89e425051fb5b4b410836c8eae23d Mon Sep 17 00:00:00 2001 From: Mahabeer Date: Wed, 8 Apr 2026 16:42:20 +0530 Subject: [PATCH 09/10] chore: bump version to 3.3.8 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e019496c..188673bc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@mr-mahabeer/react-native-copilot", - "version": "3.3.7", + "version": "3.3.8", "description": "Maintained fork of react-native-copilot with bug fixes and improvements", "main": "dist/index.js", "types": "dist/index.d.ts", From 3cd5850d7f700afb2adedf68ab4d6f71346dc351 Mon Sep 17 00:00:00 2001 From: Mahabeer Date: Thu, 9 Apr 2026 09:17:29 +0530 Subject: [PATCH 10/10] chore: bump version to 3.3.9 and update CopilotStep to support deleted prop for improved step management --- package.json | 2 +- src/components/CopilotStep.tsx | 14 ++++++++++---- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 188673bc..05b1e47d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@mr-mahabeer/react-native-copilot", - "version": "3.3.8", + "version": "3.3.9", "description": "Maintained fork of react-native-copilot with bug fixes and improvements", "main": "dist/index.js", "types": "dist/index.d.ts", diff --git a/src/components/CopilotStep.tsx b/src/components/CopilotStep.tsx index 88827e46..6dfb4bbf 100644 --- a/src/components/CopilotStep.tsx +++ b/src/components/CopilotStep.tsx @@ -9,6 +9,7 @@ interface Props { text: string; children: React.ReactElement; active?: boolean; + deleted?: boolean; maskRadius?: number; } @@ -18,8 +19,10 @@ export const CopilotStep = ({ text, children, active = true, + deleted = false, maskRadius = 0, }: Props) => { + const shouldRegister = active && !deleted; const registeredName = useRef(null); const { registerStep, unregisterStep } = useCopilot(); const wrapperRef = React.useRef(null); @@ -52,7 +55,7 @@ export const CopilotStep = ({ }; useEffect(() => { - if (active) { + if (shouldRegister) { if (registeredName.current && registeredName.current !== name) { unregisterStep(registeredName.current); } @@ -66,18 +69,21 @@ export const CopilotStep = ({ maskRadius, }); registeredName.current = name; + } else if (registeredName.current) { + unregisterStep(registeredName.current); + registeredName.current = null; } - }, [name, order, text, registerStep, unregisterStep, active, maskRadius]); + }, [name, order, text, registerStep, unregisterStep, shouldRegister, maskRadius]); useEffect(() => { - if (active) { + if (shouldRegister) { return () => { if (registeredName.current) { unregisterStep(registeredName.current); } }; } - }, [name, unregisterStep, active]); + }, [name, unregisterStep, shouldRegister]); const copilotProps = useMemo( () => ({