Comments (3)
This is actually not possible with the current mask implementation. We currently do not have any plans for supporting masks with custom shapes. PRs are welcome though!
from react-native-copilot.
hi, i was going through this problem. you can edit the file in
/node_modules/react-native-copilot/dist/index.js
`var init_SvgMask = __esm({
position,
canvasSize
}) => {
-
const cornerRadius = 10; // You can adjust this value based on the desired radius const positionX = position.x._value; const positionY = position.y._value; const sizeX = size.x._value; const sizeY = size.y._value;
-
return `M0,0H${canvasSize.x}V${canvasSize.y}H0V0ZM${positionX},${positionY}H${positionX + sizeX}V${positionY + sizeY}H${positionX}V${positionY}Z`;
- return `M0,0H${canvasSize.x}V${canvasSize.y}H0V0Z
- M${positionX + cornerRadius}, ${positionY}
- H${positionX + sizeX - cornerRadius}
- Q${positionX + sizeX}, ${positionY} ${positionX + sizeX}, ${positionY + cornerRadius}
- V${positionY + sizeY - cornerRadius}
- Q${positionX + sizeX}, ${positionY + sizeY} ${positionX + sizeX - cornerRadius}, ${positionY + sizeY}
- H${positionX + cornerRadius}
- Q${positionX}, ${positionY + sizeY} ${positionX}, ${positionY + sizeY - cornerRadius}
- V${positionY + cornerRadius}
- Q${positionX}, ${positionY} ${positionX + cornerRadius}, ${positionY}
- Z
};
from react-native-copilot.
hi, i was going through this problem. you can edit the file in /node_modules/react-native-copilot/dist/index.js
`var init_SvgMask = __esm({ position, canvasSize }) => {
const cornerRadius = 10; // You can adjust this value based on the desired radius const positionX = position.x._value; const positionY = position.y._value; const sizeX = size.x._value; const sizeY = size.y._value;
return `M0,0H${canvasSize.x}V${canvasSize.y}H0V0ZM${positionX},${positionY}H${positionX + sizeX}V${positionY + sizeY}H${positionX}V${positionY}Z`;
return `M0,0H${canvasSize.x}V${canvasSize.y}H0V0Z
M${positionX + cornerRadius}, ${positionY}
H${positionX + sizeX - cornerRadius}
Q${positionX + sizeX}, ${positionY} ${positionX + sizeX}, ${positionY + cornerRadius}
V${positionY + sizeY - cornerRadius}
Q${positionX + sizeX}, ${positionY + sizeY} ${positionX + sizeX - cornerRadius}, ${positionY + sizeY}
H${positionX + cornerRadius}
Q${positionX}, ${positionY + sizeY} ${positionX}, ${positionY + sizeY - cornerRadius}
V${positionY + cornerRadius}
Q${positionX}, ${positionY} ${positionX + cornerRadius}, ${positionY}
Z
};
in case anyone has a hard time copying the changes that @paragspacetotech does, this is the patch-package file
index b9127da..ef60d7b 100644
--- a/node_modules/react-native-copilot/dist/index.js
+++ b/node_modules/react-native-copilot/dist/index.js
@@ -188,11 +188,12 @@ var init_SvgMask = __esm({
position,
canvasSize
}) => {
+ const cornerRadius = 12; // You can adjust this value based on the desired radius
const positionX = position.x._value;
const positionY = position.y._value;
const sizeX = size.x._value;
const sizeY = size.y._value;
- return `M0,0H${canvasSize.x}V${canvasSize.y}H0V0ZM${positionX},${positionY}H${positionX + sizeX}V${positionY + sizeY}H${positionX}V${positionY}Z`;
+ return `M0,0H${canvasSize.x}V${canvasSize.y}H0V0ZM${positionX + cornerRadius}, ${positionY}H${positionX + sizeX - cornerRadius}Q${positionX + sizeX}, ${positionY} ${positionX + sizeX}, ${positionY + cornerRadius}V${positionY + sizeY - cornerRadius}Q${positionX + sizeX}, ${positionY + sizeY} ${positionX + sizeX - cornerRadius}, ${positionY + sizeY}H${positionX + cornerRadius}Q${positionX}, ${positionY + sizeY} ${positionX}, ${positionY + sizeY - cornerRadius}V${positionY + cornerRadius}Q${positionX}, ${positionY} ${positionX + cornerRadius}, ${positionY}Z`;
};
SvgMask = ({
size,
from react-native-copilot.
Related Issues (20)
- Autostart on mount HOT 11
- Error: AnimatedValue: Attempting to set value to undefined HOT 2
- toolTipStyle HOT 3
- Modal HOT 1
- Would like to run a function when "finish" is called, but not if "skip" was pressed
- Automatic movement of tooltips in scroll view HOT 5
- Restarting the guide HOT 1
- Multiple Copilot Tutorials HOT 1
- React-Navigation - tour on multiple screens HOT 2
- Need copilot step for multiple element on custom component HOT 3
- TooltipCustomComponent Props issue
- Tooltip view is not being set properly with Parent and Child components. HOT 4
- Is it possible to style the button of react-native-copilot. HOT 1
- Doesn't work with Expo Web
- start(fromStep?: string) is not working and not even starting the tutorial HOT 1
- Android Overlay doesn't work HOT 1
- Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? HOT 3
- Calling start() on useEffect does not register/use all steps, only the first one HOT 3
- No RTL support
- Is it posible to have one step that is a custom component and a second step that is a button inside that custom component?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-copilot.