@korsolutions/guidon 1.0.20 → 1.0.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/commonjs/components/GuidonOverlay.js +47 -42
- package/dist/commonjs/components/GuidonOverlay.js.map +1 -1
- package/dist/module/components/GuidonOverlay.js +47 -42
- package/dist/module/components/GuidonOverlay.js.map +1 -1
- package/dist/typescript/commonjs/components/GuidonOverlay.d.ts.map +1 -1
- package/dist/typescript/module/components/GuidonOverlay.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/GuidonOverlay.tsx +48 -46
|
@@ -11,7 +11,6 @@ var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
|
|
|
11
11
|
var _store = require("../store.js");
|
|
12
12
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
13
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
14
|
-
const AnimatedSvg = _reactNativeReanimated.default.createAnimatedComponent(_reactNativeSvg.default);
|
|
15
14
|
const DEFAULT_THEME = {
|
|
16
15
|
backdropColor: "#000000",
|
|
17
16
|
backdropOpacity: 0.7,
|
|
@@ -97,18 +96,21 @@ function GuidonOverlay({
|
|
|
97
96
|
// Native: full backdrop without cutout
|
|
98
97
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
|
|
99
98
|
onPress: onBackdropPress,
|
|
100
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
99
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
|
|
101
100
|
style: [styles.container, animatedStyle],
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
101
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
|
|
102
|
+
width: screenWidth,
|
|
103
|
+
height: screenHeight,
|
|
104
|
+
viewBox: `0 0 ${screenWidth} ${screenHeight}`,
|
|
105
|
+
style: _reactNative.StyleSheet.absoluteFill,
|
|
106
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
|
|
107
|
+
x: "0",
|
|
108
|
+
y: "0",
|
|
109
|
+
width: "100%",
|
|
110
|
+
height: "100%",
|
|
111
|
+
fill: mergedTheme.backdropColor,
|
|
112
|
+
fillOpacity: mergedTheme.backdropOpacity
|
|
113
|
+
})
|
|
112
114
|
})
|
|
113
115
|
})
|
|
114
116
|
});
|
|
@@ -148,41 +150,44 @@ function GuidonOverlay({
|
|
|
148
150
|
// Native implementation
|
|
149
151
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableWithoutFeedback, {
|
|
150
152
|
onPress: onBackdropPress,
|
|
151
|
-
children: /*#__PURE__*/(0, _jsxRuntime.
|
|
153
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
|
|
152
154
|
style: [styles.container, animatedStyle],
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
children:
|
|
155
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
|
|
156
|
+
width: screenWidth,
|
|
157
|
+
height: screenHeight,
|
|
158
|
+
viewBox: `0 0 ${screenWidth} ${screenHeight}`,
|
|
159
|
+
style: _reactNative.StyleSheet.absoluteFill,
|
|
160
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Defs, {
|
|
161
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.Mask, {
|
|
162
|
+
id: "spotlight-mask",
|
|
163
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
|
|
164
|
+
x: "0",
|
|
165
|
+
y: "0",
|
|
166
|
+
width: "100%",
|
|
167
|
+
height: "100%",
|
|
168
|
+
fill: "white"
|
|
169
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
|
|
170
|
+
x: spotlight.x,
|
|
171
|
+
y: spotlight.y,
|
|
172
|
+
width: spotlight.width,
|
|
173
|
+
height: spotlight.height,
|
|
174
|
+
rx: mergedTheme.spotlightBorderRadius,
|
|
175
|
+
ry: mergedTheme.spotlightBorderRadius,
|
|
176
|
+
fill: "black"
|
|
177
|
+
})]
|
|
178
|
+
})
|
|
179
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.G, {
|
|
180
|
+
mask: "url(#spotlight-mask)",
|
|
181
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
|
|
160
182
|
x: "0",
|
|
161
183
|
y: "0",
|
|
162
184
|
width: "100%",
|
|
163
185
|
height: "100%",
|
|
164
|
-
fill:
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
height: spotlight.height,
|
|
170
|
-
rx: mergedTheme.spotlightBorderRadius,
|
|
171
|
-
ry: mergedTheme.spotlightBorderRadius,
|
|
172
|
-
fill: "black"
|
|
173
|
-
})]
|
|
174
|
-
})
|
|
175
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.G, {
|
|
176
|
-
mask: "url(#spotlight-mask)",
|
|
177
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
|
|
178
|
-
x: "0",
|
|
179
|
-
y: "0",
|
|
180
|
-
width: "100%",
|
|
181
|
-
height: "100%",
|
|
182
|
-
fill: mergedTheme.backdropColor,
|
|
183
|
-
fillOpacity: mergedTheme.backdropOpacity
|
|
184
|
-
})
|
|
185
|
-
})]
|
|
186
|
+
fill: mergedTheme.backdropColor,
|
|
187
|
+
fillOpacity: mergedTheme.backdropOpacity
|
|
188
|
+
})
|
|
189
|
+
})]
|
|
190
|
+
})
|
|
186
191
|
})
|
|
187
192
|
});
|
|
188
193
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_reactNative","_reactNativeReanimated","_interopRequireWildcard","_reactNativeSvg","_store","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","_reactNativeReanimated","_interopRequireWildcard","_reactNativeSvg","_store","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DEFAULT_THEME","backdropColor","backdropOpacity","spotlightBorderRadius","spotlightPadding","GuidonOverlay","theme","animationDuration","onBackdropPress","isActive","useGuidonStore","state","config","currentStepIndex","targetMeasurements","isFloatingStep","useIsFloatingStep","waitingState","useWaitingState","isWaiting","mergedTheme","width","screenWidth","height","screenHeight","Dimensions","currentStep","steps","currentTargetId","targetId","measurements","undefined","showFullBackdrop","spotlight","useMemo","x","y","shouldShow","animatedStyle","useAnimatedStyle","opacity","withTiming","duration","easing","Easing","inOut","ease","Platform","OS","jsx","TouchableWithoutFeedback","onPress","children","View","style","styles","container","position","inset","backgroundColor","viewBox","StyleSheet","absoluteFill","Rect","fill","fillOpacity","clipPath","jsxs","Defs","Mask","id","rx","ry","G","mask","create","absoluteFillObject","zIndex"],"sourceRoot":"../../../src","sources":["components/GuidonOverlay.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -6,7 +6,6 @@ import Animated, { Easing, useAnimatedStyle, withTiming } from "react-native-rea
|
|
|
6
6
|
import Svg, { Defs, G, Mask, Rect } from "react-native-svg";
|
|
7
7
|
import { useGuidonStore, useIsFloatingStep, useWaitingState } from "../store.js";
|
|
8
8
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
|
-
const AnimatedSvg = Animated.createAnimatedComponent(Svg);
|
|
10
9
|
const DEFAULT_THEME = {
|
|
11
10
|
backdropColor: "#000000",
|
|
12
11
|
backdropOpacity: 0.7,
|
|
@@ -92,18 +91,21 @@ export function GuidonOverlay({
|
|
|
92
91
|
// Native: full backdrop without cutout
|
|
93
92
|
return /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
|
|
94
93
|
onPress: onBackdropPress,
|
|
95
|
-
children: /*#__PURE__*/_jsx(
|
|
94
|
+
children: /*#__PURE__*/_jsx(Animated.View, {
|
|
96
95
|
style: [styles.container, animatedStyle],
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
96
|
+
children: /*#__PURE__*/_jsx(Svg, {
|
|
97
|
+
width: screenWidth,
|
|
98
|
+
height: screenHeight,
|
|
99
|
+
viewBox: `0 0 ${screenWidth} ${screenHeight}`,
|
|
100
|
+
style: StyleSheet.absoluteFill,
|
|
101
|
+
children: /*#__PURE__*/_jsx(Rect, {
|
|
102
|
+
x: "0",
|
|
103
|
+
y: "0",
|
|
104
|
+
width: "100%",
|
|
105
|
+
height: "100%",
|
|
106
|
+
fill: mergedTheme.backdropColor,
|
|
107
|
+
fillOpacity: mergedTheme.backdropOpacity
|
|
108
|
+
})
|
|
107
109
|
})
|
|
108
110
|
})
|
|
109
111
|
});
|
|
@@ -143,41 +145,44 @@ export function GuidonOverlay({
|
|
|
143
145
|
// Native implementation
|
|
144
146
|
return /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
|
|
145
147
|
onPress: onBackdropPress,
|
|
146
|
-
children: /*#__PURE__*/
|
|
148
|
+
children: /*#__PURE__*/_jsx(Animated.View, {
|
|
147
149
|
style: [styles.container, animatedStyle],
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
children:
|
|
150
|
+
children: /*#__PURE__*/_jsxs(Svg, {
|
|
151
|
+
width: screenWidth,
|
|
152
|
+
height: screenHeight,
|
|
153
|
+
viewBox: `0 0 ${screenWidth} ${screenHeight}`,
|
|
154
|
+
style: StyleSheet.absoluteFill,
|
|
155
|
+
children: [/*#__PURE__*/_jsx(Defs, {
|
|
156
|
+
children: /*#__PURE__*/_jsxs(Mask, {
|
|
157
|
+
id: "spotlight-mask",
|
|
158
|
+
children: [/*#__PURE__*/_jsx(Rect, {
|
|
159
|
+
x: "0",
|
|
160
|
+
y: "0",
|
|
161
|
+
width: "100%",
|
|
162
|
+
height: "100%",
|
|
163
|
+
fill: "white"
|
|
164
|
+
}), /*#__PURE__*/_jsx(Rect, {
|
|
165
|
+
x: spotlight.x,
|
|
166
|
+
y: spotlight.y,
|
|
167
|
+
width: spotlight.width,
|
|
168
|
+
height: spotlight.height,
|
|
169
|
+
rx: mergedTheme.spotlightBorderRadius,
|
|
170
|
+
ry: mergedTheme.spotlightBorderRadius,
|
|
171
|
+
fill: "black"
|
|
172
|
+
})]
|
|
173
|
+
})
|
|
174
|
+
}), /*#__PURE__*/_jsx(G, {
|
|
175
|
+
mask: "url(#spotlight-mask)",
|
|
176
|
+
children: /*#__PURE__*/_jsx(Rect, {
|
|
155
177
|
x: "0",
|
|
156
178
|
y: "0",
|
|
157
179
|
width: "100%",
|
|
158
180
|
height: "100%",
|
|
159
|
-
fill:
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
height: spotlight.height,
|
|
165
|
-
rx: mergedTheme.spotlightBorderRadius,
|
|
166
|
-
ry: mergedTheme.spotlightBorderRadius,
|
|
167
|
-
fill: "black"
|
|
168
|
-
})]
|
|
169
|
-
})
|
|
170
|
-
}), /*#__PURE__*/_jsx(G, {
|
|
171
|
-
mask: "url(#spotlight-mask)",
|
|
172
|
-
children: /*#__PURE__*/_jsx(Rect, {
|
|
173
|
-
x: "0",
|
|
174
|
-
y: "0",
|
|
175
|
-
width: "100%",
|
|
176
|
-
height: "100%",
|
|
177
|
-
fill: mergedTheme.backdropColor,
|
|
178
|
-
fillOpacity: mergedTheme.backdropOpacity
|
|
179
|
-
})
|
|
180
|
-
})]
|
|
181
|
+
fill: mergedTheme.backdropColor,
|
|
182
|
+
fillOpacity: mergedTheme.backdropOpacity
|
|
183
|
+
})
|
|
184
|
+
})]
|
|
185
|
+
})
|
|
181
186
|
})
|
|
182
187
|
});
|
|
183
188
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useMemo","Dimensions","Platform","StyleSheet","TouchableWithoutFeedback","Animated","Easing","useAnimatedStyle","withTiming","Svg","Defs","G","Mask","Rect","useGuidonStore","useIsFloatingStep","useWaitingState","jsx","_jsx","jsxs","_jsxs","
|
|
1
|
+
{"version":3,"names":["useMemo","Dimensions","Platform","StyleSheet","TouchableWithoutFeedback","Animated","Easing","useAnimatedStyle","withTiming","Svg","Defs","G","Mask","Rect","useGuidonStore","useIsFloatingStep","useWaitingState","jsx","_jsx","jsxs","_jsxs","DEFAULT_THEME","backdropColor","backdropOpacity","spotlightBorderRadius","spotlightPadding","GuidonOverlay","theme","animationDuration","onBackdropPress","isActive","state","config","currentStepIndex","targetMeasurements","isFloatingStep","waitingState","isWaiting","mergedTheme","width","screenWidth","height","screenHeight","get","currentStep","steps","currentTargetId","targetId","measurements","undefined","showFullBackdrop","spotlight","x","y","shouldShow","animatedStyle","opacity","duration","easing","inOut","ease","OS","onPress","children","View","style","styles","container","position","inset","backgroundColor","viewBox","absoluteFill","fill","fillOpacity","clipPath","id","rx","ry","mask","create","absoluteFillObject","zIndex"],"sourceRoot":"../../../src","sources":["components/GuidonOverlay.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GuidonOverlay.d.ts","sourceRoot":"","sources":["../../../../src/components/GuidonOverlay.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAe,WAAW,EAAsB,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"GuidonOverlay.d.ts","sourceRoot":"","sources":["../../../../src/components/GuidonOverlay.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAe,WAAW,EAAsB,MAAM,UAAU,CAAC;AAiB7E,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAU,EACV,iBAAuB,EACvB,eAAe,GAChB,EAAE,kBAAkB,sCAuKpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GuidonOverlay.d.ts","sourceRoot":"","sources":["../../../../src/components/GuidonOverlay.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAe,WAAW,EAAsB,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"GuidonOverlay.d.ts","sourceRoot":"","sources":["../../../../src/components/GuidonOverlay.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAe,WAAW,EAAsB,MAAM,UAAU,CAAC;AAiB7E,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAU,EACV,iBAAuB,EACvB,eAAe,GAChB,EAAE,kBAAkB,sCAuKpB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@korsolutions/guidon",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.21",
|
|
4
4
|
"description": "A cross-platform walkthrough/onboarding component library for React Native with web support. Features spotlight effects, customizable tooltips, and flexible persistence options. ",
|
|
5
5
|
"repository": "https://github.com/KorSoftwareSolutions/guidon.git",
|
|
6
6
|
"author": "Christian Jimenez <christianjimenezfael@gmail.com>",
|
|
@@ -14,8 +14,6 @@ import Svg, { Defs, G, Mask, Rect } from "react-native-svg";
|
|
|
14
14
|
import { useGuidonStore, useIsFloatingStep, useWaitingState } from "../store";
|
|
15
15
|
import type { GuidonStore, GuidonTheme, TargetMeasurements } from "../types";
|
|
16
16
|
|
|
17
|
-
const AnimatedSvg = Animated.createAnimatedComponent(Svg);
|
|
18
|
-
|
|
19
17
|
const DEFAULT_THEME: Required<
|
|
20
18
|
Pick<
|
|
21
19
|
GuidonTheme,
|
|
@@ -116,21 +114,23 @@ export function GuidonOverlay({
|
|
|
116
114
|
// Native: full backdrop without cutout
|
|
117
115
|
return (
|
|
118
116
|
<TouchableWithoutFeedback onPress={onBackdropPress}>
|
|
119
|
-
<
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
117
|
+
<Animated.View style={[styles.container, animatedStyle]}>
|
|
118
|
+
<Svg
|
|
119
|
+
width={screenWidth}
|
|
120
|
+
height={screenHeight}
|
|
121
|
+
viewBox={`0 0 ${screenWidth} ${screenHeight}`}
|
|
122
|
+
style={StyleSheet.absoluteFill}
|
|
123
|
+
>
|
|
124
|
+
<Rect
|
|
125
|
+
x="0"
|
|
126
|
+
y="0"
|
|
127
|
+
width="100%"
|
|
128
|
+
height="100%"
|
|
129
|
+
fill={mergedTheme.backdropColor}
|
|
130
|
+
fillOpacity={mergedTheme.backdropOpacity}
|
|
131
|
+
/>
|
|
132
|
+
</Svg>
|
|
133
|
+
</Animated.View>
|
|
134
134
|
</TouchableWithoutFeedback>
|
|
135
135
|
);
|
|
136
136
|
}
|
|
@@ -171,37 +171,39 @@ export function GuidonOverlay({
|
|
|
171
171
|
// Native implementation
|
|
172
172
|
return (
|
|
173
173
|
<TouchableWithoutFeedback onPress={onBackdropPress}>
|
|
174
|
-
<
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
<
|
|
182
|
-
<
|
|
174
|
+
<Animated.View style={[styles.container, animatedStyle]}>
|
|
175
|
+
<Svg
|
|
176
|
+
width={screenWidth}
|
|
177
|
+
height={screenHeight}
|
|
178
|
+
viewBox={`0 0 ${screenWidth} ${screenHeight}`}
|
|
179
|
+
style={StyleSheet.absoluteFill}
|
|
180
|
+
>
|
|
181
|
+
<Defs>
|
|
182
|
+
<Mask id="spotlight-mask">
|
|
183
|
+
<Rect x="0" y="0" width="100%" height="100%" fill="white" />
|
|
184
|
+
<Rect
|
|
185
|
+
x={spotlight.x}
|
|
186
|
+
y={spotlight.y}
|
|
187
|
+
width={spotlight.width}
|
|
188
|
+
height={spotlight.height}
|
|
189
|
+
rx={mergedTheme.spotlightBorderRadius}
|
|
190
|
+
ry={mergedTheme.spotlightBorderRadius}
|
|
191
|
+
fill="black"
|
|
192
|
+
/>
|
|
193
|
+
</Mask>
|
|
194
|
+
</Defs>
|
|
195
|
+
<G mask="url(#spotlight-mask)">
|
|
183
196
|
<Rect
|
|
184
|
-
x=
|
|
185
|
-
y=
|
|
186
|
-
width=
|
|
187
|
-
height=
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
fill="black"
|
|
197
|
+
x="0"
|
|
198
|
+
y="0"
|
|
199
|
+
width="100%"
|
|
200
|
+
height="100%"
|
|
201
|
+
fill={mergedTheme.backdropColor}
|
|
202
|
+
fillOpacity={mergedTheme.backdropOpacity}
|
|
191
203
|
/>
|
|
192
|
-
</
|
|
193
|
-
</
|
|
194
|
-
|
|
195
|
-
<Rect
|
|
196
|
-
x="0"
|
|
197
|
-
y="0"
|
|
198
|
-
width="100%"
|
|
199
|
-
height="100%"
|
|
200
|
-
fill={mergedTheme.backdropColor}
|
|
201
|
-
fillOpacity={mergedTheme.backdropOpacity}
|
|
202
|
-
/>
|
|
203
|
-
</G>
|
|
204
|
-
</AnimatedSvg>
|
|
204
|
+
</G>
|
|
205
|
+
</Svg>
|
|
206
|
+
</Animated.View>
|
|
205
207
|
</TouchableWithoutFeedback>
|
|
206
208
|
);
|
|
207
209
|
}
|