@oxyhq/bloom 0.87.0 → 0.87.1
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/NOTICE +1 -1
- package/README.md +1 -1
- package/lib/commonjs/overlay/index.js +102 -24
- package/lib/commonjs/overlay/index.js.map +1 -1
- package/lib/module/overlay/index.js +103 -25
- package/lib/module/overlay/index.js.map +1 -1
- package/lib/typescript/commonjs/overlay/index.d.ts.map +1 -1
- package/lib/typescript/module/overlay/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/dialog/Dialog.stories.tsx +37 -0
- package/src/overlay/index.tsx +123 -24
package/NOTICE
CHANGED
package/README.md
CHANGED
|
@@ -180,7 +180,7 @@ Issues and pull requests are welcome. Please run `bun run typescript` and `bun r
|
|
|
180
180
|
|
|
181
181
|
## License
|
|
182
182
|
|
|
183
|
-
Apache-2.0, The Oxy Collective Inc. See [LICENSE](./LICENSE).
|
|
183
|
+
Apache-2.0, The Oxy Collective, Inc. See [LICENSE](./LICENSE).
|
|
184
184
|
|
|
185
185
|
Bloom moved from AGPL-3.0-only to Apache-2.0 at `0.87.0`. Versions published before that keep AGPL-3.0-only permanently; a licence change binds future versions only.
|
|
186
186
|
|
|
@@ -215,6 +215,93 @@ function OverlayRootView({
|
|
|
215
215
|
});
|
|
216
216
|
}
|
|
217
217
|
OverlayRoot.displayName = 'OverlayRoot';
|
|
218
|
+
/**
|
|
219
|
+
* Layers fading under a shared value. Reanimated owns the opacity on both, so
|
|
220
|
+
* the fade runs off the JS thread and the caller never has to animate an
|
|
221
|
+
* ancestor (which would erase the blur — see `BackdropProps['style']`).
|
|
222
|
+
*/
|
|
223
|
+
function AnimatedBackdropLayers({
|
|
224
|
+
progress,
|
|
225
|
+
blurIntensity,
|
|
226
|
+
blurTint,
|
|
227
|
+
dimColor,
|
|
228
|
+
dimOpacity,
|
|
229
|
+
staticOpacity,
|
|
230
|
+
layerStyle
|
|
231
|
+
}) {
|
|
232
|
+
// The fade lives on each LAYER, never on their shared ancestor.
|
|
233
|
+
const blurFade = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
|
|
234
|
+
opacity: progress.value * staticOpacity
|
|
235
|
+
}), [progress, staticOpacity]);
|
|
236
|
+
const dimFade = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
|
|
237
|
+
opacity: progress.value * staticOpacity * dimOpacity
|
|
238
|
+
}), [progress, staticOpacity, dimOpacity]);
|
|
239
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
240
|
+
children: [blurIntensity > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedBlurView, {
|
|
241
|
+
intensity: blurIntensity,
|
|
242
|
+
tint: blurTint
|
|
243
|
+
// Android's default blur is a no-op on many devices; this is the
|
|
244
|
+
// implementation that actually renders there.
|
|
245
|
+
,
|
|
246
|
+
experimentalBlurMethod: "dimezisBlurView",
|
|
247
|
+
pointerEvents: "none",
|
|
248
|
+
style: [_reactNative.StyleSheet.absoluteFill, layerStyle, blurFade]
|
|
249
|
+
}) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
|
|
250
|
+
pointerEvents: "none",
|
|
251
|
+
style: [_reactNative.StyleSheet.absoluteFill, {
|
|
252
|
+
backgroundColor: dimColor
|
|
253
|
+
}, layerStyle, dimFade]
|
|
254
|
+
})]
|
|
255
|
+
});
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
/**
|
|
259
|
+
* Layers with no shared value driving them: the opacity is whatever the caller
|
|
260
|
+
* asked for, and a caller that still wants movement hands a CSS transition down
|
|
261
|
+
* through `layerStyle` — which is exactly what the web side sheet does, flipping
|
|
262
|
+
* its own `opacity` between 0 and 1 and letting the browser interpolate.
|
|
263
|
+
*
|
|
264
|
+
* These MUST stay plain, non-reanimated components. On web, an animated
|
|
265
|
+
* component whose style carries `transitionProperty` is routed through
|
|
266
|
+
* reanimated's CSS transitions manager, which assigns straight into
|
|
267
|
+
* `element.style` — where `element` is whatever ref the wrapped component
|
|
268
|
+
* exposes. expo-blur's web `BlurView` exposes a `useImperativeHandle` object
|
|
269
|
+
* carrying only `setNativeProps`, so there is no `.style` on it and opening the
|
|
270
|
+
* surface throws `Cannot set properties of undefined (setting
|
|
271
|
+
* 'transitionProperty')`. A plain layer puts the transition on the DOM node
|
|
272
|
+
* itself, which is both where it belongs and the only place it works.
|
|
273
|
+
*/
|
|
274
|
+
function StaticBackdropLayers({
|
|
275
|
+
blurIntensity,
|
|
276
|
+
blurTint,
|
|
277
|
+
dimColor,
|
|
278
|
+
dimOpacity,
|
|
279
|
+
staticOpacity,
|
|
280
|
+
layerStyle
|
|
281
|
+
}) {
|
|
282
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
283
|
+
children: [blurIntensity > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_expoBlur.BlurView, {
|
|
284
|
+
intensity: blurIntensity,
|
|
285
|
+
tint: blurTint,
|
|
286
|
+
experimentalBlurMethod: "dimezisBlurView",
|
|
287
|
+
pointerEvents: "none"
|
|
288
|
+
// Opacity last, as in the animated pair: the level this component
|
|
289
|
+
// resolved wins over anything `layerStyle` happens to carry.
|
|
290
|
+
,
|
|
291
|
+
style: [_reactNative.StyleSheet.absoluteFill, layerStyle, {
|
|
292
|
+
opacity: staticOpacity
|
|
293
|
+
}]
|
|
294
|
+
}) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
|
|
295
|
+
pointerEvents: "none",
|
|
296
|
+
style: [_reactNative.StyleSheet.absoluteFill, {
|
|
297
|
+
backgroundColor: dimColor
|
|
298
|
+
}, layerStyle, {
|
|
299
|
+
opacity: staticOpacity * dimOpacity
|
|
300
|
+
}]
|
|
301
|
+
})]
|
|
302
|
+
});
|
|
303
|
+
}
|
|
304
|
+
|
|
218
305
|
/**
|
|
219
306
|
* Full-bleed blur + dim that dismisses the surface when pressed.
|
|
220
307
|
*
|
|
@@ -264,14 +351,14 @@ const Backdrop = exports.Backdrop = /*#__PURE__*/(0, _react.memo)(function Backd
|
|
|
264
351
|
} = flat;
|
|
265
352
|
const staticOpacity = typeof styleOpacity === 'number' ? styleOpacity : 1;
|
|
266
353
|
const resolvedDimColor = typeof styleBackground === 'string' ? styleBackground : dimColor;
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
}
|
|
354
|
+
const layerProps = {
|
|
355
|
+
blurIntensity,
|
|
356
|
+
blurTint,
|
|
357
|
+
dimColor: resolvedDimColor,
|
|
358
|
+
dimOpacity,
|
|
359
|
+
staticOpacity,
|
|
360
|
+
layerStyle
|
|
361
|
+
};
|
|
275
362
|
return (
|
|
276
363
|
/*#__PURE__*/
|
|
277
364
|
// `box-none` so this box never takes a press itself: the hit box below and
|
|
@@ -279,7 +366,7 @@ const Backdrop = exports.Backdrop = /*#__PURE__*/(0, _react.memo)(function Backd
|
|
|
279
366
|
(0, _jsxRuntime.jsxs)(_reactNative.View, {
|
|
280
367
|
pointerEvents: "box-none",
|
|
281
368
|
style: [_reactNative.StyleSheet.absoluteFill, rootStyle],
|
|
282
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.
|
|
369
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
|
|
283
370
|
pointerEvents: "auto",
|
|
284
371
|
onPress: inert ? undefined : onPress,
|
|
285
372
|
disabled: inert
|
|
@@ -292,21 +379,12 @@ const Backdrop = exports.Backdrop = /*#__PURE__*/(0, _react.memo)(function Backd
|
|
|
292
379
|
accessibilityLabel: inert ? undefined : accessibilityLabel,
|
|
293
380
|
testID: testID,
|
|
294
381
|
style: _reactNative.StyleSheet.absoluteFill,
|
|
295
|
-
children:
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
experimentalBlurMethod: "dimezisBlurView",
|
|
302
|
-
pointerEvents: "none",
|
|
303
|
-
style: [_reactNative.StyleSheet.absoluteFill, layerStyle, blurFade]
|
|
304
|
-
}) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
|
|
305
|
-
pointerEvents: "none",
|
|
306
|
-
style: [_reactNative.StyleSheet.absoluteFill, {
|
|
307
|
-
backgroundColor: resolvedDimColor
|
|
308
|
-
}, layerStyle, dimFade]
|
|
309
|
-
})]
|
|
382
|
+
children: progress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedBackdropLayers, {
|
|
383
|
+
progress: progress,
|
|
384
|
+
...layerProps
|
|
385
|
+
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(StaticBackdropLayers, {
|
|
386
|
+
...layerProps
|
|
387
|
+
})
|
|
310
388
|
}), children]
|
|
311
389
|
})
|
|
312
390
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_expoBlur","_reactNative","_reactNativeReanimated","_interopRequireWildcard","_webViewStyle","_stack","_useOverlayLayer","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AnimatedBlurView","Animated","createAnimatedComponent","BlurView","OverlayLayerContext","createContext","layerForRank","displayName","useOverlayLayerContext","useContext","BACKDROP_BLUR_INTENSITY","exports","BACKDROP_DIM_OPACITY","OverlayRoot","children","style","testID","zIndex","undefined","jsx","StackedOverlayRoot","PinnedOverlayRoot","layer","useOverlayLayer","OverlayRootView","useMemo","root","backdrop","surface","Provider","value","View","pointerEvents","styles","
|
|
1
|
+
{"version":3,"names":["_react","require","_expoBlur","_reactNative","_reactNativeReanimated","_interopRequireWildcard","_webViewStyle","_stack","_useOverlayLayer","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AnimatedBlurView","Animated","createAnimatedComponent","BlurView","OverlayLayerContext","createContext","layerForRank","displayName","useOverlayLayerContext","useContext","BACKDROP_BLUR_INTENSITY","exports","BACKDROP_DIM_OPACITY","OverlayRoot","children","style","testID","zIndex","undefined","jsx","StackedOverlayRoot","PinnedOverlayRoot","layer","useOverlayLayer","OverlayRootView","useMemo","root","backdrop","surface","Provider","value","View","pointerEvents","styles","AnimatedBackdropLayers","progress","blurIntensity","blurTint","dimColor","dimOpacity","staticOpacity","layerStyle","blurFade","useAnimatedStyle","opacity","dimFade","jsxs","Fragment","intensity","tint","experimentalBlurMethod","StyleSheet","absoluteFill","backgroundColor","StaticBackdropLayers","Backdrop","memo","onPress","disabled","accessibilityLabel","inert","flat","flatten","styleOpacity","styleBackground","rootStyle","resolvedDimColor","layerProps","Pressable","focusable","accessibilityRole","create","position","Platform","OS","WEB_POSITION_FIXED","top","left","right","bottom"],"sourceRoot":"../../../src","sources":["overlay/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -48,7 +48,7 @@ import Animated, { useAnimatedStyle } from 'react-native-reanimated';
|
|
|
48
48
|
import { WEB_POSITION_FIXED } from "../styles/web-view-style.js";
|
|
49
49
|
import { layerForRank } from "./stack.js";
|
|
50
50
|
import { useOverlayLayer } from "./use-overlay-layer.js";
|
|
51
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
51
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
52
52
|
const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);
|
|
53
53
|
|
|
54
54
|
/**
|
|
@@ -171,6 +171,93 @@ function OverlayRootView({
|
|
|
171
171
|
});
|
|
172
172
|
}
|
|
173
173
|
OverlayRoot.displayName = 'OverlayRoot';
|
|
174
|
+
/**
|
|
175
|
+
* Layers fading under a shared value. Reanimated owns the opacity on both, so
|
|
176
|
+
* the fade runs off the JS thread and the caller never has to animate an
|
|
177
|
+
* ancestor (which would erase the blur — see `BackdropProps['style']`).
|
|
178
|
+
*/
|
|
179
|
+
function AnimatedBackdropLayers({
|
|
180
|
+
progress,
|
|
181
|
+
blurIntensity,
|
|
182
|
+
blurTint,
|
|
183
|
+
dimColor,
|
|
184
|
+
dimOpacity,
|
|
185
|
+
staticOpacity,
|
|
186
|
+
layerStyle
|
|
187
|
+
}) {
|
|
188
|
+
// The fade lives on each LAYER, never on their shared ancestor.
|
|
189
|
+
const blurFade = useAnimatedStyle(() => ({
|
|
190
|
+
opacity: progress.value * staticOpacity
|
|
191
|
+
}), [progress, staticOpacity]);
|
|
192
|
+
const dimFade = useAnimatedStyle(() => ({
|
|
193
|
+
opacity: progress.value * staticOpacity * dimOpacity
|
|
194
|
+
}), [progress, staticOpacity, dimOpacity]);
|
|
195
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
196
|
+
children: [blurIntensity > 0 ? /*#__PURE__*/_jsx(AnimatedBlurView, {
|
|
197
|
+
intensity: blurIntensity,
|
|
198
|
+
tint: blurTint
|
|
199
|
+
// Android's default blur is a no-op on many devices; this is the
|
|
200
|
+
// implementation that actually renders there.
|
|
201
|
+
,
|
|
202
|
+
experimentalBlurMethod: "dimezisBlurView",
|
|
203
|
+
pointerEvents: "none",
|
|
204
|
+
style: [StyleSheet.absoluteFill, layerStyle, blurFade]
|
|
205
|
+
}) : null, /*#__PURE__*/_jsx(Animated.View, {
|
|
206
|
+
pointerEvents: "none",
|
|
207
|
+
style: [StyleSheet.absoluteFill, {
|
|
208
|
+
backgroundColor: dimColor
|
|
209
|
+
}, layerStyle, dimFade]
|
|
210
|
+
})]
|
|
211
|
+
});
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
/**
|
|
215
|
+
* Layers with no shared value driving them: the opacity is whatever the caller
|
|
216
|
+
* asked for, and a caller that still wants movement hands a CSS transition down
|
|
217
|
+
* through `layerStyle` — which is exactly what the web side sheet does, flipping
|
|
218
|
+
* its own `opacity` between 0 and 1 and letting the browser interpolate.
|
|
219
|
+
*
|
|
220
|
+
* These MUST stay plain, non-reanimated components. On web, an animated
|
|
221
|
+
* component whose style carries `transitionProperty` is routed through
|
|
222
|
+
* reanimated's CSS transitions manager, which assigns straight into
|
|
223
|
+
* `element.style` — where `element` is whatever ref the wrapped component
|
|
224
|
+
* exposes. expo-blur's web `BlurView` exposes a `useImperativeHandle` object
|
|
225
|
+
* carrying only `setNativeProps`, so there is no `.style` on it and opening the
|
|
226
|
+
* surface throws `Cannot set properties of undefined (setting
|
|
227
|
+
* 'transitionProperty')`. A plain layer puts the transition on the DOM node
|
|
228
|
+
* itself, which is both where it belongs and the only place it works.
|
|
229
|
+
*/
|
|
230
|
+
function StaticBackdropLayers({
|
|
231
|
+
blurIntensity,
|
|
232
|
+
blurTint,
|
|
233
|
+
dimColor,
|
|
234
|
+
dimOpacity,
|
|
235
|
+
staticOpacity,
|
|
236
|
+
layerStyle
|
|
237
|
+
}) {
|
|
238
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
239
|
+
children: [blurIntensity > 0 ? /*#__PURE__*/_jsx(BlurView, {
|
|
240
|
+
intensity: blurIntensity,
|
|
241
|
+
tint: blurTint,
|
|
242
|
+
experimentalBlurMethod: "dimezisBlurView",
|
|
243
|
+
pointerEvents: "none"
|
|
244
|
+
// Opacity last, as in the animated pair: the level this component
|
|
245
|
+
// resolved wins over anything `layerStyle` happens to carry.
|
|
246
|
+
,
|
|
247
|
+
style: [StyleSheet.absoluteFill, layerStyle, {
|
|
248
|
+
opacity: staticOpacity
|
|
249
|
+
}]
|
|
250
|
+
}) : null, /*#__PURE__*/_jsx(View, {
|
|
251
|
+
pointerEvents: "none",
|
|
252
|
+
style: [StyleSheet.absoluteFill, {
|
|
253
|
+
backgroundColor: dimColor
|
|
254
|
+
}, layerStyle, {
|
|
255
|
+
opacity: staticOpacity * dimOpacity
|
|
256
|
+
}]
|
|
257
|
+
})]
|
|
258
|
+
});
|
|
259
|
+
}
|
|
260
|
+
|
|
174
261
|
/**
|
|
175
262
|
* Full-bleed blur + dim that dismisses the surface when pressed.
|
|
176
263
|
*
|
|
@@ -220,14 +307,14 @@ export const Backdrop = /*#__PURE__*/memo(function Backdrop({
|
|
|
220
307
|
} = flat;
|
|
221
308
|
const staticOpacity = typeof styleOpacity === 'number' ? styleOpacity : 1;
|
|
222
309
|
const resolvedDimColor = typeof styleBackground === 'string' ? styleBackground : dimColor;
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
}
|
|
310
|
+
const layerProps = {
|
|
311
|
+
blurIntensity,
|
|
312
|
+
blurTint,
|
|
313
|
+
dimColor: resolvedDimColor,
|
|
314
|
+
dimOpacity,
|
|
315
|
+
staticOpacity,
|
|
316
|
+
layerStyle
|
|
317
|
+
};
|
|
231
318
|
return (
|
|
232
319
|
/*#__PURE__*/
|
|
233
320
|
// `box-none` so this box never takes a press itself: the hit box below and
|
|
@@ -235,7 +322,7 @@ export const Backdrop = /*#__PURE__*/memo(function Backdrop({
|
|
|
235
322
|
_jsxs(View, {
|
|
236
323
|
pointerEvents: "box-none",
|
|
237
324
|
style: [StyleSheet.absoluteFill, rootStyle],
|
|
238
|
-
children: [/*#__PURE__*/
|
|
325
|
+
children: [/*#__PURE__*/_jsx(Pressable, {
|
|
239
326
|
pointerEvents: "auto",
|
|
240
327
|
onPress: inert ? undefined : onPress,
|
|
241
328
|
disabled: inert
|
|
@@ -248,21 +335,12 @@ export const Backdrop = /*#__PURE__*/memo(function Backdrop({
|
|
|
248
335
|
accessibilityLabel: inert ? undefined : accessibilityLabel,
|
|
249
336
|
testID: testID,
|
|
250
337
|
style: StyleSheet.absoluteFill,
|
|
251
|
-
children:
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
experimentalBlurMethod: "dimezisBlurView",
|
|
258
|
-
pointerEvents: "none",
|
|
259
|
-
style: [StyleSheet.absoluteFill, layerStyle, blurFade]
|
|
260
|
-
}) : null, /*#__PURE__*/_jsx(Animated.View, {
|
|
261
|
-
pointerEvents: "none",
|
|
262
|
-
style: [StyleSheet.absoluteFill, {
|
|
263
|
-
backgroundColor: resolvedDimColor
|
|
264
|
-
}, layerStyle, dimFade]
|
|
265
|
-
})]
|
|
338
|
+
children: progress ? /*#__PURE__*/_jsx(AnimatedBackdropLayers, {
|
|
339
|
+
progress: progress,
|
|
340
|
+
...layerProps
|
|
341
|
+
}) : /*#__PURE__*/_jsx(StaticBackdropLayers, {
|
|
342
|
+
...layerProps
|
|
343
|
+
})
|
|
266
344
|
}), children]
|
|
267
345
|
})
|
|
268
346
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createContext","memo","useContext","useMemo","BlurView","Platform","Pressable","StyleSheet","View","Animated","useAnimatedStyle","WEB_POSITION_FIXED","layerForRank","useOverlayLayer","jsx","_jsx","jsxs","_jsxs","AnimatedBlurView","createAnimatedComponent","OverlayLayerContext","displayName","useOverlayLayerContext","BACKDROP_BLUR_INTENSITY","BACKDROP_DIM_OPACITY","OverlayRoot","children","style","testID","zIndex","undefined","StackedOverlayRoot","PinnedOverlayRoot","layer","OverlayRootView","root","backdrop","surface","Provider","value","pointerEvents","styles","
|
|
1
|
+
{"version":3,"names":["createContext","memo","useContext","useMemo","BlurView","Platform","Pressable","StyleSheet","View","Animated","useAnimatedStyle","WEB_POSITION_FIXED","layerForRank","useOverlayLayer","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","AnimatedBlurView","createAnimatedComponent","OverlayLayerContext","displayName","useOverlayLayerContext","BACKDROP_BLUR_INTENSITY","BACKDROP_DIM_OPACITY","OverlayRoot","children","style","testID","zIndex","undefined","StackedOverlayRoot","PinnedOverlayRoot","layer","OverlayRootView","root","backdrop","surface","Provider","value","pointerEvents","styles","AnimatedBackdropLayers","progress","blurIntensity","blurTint","dimColor","dimOpacity","staticOpacity","layerStyle","blurFade","opacity","dimFade","intensity","tint","experimentalBlurMethod","absoluteFill","backgroundColor","StaticBackdropLayers","Backdrop","onPress","disabled","accessibilityLabel","inert","flat","flatten","styleOpacity","styleBackground","rootStyle","resolvedDimColor","layerProps","focusable","accessibilityRole","create","position","OS","top","left","right","bottom","OVERLAY_STACK_BAND","OVERLAY_STACK_BASE","OVERLAY_STACK_MAX_RANK","TOAST_LAYER_Z"],"sourceRoot":"../../../src","sources":["overlay/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/overlay/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,OAAO,EAA4C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjF,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAiB,EAAoB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGvF,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,SAAS,CAAC;AAiB1D,qEAAqE;AACrE,wBAAgB,sBAAsB,IAAI,YAAY,CAErD;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAEzC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,gBAAgB,2CAehF;yBAfe,WAAW;;;AAkE3B,MAAM,WAAW,aAAa;IAC5B,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IACxC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/overlay/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,OAAO,EAA4C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjF,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAiB,EAAoB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGvF,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,SAAS,CAAC;AAiB1D,qEAAqE;AACrE,wBAAgB,sBAAsB,IAAI,YAAY,CAErD;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAEzC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,gBAAgB,2CAehF;yBAfe,WAAW;;;AAkE3B,MAAM,WAAW,aAAa;IAC5B,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IACxC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA2GD;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,QAAQ,qDAqEnB,CAAC;AAmBH,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,kBAAkB,EAClB,sBAAsB,EACtB,aAAa,EACb,KAAK,YAAY,GAClB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/overlay/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,OAAO,EAA4C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjF,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAiB,EAAoB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGvF,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,SAAS,CAAC;AAiB1D,qEAAqE;AACrE,wBAAgB,sBAAsB,IAAI,YAAY,CAErD;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAEzC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,gBAAgB,2CAehF;yBAfe,WAAW;;;AAkE3B,MAAM,WAAW,aAAa;IAC5B,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IACxC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/overlay/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,OAAO,EAA4C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjF,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AACtB,OAAiB,EAAoB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGvF,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,SAAS,CAAC;AAiB1D,qEAAqE;AACrE,wBAAgB,sBAAsB,IAAI,YAAY,CAErD;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAC1C;;;;;;;GAOG;AACH,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAEzC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,gBAAgB,2CAehF;yBAfe,WAAW;;;AAkE3B,MAAM,WAAW,aAAa;IAC5B,gFAAgF;IAChF,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC/B,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IACxC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA2GD;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,QAAQ,qDAqEnB,CAAC;AAmBH,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,kBAAkB,EAClB,sBAAsB,EACtB,aAAa,EACb,KAAK,YAAY,GAClB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC"}
|
package/package.json
CHANGED
|
@@ -85,10 +85,47 @@ function ThreeActionDemo() {
|
|
|
85
85
|
);
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
+
/**
|
|
89
|
+
* The side-sheet placement, which is a DIFFERENT web surface from the centered
|
|
90
|
+
* card: it resolves `SheetSurface` in `Dialog.web.tsx`, whose entry animation is
|
|
91
|
+
* a CSS transition handed to the backdrop layers rather than a shared value.
|
|
92
|
+
*
|
|
93
|
+
* It needs its own story because that difference is exactly what broke. The
|
|
94
|
+
* layers used to be reanimated components, and on web reanimated routes a style
|
|
95
|
+
* carrying `transitionProperty` into its CSS transitions manager, which writes
|
|
96
|
+
* to `ref.style` — undefined on expo-blur's web `BlurView`, whose ref is a
|
|
97
|
+
* `setNativeProps`-only handle. Opening the sheet threw before it painted. Only
|
|
98
|
+
* a real browser sees it: jest mocks both packages, so the whole suite passed.
|
|
99
|
+
*/
|
|
100
|
+
function SideSheetDemo({ placement }: { placement: 'left' | 'right' }) {
|
|
101
|
+
const control = useDialogControl();
|
|
102
|
+
return (
|
|
103
|
+
<>
|
|
104
|
+
<Button onPress={() => control.open()}>Open {placement} sheet</Button>
|
|
105
|
+
<Dialog control={control} placement={placement} title="Store menu">
|
|
106
|
+
<View style={{ gap: 12 }}>
|
|
107
|
+
<Text>An anchored drawer, blurred and dimmed behind.</Text>
|
|
108
|
+
<Button variant="secondary" onPress={() => control.close()}>
|
|
109
|
+
Done
|
|
110
|
+
</Button>
|
|
111
|
+
</View>
|
|
112
|
+
</Dialog>
|
|
113
|
+
</>
|
|
114
|
+
);
|
|
115
|
+
}
|
|
116
|
+
|
|
88
117
|
export const Basic: Story = {
|
|
89
118
|
render: () => <DeclarativeDemo />,
|
|
90
119
|
};
|
|
91
120
|
|
|
121
|
+
export const SideSheetLeft: Story = {
|
|
122
|
+
render: () => <SideSheetDemo placement="left" />,
|
|
123
|
+
};
|
|
124
|
+
|
|
125
|
+
export const SideSheetRight: Story = {
|
|
126
|
+
render: () => <SideSheetDemo placement="right" />,
|
|
127
|
+
};
|
|
128
|
+
|
|
92
129
|
export const CustomChildren: Story = {
|
|
93
130
|
render: () => <CustomChildrenDemo />,
|
|
94
131
|
};
|
package/src/overlay/index.tsx
CHANGED
|
@@ -225,6 +225,111 @@ export interface BackdropProps {
|
|
|
225
225
|
testID?: string;
|
|
226
226
|
}
|
|
227
227
|
|
|
228
|
+
interface BackdropLayerProps {
|
|
229
|
+
blurIntensity: number;
|
|
230
|
+
blurTint: 'light' | 'dark' | 'default';
|
|
231
|
+
dimColor: string;
|
|
232
|
+
dimOpacity: number;
|
|
233
|
+
/** Opacity the caller asked for, already lifted off the press target. */
|
|
234
|
+
staticOpacity: number;
|
|
235
|
+
layerStyle?: StyleProp<ViewStyle>;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
/**
|
|
239
|
+
* Layers fading under a shared value. Reanimated owns the opacity on both, so
|
|
240
|
+
* the fade runs off the JS thread and the caller never has to animate an
|
|
241
|
+
* ancestor (which would erase the blur — see `BackdropProps['style']`).
|
|
242
|
+
*/
|
|
243
|
+
function AnimatedBackdropLayers({
|
|
244
|
+
progress,
|
|
245
|
+
blurIntensity,
|
|
246
|
+
blurTint,
|
|
247
|
+
dimColor,
|
|
248
|
+
dimOpacity,
|
|
249
|
+
staticOpacity,
|
|
250
|
+
layerStyle,
|
|
251
|
+
}: BackdropLayerProps & { progress: SharedValue<number> }) {
|
|
252
|
+
// The fade lives on each LAYER, never on their shared ancestor.
|
|
253
|
+
const blurFade = useAnimatedStyle(
|
|
254
|
+
() => ({ opacity: progress.value * staticOpacity }),
|
|
255
|
+
[progress, staticOpacity],
|
|
256
|
+
);
|
|
257
|
+
const dimFade = useAnimatedStyle(
|
|
258
|
+
() => ({ opacity: progress.value * staticOpacity * dimOpacity }),
|
|
259
|
+
[progress, staticOpacity, dimOpacity],
|
|
260
|
+
);
|
|
261
|
+
|
|
262
|
+
return (
|
|
263
|
+
<>
|
|
264
|
+
{blurIntensity > 0 ? (
|
|
265
|
+
<AnimatedBlurView
|
|
266
|
+
intensity={blurIntensity}
|
|
267
|
+
tint={blurTint}
|
|
268
|
+
// Android's default blur is a no-op on many devices; this is the
|
|
269
|
+
// implementation that actually renders there.
|
|
270
|
+
experimentalBlurMethod="dimezisBlurView"
|
|
271
|
+
pointerEvents="none"
|
|
272
|
+
style={[StyleSheet.absoluteFill, layerStyle, blurFade]}
|
|
273
|
+
/>
|
|
274
|
+
) : null}
|
|
275
|
+
<Animated.View
|
|
276
|
+
pointerEvents="none"
|
|
277
|
+
style={[StyleSheet.absoluteFill, { backgroundColor: dimColor }, layerStyle, dimFade]}
|
|
278
|
+
/>
|
|
279
|
+
</>
|
|
280
|
+
);
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
/**
|
|
284
|
+
* Layers with no shared value driving them: the opacity is whatever the caller
|
|
285
|
+
* asked for, and a caller that still wants movement hands a CSS transition down
|
|
286
|
+
* through `layerStyle` — which is exactly what the web side sheet does, flipping
|
|
287
|
+
* its own `opacity` between 0 and 1 and letting the browser interpolate.
|
|
288
|
+
*
|
|
289
|
+
* These MUST stay plain, non-reanimated components. On web, an animated
|
|
290
|
+
* component whose style carries `transitionProperty` is routed through
|
|
291
|
+
* reanimated's CSS transitions manager, which assigns straight into
|
|
292
|
+
* `element.style` — where `element` is whatever ref the wrapped component
|
|
293
|
+
* exposes. expo-blur's web `BlurView` exposes a `useImperativeHandle` object
|
|
294
|
+
* carrying only `setNativeProps`, so there is no `.style` on it and opening the
|
|
295
|
+
* surface throws `Cannot set properties of undefined (setting
|
|
296
|
+
* 'transitionProperty')`. A plain layer puts the transition on the DOM node
|
|
297
|
+
* itself, which is both where it belongs and the only place it works.
|
|
298
|
+
*/
|
|
299
|
+
function StaticBackdropLayers({
|
|
300
|
+
blurIntensity,
|
|
301
|
+
blurTint,
|
|
302
|
+
dimColor,
|
|
303
|
+
dimOpacity,
|
|
304
|
+
staticOpacity,
|
|
305
|
+
layerStyle,
|
|
306
|
+
}: BackdropLayerProps) {
|
|
307
|
+
return (
|
|
308
|
+
<>
|
|
309
|
+
{blurIntensity > 0 ? (
|
|
310
|
+
<BlurView
|
|
311
|
+
intensity={blurIntensity}
|
|
312
|
+
tint={blurTint}
|
|
313
|
+
experimentalBlurMethod="dimezisBlurView"
|
|
314
|
+
pointerEvents="none"
|
|
315
|
+
// Opacity last, as in the animated pair: the level this component
|
|
316
|
+
// resolved wins over anything `layerStyle` happens to carry.
|
|
317
|
+
style={[StyleSheet.absoluteFill, layerStyle, { opacity: staticOpacity }]}
|
|
318
|
+
/>
|
|
319
|
+
) : null}
|
|
320
|
+
<View
|
|
321
|
+
pointerEvents="none"
|
|
322
|
+
style={[
|
|
323
|
+
StyleSheet.absoluteFill,
|
|
324
|
+
{ backgroundColor: dimColor },
|
|
325
|
+
layerStyle,
|
|
326
|
+
{ opacity: staticOpacity * dimOpacity },
|
|
327
|
+
]}
|
|
328
|
+
/>
|
|
329
|
+
</>
|
|
330
|
+
);
|
|
331
|
+
}
|
|
332
|
+
|
|
228
333
|
/**
|
|
229
334
|
* Full-bleed blur + dim that dismisses the surface when pressed.
|
|
230
335
|
*
|
|
@@ -271,15 +376,14 @@ export const Backdrop = memo(function Backdrop({
|
|
|
271
376
|
const staticOpacity = typeof styleOpacity === 'number' ? styleOpacity : 1;
|
|
272
377
|
const resolvedDimColor = typeof styleBackground === 'string' ? styleBackground : dimColor;
|
|
273
378
|
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
);
|
|
379
|
+
const layerProps: BackdropLayerProps = {
|
|
380
|
+
blurIntensity,
|
|
381
|
+
blurTint,
|
|
382
|
+
dimColor: resolvedDimColor,
|
|
383
|
+
dimOpacity,
|
|
384
|
+
staticOpacity,
|
|
385
|
+
layerStyle,
|
|
386
|
+
};
|
|
283
387
|
|
|
284
388
|
return (
|
|
285
389
|
// `box-none` so this box never takes a press itself: the hit box below and
|
|
@@ -298,21 +402,16 @@ export const Backdrop = memo(function Backdrop({
|
|
|
298
402
|
testID={testID}
|
|
299
403
|
style={StyleSheet.absoluteFill}
|
|
300
404
|
>
|
|
301
|
-
{
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
) : null}
|
|
312
|
-
<Animated.View
|
|
313
|
-
pointerEvents="none"
|
|
314
|
-
style={[StyleSheet.absoluteFill, { backgroundColor: resolvedDimColor }, layerStyle, dimFade]}
|
|
315
|
-
/>
|
|
405
|
+
{/* Split into two components rather than branching inside one, so the
|
|
406
|
+
reanimated hooks stay unconditional AND a caller without a shared
|
|
407
|
+
value gets layers reanimated never touches. Which branch a call site
|
|
408
|
+
takes is fixed by whether it passes `progress` at all, so this never
|
|
409
|
+
swaps mid-life. */}
|
|
410
|
+
{progress ? (
|
|
411
|
+
<AnimatedBackdropLayers progress={progress} {...layerProps} />
|
|
412
|
+
) : (
|
|
413
|
+
<StaticBackdropLayers {...layerProps} />
|
|
414
|
+
)}
|
|
316
415
|
</Pressable>
|
|
317
416
|
{children}
|
|
318
417
|
</View>
|