number-flow-react-native 0.1.3 → 0.1.5
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/lib/module/native/DigitSlot.js +38 -5
- package/lib/module/native/DigitSlot.js.map +1 -1
- package/lib/module/native/MaskedView.js +8 -9
- package/lib/module/native/MaskedView.js.map +1 -1
- package/lib/module/native/NumberFlow.js +22 -27
- package/lib/module/native/NumberFlow.js.map +1 -1
- package/lib/module/native/TimeFlow.js +22 -30
- package/lib/module/native/TimeFlow.js.map +1 -1
- package/lib/typescript/native/DigitSlot.d.ts.map +1 -1
- package/lib/typescript/native/MaskedView.d.ts +7 -4
- package/lib/typescript/native/MaskedView.d.ts.map +1 -1
- package/lib/typescript/native/NumberFlow.d.ts.map +1 -1
- package/lib/typescript/native/TimeFlow.d.ts.map +1 -1
- package/native/package.json +4 -0
- package/package.json +5 -12
- package/skia/package.json +4 -0
- package/src/native/DigitSlot.tsx +58 -12
- package/src/native/MaskedView.tsx +10 -11
- package/src/native/NumberFlow.tsx +14 -21
- package/src/native/TimeFlow.tsx +14 -22
|
@@ -9,17 +9,39 @@ import { useAnimatedX } from "../core/useAnimatedX.js";
|
|
|
9
9
|
import { useDigitAnimation } from "../core/useDigitAnimation.js";
|
|
10
10
|
import { signedDigitOffset } from "../core/utils.js";
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
/**
|
|
13
|
+
* Maps a digit's clamped scroll offset to an opacity value for edge fading.
|
|
14
|
+
* Digits near center (offset ~ 0) are fully opaque; digits approaching the
|
|
15
|
+
* container edge fade to transparent over the mask zone.
|
|
16
|
+
*
|
|
17
|
+
* When mask is disabled (maskTop/Bottom = 0), fadeRatio = 0 → fadeStart = 1,
|
|
18
|
+
* so the function always returns 1 (no fade).
|
|
19
|
+
*/
|
|
13
20
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
21
|
+
function computeDigitOpacity(clampedOffset, maskTop, maskBottom, lineHeight) {
|
|
22
|
+
"worklet";
|
|
23
|
+
|
|
24
|
+
const absOffset = Math.abs(clampedOffset);
|
|
25
|
+
const fadeRatio = clampedOffset < 0 ? maskTop / lineHeight : maskBottom / lineHeight;
|
|
26
|
+
const fadeStart = Math.max(0, 1 - fadeRatio);
|
|
27
|
+
if (absOffset <= fadeStart) return 1;
|
|
28
|
+
if (absOffset >= 1) return 0;
|
|
29
|
+
return (1 - absOffset) / (1 - fadeStart);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
// Extracted as its own component so useAnimatedStyle respects Rules of Hooks
|
|
33
|
+
|
|
14
34
|
const DigitElement = /*#__PURE__*/React.memo(({
|
|
15
35
|
digitString,
|
|
16
36
|
yValue,
|
|
37
|
+
opacityValue,
|
|
17
38
|
textStyle
|
|
18
39
|
}) => {
|
|
19
40
|
const animatedStyle = useAnimatedStyle(() => ({
|
|
20
41
|
transform: [{
|
|
21
42
|
translateY: yValue.value
|
|
22
|
-
}]
|
|
43
|
+
}],
|
|
44
|
+
opacity: opacityValue.value
|
|
23
45
|
}));
|
|
24
46
|
return /*#__PURE__*/_jsx(Animated.View, {
|
|
25
47
|
style: [styles.digitView, animatedStyle],
|
|
@@ -95,6 +117,15 @@ export const DigitSlot = /*#__PURE__*/React.memo(({
|
|
|
95
117
|
return makeMutable(clamped * effectiveLH + effectiveMaskTop);
|
|
96
118
|
}));
|
|
97
119
|
|
|
120
|
+
// Per-digit opacity for edge fading (replaces container-level MaskedView)
|
|
121
|
+
const [digitOpacities] = useState(() => Array.from({
|
|
122
|
+
length: resolvedDigitCount
|
|
123
|
+
}, (_, n) => {
|
|
124
|
+
const offset = signedDigitOffset(n, initialDigit, resolvedDigitCount);
|
|
125
|
+
const clamped = Math.max(-1.5, Math.min(1.5, offset));
|
|
126
|
+
return makeMutable(computeDigitOpacity(clamped, effectiveMaskTop, effectiveMaskBottom, effectiveLH));
|
|
127
|
+
}));
|
|
128
|
+
|
|
98
129
|
/**
|
|
99
130
|
* Mirrors NumberFlow's CSS mod(): each digit n computes its signed
|
|
100
131
|
* offset from virtual position c, clamped to [-1.5, 1.5].
|
|
@@ -106,8 +137,9 @@ export const DigitSlot = /*#__PURE__*/React.memo(({
|
|
|
106
137
|
const offset = signedDigitOffset(n, c, resolvedDigitCount);
|
|
107
138
|
const clamped = Math.max(-1.5, Math.min(1.5, offset));
|
|
108
139
|
digitYValues[n].value = clamped * effectiveLH + effectiveMaskTop;
|
|
140
|
+
digitOpacities[n].value = computeDigitOpacity(clamped, effectiveMaskTop, effectiveMaskBottom, effectiveLH);
|
|
109
141
|
}
|
|
110
|
-
}, [effectiveLH, resolvedDigitCount, effectiveMaskTop]);
|
|
142
|
+
}, [effectiveLH, resolvedDigitCount, effectiveMaskTop, effectiveMaskBottom]);
|
|
111
143
|
const animatedX = useAnimatedX(targetX, exiting, transformTiming);
|
|
112
144
|
const [animatedClipWidth] = useState(() => makeMutable(charWidth));
|
|
113
145
|
const prevWidthRef = useRef(charWidth);
|
|
@@ -139,8 +171,9 @@ export const DigitSlot = /*#__PURE__*/React.memo(({
|
|
|
139
171
|
}, (_, n) => /*#__PURE__*/_jsx(DigitElement, {
|
|
140
172
|
digitString: resolvedDigitStrings[n],
|
|
141
173
|
textStyle: effectiveTextStyle,
|
|
142
|
-
yValue: digitYValues[n]
|
|
143
|
-
|
|
174
|
+
yValue: digitYValues[n],
|
|
175
|
+
opacityValue: digitOpacities[n]
|
|
176
|
+
}, n)), [resolvedDigitCount, resolvedDigitStrings, digitYValues, digitOpacities, effectiveTextStyle]);
|
|
144
177
|
return /*#__PURE__*/_jsx(Animated.View, {
|
|
145
178
|
style: [styles.absolute, animatedStyle],
|
|
146
179
|
children: /*#__PURE__*/_jsx(Animated.View, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useLayoutEffect","useMemo","useRef","useState","StyleSheet","Text","Animated","makeMutable","useAnimatedReaction","useAnimatedStyle","withTiming","DIGIT_COUNT","SUPERSCRIPT_SCALE","getSuperscriptTextStyle","useAnimatedX","useDigitAnimation","signedDigitOffset","jsx","_jsx","DigitElement","memo","digitString","yValue","textStyle","animatedStyle","transform","translateY","value","View","style","styles","digitView","children","displayName","DigitSlot","metrics","digitValue","targetX","charWidth","spinTiming","opacityTiming","transformTiming","trend","entering","exiting","exitKey","onExitComplete","digitCount","continuousSpinGeneration","
|
|
1
|
+
{"version":3,"names":["React","useLayoutEffect","useMemo","useRef","useState","StyleSheet","Text","Animated","makeMutable","useAnimatedReaction","useAnimatedStyle","withTiming","DIGIT_COUNT","SUPERSCRIPT_SCALE","getSuperscriptTextStyle","useAnimatedX","useDigitAnimation","signedDigitOffset","jsx","_jsx","computeDigitOpacity","clampedOffset","maskTop","maskBottom","lineHeight","absOffset","Math","abs","fadeRatio","fadeStart","max","DigitElement","memo","digitString","yValue","opacityValue","textStyle","animatedStyle","transform","translateY","value","opacity","View","style","styles","digitView","children","displayName","DigitSlot","metrics","digitValue","targetX","charWidth","spinTiming","opacityTiming","transformTiming","trend","entering","exiting","exitKey","onExitComplete","digitCount","continuousSpinGeneration","superscript","digitStrings","resolvedDigitCount","resolvedDigitStrings","Array","from","length","_","i","String","scale","effectiveLH","effectiveMaskTop","effectiveMaskBottom","effectiveTextStyle","initialDigit","animDelta","currentDigitSV","slotOpacity","digitYValues","n","offset","clamped","min","digitOpacities","c","animatedX","animatedClipWidth","prevWidthRef","current","duration","easing","translateX","expandedHeight","animatedClipStyle","overflow","height","width","digitElements","absolute","create","position","left","top"],"sourceRoot":"../../../src","sources":["native/DigitSlot.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,20 +1,19 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
* Resolves
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
4
|
+
* Resolves `@rednegniw/masked-view` if installed. Returns null when the
|
|
5
|
+
* package isn't available, allowing the caller to fall back to per-digit
|
|
6
|
+
* opacity fading.
|
|
7
|
+
*
|
|
8
|
+
* Only `@rednegniw/masked-view` (Fabric-compatible fork) is supported.
|
|
9
|
+
* The community `@react-native-masked-view/masked-view` is intentionally
|
|
10
|
+
* excluded because it crashes on Fabric (New Architecture).
|
|
8
11
|
*/
|
|
9
12
|
let Resolved = null;
|
|
10
13
|
try {
|
|
11
14
|
Resolved = require("@rednegniw/masked-view").default;
|
|
12
15
|
} catch {
|
|
13
|
-
|
|
14
|
-
Resolved = require("@react-native-masked-view/masked-view").default;
|
|
15
|
-
} catch {
|
|
16
|
-
// Neither available — mask prop will be ignored
|
|
17
|
-
}
|
|
16
|
+
// Not installed — masking falls back to per-digit opacity
|
|
18
17
|
}
|
|
19
18
|
export default Resolved;
|
|
20
19
|
//# sourceMappingURL=MaskedView.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Resolved","require","default"],"sourceRoot":"../../../src","sources":["native/MaskedView.tsx"],"mappings":";;AAOA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIA,QAAqD,GAAG,IAAI;AAChE,IAAI;
|
|
1
|
+
{"version":3,"names":["Resolved","require","default"],"sourceRoot":"../../../src","sources":["native/MaskedView.tsx"],"mappings":";;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIA,QAAqD,GAAG,IAAI;AAChE,IAAI;EACFA,QAAQ,GAAGC,OAAO,CAAC,wBAAwB,CAAC,CAACC,OAAO;AACtD,CAAC,CAAC,MAAM;EACN;AAAA;AAGF,eAAeF,QAAQ","ignoreList":[]}
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
4
4
|
import { Text, View } from "react-native";
|
|
5
|
-
import MaskedView from "./MaskedView.js";
|
|
6
5
|
import { getFormatCharacters } from "../core/intlHelpers.js";
|
|
7
6
|
import { computeKeyedLayout } from "../core/layout.js";
|
|
8
7
|
import { detectNumberingSystem, getDigitStrings } from "../core/numerals/index.js";
|
|
@@ -10,6 +9,7 @@ import { useFlowPipeline } from "../core/useFlowPipeline.js";
|
|
|
10
9
|
import { useNumberFormatting } from "../core/useNumberFormatting.js";
|
|
11
10
|
import { getDigitCount } from "../core/utils.js";
|
|
12
11
|
import { warnOnce } from "../core/warnings.js";
|
|
12
|
+
import MaskedView from "./MaskedView.js";
|
|
13
13
|
import { renderSlots } from "./renderSlots.js";
|
|
14
14
|
import { useMeasuredGlyphMetrics } from "./useMeasuredGlyphMetrics.js";
|
|
15
15
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -107,8 +107,6 @@ export const NumberFlow = ({
|
|
|
107
107
|
expansionTop,
|
|
108
108
|
expansionBottom
|
|
109
109
|
} = adaptiveMask;
|
|
110
|
-
|
|
111
|
-
// Step count scales with mask height — each step must be >=1px (sub-pixel Views collapse to 0).
|
|
112
110
|
const topSteps = Math.max(2, Math.round(maskTop));
|
|
113
111
|
const bottomSteps = Math.max(2, Math.round(maskBottom));
|
|
114
112
|
const gradientMaskElement = useMemo(() => {
|
|
@@ -203,29 +201,6 @@ export const NumberFlow = ({
|
|
|
203
201
|
maskBottom,
|
|
204
202
|
digitStrings
|
|
205
203
|
});
|
|
206
|
-
|
|
207
|
-
// Optionally wrap in MaskedView for gradient edge fade.
|
|
208
|
-
const maskedContent = resolvedMask && gradientMaskElement && MaskedView ? /*#__PURE__*/_jsx(MaskedView, {
|
|
209
|
-
maskElement: gradientMaskElement,
|
|
210
|
-
style: {
|
|
211
|
-
flex: 1
|
|
212
|
-
},
|
|
213
|
-
children: /*#__PURE__*/_jsxs(View, {
|
|
214
|
-
style: {
|
|
215
|
-
flex: 1,
|
|
216
|
-
position: "relative",
|
|
217
|
-
top: expansionTop
|
|
218
|
-
},
|
|
219
|
-
children: [MeasureElement, slots]
|
|
220
|
-
})
|
|
221
|
-
}) : /*#__PURE__*/_jsxs(View, {
|
|
222
|
-
style: {
|
|
223
|
-
flex: 1,
|
|
224
|
-
position: "relative",
|
|
225
|
-
top: expansionTop
|
|
226
|
-
},
|
|
227
|
-
children: [MeasureElement, slots]
|
|
228
|
-
});
|
|
229
204
|
return /*#__PURE__*/_jsx(View, {
|
|
230
205
|
accessible: true,
|
|
231
206
|
accessibilityRole: "text",
|
|
@@ -238,7 +213,27 @@ export const NumberFlow = ({
|
|
|
238
213
|
position: "relative",
|
|
239
214
|
overflow: "hidden"
|
|
240
215
|
}],
|
|
241
|
-
children:
|
|
216
|
+
children: resolvedMask && gradientMaskElement && MaskedView ? /*#__PURE__*/_jsx(MaskedView, {
|
|
217
|
+
maskElement: gradientMaskElement,
|
|
218
|
+
style: {
|
|
219
|
+
flex: 1
|
|
220
|
+
},
|
|
221
|
+
children: /*#__PURE__*/_jsxs(View, {
|
|
222
|
+
style: {
|
|
223
|
+
flex: 1,
|
|
224
|
+
position: "relative",
|
|
225
|
+
top: expansionTop
|
|
226
|
+
},
|
|
227
|
+
children: [MeasureElement, slots]
|
|
228
|
+
})
|
|
229
|
+
}) : /*#__PURE__*/_jsxs(View, {
|
|
230
|
+
style: {
|
|
231
|
+
flex: 1,
|
|
232
|
+
position: "relative",
|
|
233
|
+
top: expansionTop
|
|
234
|
+
},
|
|
235
|
+
children: [MeasureElement, slots]
|
|
236
|
+
})
|
|
242
237
|
});
|
|
243
238
|
};
|
|
244
239
|
//# sourceMappingURL=NumberFlow.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useCallback","useEffect","useMemo","useState","Text","View","
|
|
1
|
+
{"version":3,"names":["useCallback","useEffect","useMemo","useState","Text","View","getFormatCharacters","computeKeyedLayout","detectNumberingSystem","getDigitStrings","useFlowPipeline","useNumberFormatting","getDigitCount","warnOnce","MaskedView","renderSlots","useMeasuredGlyphMetrics","jsx","_jsx","jsxs","_jsxs","NumberFlow","value","format","locales","style","nfStyle","textAlign","prefix","suffix","spinTiming","opacityTiming","transformTiming","trend","animated","respectMotionPreference","continuous","digits","onAnimationsStart","onAnimationsFinish","containerStyle","mask","formatChars","numberingSystem","digitStrings","metrics","MeasureElement","__DEV__","fontSize","posStr","constraint","Object","entries","max","keyedParts","containerWidth","setContainerWidth","handleContainerLayout","e","nativeEvent","layout","width","length","resolvedSpinTiming","resolvedOpacityTiming","resolvedTransformTiming","resolvedTrend","spinGenerations","prevMap","isInitialRender","exitingEntries","onExitComplete","accessibilityLabel","adaptiveMask","trendValue","textStyle","color","resolvedMask","maskTop","top","maskBottom","bottom","expansionTop","expansionBottom","topSteps","Math","round","bottomSteps","gradientMaskElement","flex","flexDirection","children","Array","from","_","i","height","backgroundColor","slotsReady","setSlotsReady","metricsReady","id","requestAnimationFrame","cancelAnimationFrame","size","accessible","accessibilityRole","onLayout","lineHeight","marginTop","marginBottom","position","overflow","slots","digitCountResolver","key","maskElement"],"sourceRoot":"../../../src","sources":["native/NumberFlow.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
4
4
|
import { Text, View } from "react-native";
|
|
5
|
-
import MaskedView from "./MaskedView.js";
|
|
6
5
|
import { computeKeyedLayout } from "../core/layout.js";
|
|
7
6
|
import { useFlowPipeline } from "../core/useFlowPipeline.js";
|
|
8
7
|
import { useTimeFormatting } from "../core/useTimeFormatting.js";
|
|
9
8
|
import { TIME_DIGIT_COUNTS } from "../core/utils.js";
|
|
10
9
|
import { warnOnce } from "../core/warnings.js";
|
|
10
|
+
import MaskedView from "./MaskedView.js";
|
|
11
11
|
import { renderSlots } from "./renderSlots.js";
|
|
12
12
|
import { useMeasuredGlyphMetrics } from "./useMeasuredGlyphMetrics.js";
|
|
13
13
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -127,8 +127,6 @@ export const TimeFlow = ({
|
|
|
127
127
|
expansionTop,
|
|
128
128
|
expansionBottom
|
|
129
129
|
} = adaptiveMask;
|
|
130
|
-
|
|
131
|
-
// Step count scales with mask height — each step must be >=1px (sub-pixel Views collapse to 0).
|
|
132
130
|
const topSteps = Math.max(2, Math.round(maskTop));
|
|
133
131
|
const bottomSteps = Math.max(2, Math.round(maskBottom));
|
|
134
132
|
const gradientMaskElement = useMemo(() => {
|
|
@@ -225,32 +223,6 @@ export const TimeFlow = ({
|
|
|
225
223
|
maskTop,
|
|
226
224
|
maskBottom
|
|
227
225
|
});
|
|
228
|
-
|
|
229
|
-
// Optionally wrap in MaskedView for gradient edge fade.
|
|
230
|
-
// Content must be inside a single wrapper View so MaskedView's native
|
|
231
|
-
// didUpdateReactSubviews always sees one stable child — avoids Fabric
|
|
232
|
-
// "Attempt to recycle a mounted view" crash from dynamic slot churn.
|
|
233
|
-
const maskedContent = resolvedMask && gradientMaskElement && MaskedView ? /*#__PURE__*/_jsx(MaskedView, {
|
|
234
|
-
maskElement: gradientMaskElement,
|
|
235
|
-
style: {
|
|
236
|
-
flex: 1
|
|
237
|
-
},
|
|
238
|
-
children: /*#__PURE__*/_jsxs(View, {
|
|
239
|
-
style: {
|
|
240
|
-
flex: 1,
|
|
241
|
-
position: "relative",
|
|
242
|
-
top: expansionTop
|
|
243
|
-
},
|
|
244
|
-
children: [MeasureElement, slots]
|
|
245
|
-
})
|
|
246
|
-
}) : /*#__PURE__*/_jsxs(View, {
|
|
247
|
-
style: {
|
|
248
|
-
flex: 1,
|
|
249
|
-
position: "relative",
|
|
250
|
-
top: expansionTop
|
|
251
|
-
},
|
|
252
|
-
children: [MeasureElement, slots]
|
|
253
|
-
});
|
|
254
226
|
return /*#__PURE__*/_jsx(View, {
|
|
255
227
|
accessible: true,
|
|
256
228
|
accessibilityRole: "text",
|
|
@@ -263,7 +235,27 @@ export const TimeFlow = ({
|
|
|
263
235
|
position: "relative",
|
|
264
236
|
overflow: "hidden"
|
|
265
237
|
}],
|
|
266
|
-
children:
|
|
238
|
+
children: resolvedMask && gradientMaskElement && MaskedView ? /*#__PURE__*/_jsx(MaskedView, {
|
|
239
|
+
maskElement: gradientMaskElement,
|
|
240
|
+
style: {
|
|
241
|
+
flex: 1
|
|
242
|
+
},
|
|
243
|
+
children: /*#__PURE__*/_jsxs(View, {
|
|
244
|
+
style: {
|
|
245
|
+
flex: 1,
|
|
246
|
+
position: "relative",
|
|
247
|
+
top: expansionTop
|
|
248
|
+
},
|
|
249
|
+
children: [MeasureElement, slots]
|
|
250
|
+
})
|
|
251
|
+
}) : /*#__PURE__*/_jsxs(View, {
|
|
252
|
+
style: {
|
|
253
|
+
flex: 1,
|
|
254
|
+
position: "relative",
|
|
255
|
+
top: expansionTop
|
|
256
|
+
},
|
|
257
|
+
children: [MeasureElement, slots]
|
|
258
|
+
})
|
|
267
259
|
});
|
|
268
260
|
};
|
|
269
261
|
//# sourceMappingURL=TimeFlow.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useCallback","useEffect","useMemo","useState","Text","View","
|
|
1
|
+
{"version":3,"names":["useCallback","useEffect","useMemo","useState","Text","View","computeKeyedLayout","useFlowPipeline","useTimeFormatting","TIME_DIGIT_COUNTS","warnOnce","MaskedView","renderSlots","useMeasuredGlyphMetrics","jsx","_jsx","jsxs","_jsxs","TimeFlow","hours","minutes","seconds","timestamp","timezoneOffset","is24Hour","padHours","style","nfStyle","textAlign","spinTiming","opacityTiming","transformTiming","trend","animated","respectMotionPreference","continuous","onAnimationsStart","onAnimationsFinish","containerStyle","mask","metrics","MeasureElement","__DEV__","fontSize","resolved","undefined","d","Date","getUTCHours","getUTCMinutes","getUTCSeconds","resolvedHours","resolvedMinutes","resolvedSeconds","totalSeconds","keyedParts","containerWidth","setContainerWidth","handleContainerLayout","e","nativeEvent","layout","width","length","pipeline","trendValue","resolvedSpinTiming","resolvedOpacityTiming","resolvedTransformTiming","resolvedTrend","spinGenerations","prevMap","isInitialRender","exitingEntries","onExitComplete","accessibilityLabel","adaptiveMask","textStyle","color","resolvedMask","maskTop","top","maskBottom","bottom","expansionTop","expansionBottom","topSteps","Math","max","round","bottomSteps","gradientMaskElement","flex","flexDirection","children","Array","from","_","i","height","backgroundColor","slotsReady","setSlotsReady","metricsReady","id","requestAnimationFrame","cancelAnimationFrame","size","accessible","accessibilityRole","onLayout","lineHeight","marginTop","marginBottom","position","overflow","slots","digitCountResolver","key","maskElement"],"sourceRoot":"../../../src","sources":["native/TimeFlow.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DigitSlot.d.ts","sourceRoot":"","sources":["../../../src/native/DigitSlot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAUhE,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"DigitSlot.d.ts","sourceRoot":"","sources":["../../../src/native/DigitSlot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAUhE,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAsDvE,UAAU,cAAc;IACtB,OAAO,EAAE,YAAY,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,SAAS,CAAC;IACrB,UAAU,EAAE,YAAY,CAAC;IACzB,aAAa,EAAE,YAAY,CAAC;IAC5B,eAAe,EAAE,YAAY,CAAC;IAC9B,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,eAAO,MAAM,SAAS,2QAqBjB,cAAc,6CA+HlB,CAAC"}
|
|
@@ -4,10 +4,13 @@ interface MaskedViewProps extends ViewProps {
|
|
|
4
4
|
maskElement: ReactElement;
|
|
5
5
|
}
|
|
6
6
|
/**
|
|
7
|
-
* Resolves
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
7
|
+
* Resolves `@rednegniw/masked-view` if installed. Returns null when the
|
|
8
|
+
* package isn't available, allowing the caller to fall back to per-digit
|
|
9
|
+
* opacity fading.
|
|
10
|
+
*
|
|
11
|
+
* Only `@rednegniw/masked-view` (Fabric-compatible fork) is supported.
|
|
12
|
+
* The community `@react-native-masked-view/masked-view` is intentionally
|
|
13
|
+
* excluded because it crashes on Fabric (New Architecture).
|
|
11
14
|
*/
|
|
12
15
|
declare let Resolved: React.ComponentType<MaskedViewProps> | null;
|
|
13
16
|
export default Resolved;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MaskedView.d.ts","sourceRoot":"","sources":["../../../src/native/MaskedView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,UAAU,eAAgB,SAAQ,SAAS;
|
|
1
|
+
{"version":3,"file":"MaskedView.d.ts","sourceRoot":"","sources":["../../../src/native/MaskedView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,UAAU,eAAgB,SAAQ,SAAS;IACzC,WAAW,EAAE,YAAY,CAAC;CAC3B;AAED;;;;;;;;GAQG;AACH,QAAA,IAAI,QAAQ,EAAE,KAAK,CAAC,aAAa,CAAC,eAAe,CAAC,GAAG,IAAW,CAAC;AAOjE,eAAe,QAAQ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberFlow.d.ts","sourceRoot":"","sources":["../../../src/native/NumberFlow.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAG/C,eAAO,MAAM,UAAU,GAAI,+OAoBxB,eAAe,
|
|
1
|
+
{"version":3,"file":"NumberFlow.d.ts","sourceRoot":"","sources":["../../../src/native/NumberFlow.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAG/C,eAAO,MAAM,UAAU,GAAI,+OAoBxB,eAAe,4CA2NjB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeFlow.d.ts","sourceRoot":"","sources":["../../../src/native/TimeFlow.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TimeFlow.d.ts","sourceRoot":"","sources":["../../../src/native/TimeFlow.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AASvD,eAAO,MAAM,QAAQ,GAAI,uQAqBtB,aAAa,4CAmPf,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "number-flow-react-native",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
4
4
|
"description": "Animated number transitions for React Native — View-based and Skia renderers",
|
|
5
5
|
"source": "./src/index.ts",
|
|
6
6
|
"main": "./lib/module/index.js",
|
|
@@ -30,7 +30,9 @@
|
|
|
30
30
|
},
|
|
31
31
|
"files": [
|
|
32
32
|
"src",
|
|
33
|
-
"lib"
|
|
33
|
+
"lib",
|
|
34
|
+
"skia",
|
|
35
|
+
"native"
|
|
34
36
|
],
|
|
35
37
|
"sideEffects": false,
|
|
36
38
|
"repository": {
|
|
@@ -64,16 +66,7 @@
|
|
|
64
66
|
"peerDependencies": {
|
|
65
67
|
"react": ">=18",
|
|
66
68
|
"react-native": ">=0.73",
|
|
67
|
-
"react-native-reanimated": ">=3.0.0"
|
|
68
|
-
"@shopify/react-native-skia": ">=2.0.0"
|
|
69
|
-
},
|
|
70
|
-
"peerDependenciesMeta": {
|
|
71
|
-
"@shopify/react-native-skia": {
|
|
72
|
-
"optional": true
|
|
73
|
-
}
|
|
74
|
-
},
|
|
75
|
-
"dependencies": {
|
|
76
|
-
"@rednegniw/masked-view": "^0.4.0"
|
|
69
|
+
"react-native-reanimated": ">=3.0.0"
|
|
77
70
|
},
|
|
78
71
|
"devDependencies": {
|
|
79
72
|
"@types/jest": "^30.0.0",
|
package/src/native/DigitSlot.tsx
CHANGED
|
@@ -14,24 +14,52 @@ import { useAnimatedX } from "../core/useAnimatedX";
|
|
|
14
14
|
import { useDigitAnimation } from "../core/useDigitAnimation";
|
|
15
15
|
import { signedDigitOffset } from "../core/utils";
|
|
16
16
|
|
|
17
|
+
/**
|
|
18
|
+
* Maps a digit's clamped scroll offset to an opacity value for edge fading.
|
|
19
|
+
* Digits near center (offset ~ 0) are fully opaque; digits approaching the
|
|
20
|
+
* container edge fade to transparent over the mask zone.
|
|
21
|
+
*
|
|
22
|
+
* When mask is disabled (maskTop/Bottom = 0), fadeRatio = 0 → fadeStart = 1,
|
|
23
|
+
* so the function always returns 1 (no fade).
|
|
24
|
+
*/
|
|
25
|
+
function computeDigitOpacity(
|
|
26
|
+
clampedOffset: number,
|
|
27
|
+
maskTop: number,
|
|
28
|
+
maskBottom: number,
|
|
29
|
+
lineHeight: number,
|
|
30
|
+
): number {
|
|
31
|
+
"worklet";
|
|
32
|
+
const absOffset = Math.abs(clampedOffset);
|
|
33
|
+
const fadeRatio = clampedOffset < 0 ? maskTop / lineHeight : maskBottom / lineHeight;
|
|
34
|
+
const fadeStart = Math.max(0, 1 - fadeRatio);
|
|
35
|
+
|
|
36
|
+
if (absOffset <= fadeStart) return 1;
|
|
37
|
+
if (absOffset >= 1) return 0;
|
|
38
|
+
return (1 - absOffset) / (1 - fadeStart);
|
|
39
|
+
}
|
|
40
|
+
|
|
17
41
|
// Extracted as its own component so useAnimatedStyle respects Rules of Hooks
|
|
18
42
|
interface DigitElementProps {
|
|
19
43
|
digitString: string;
|
|
20
44
|
yValue: SharedValue<number>;
|
|
45
|
+
opacityValue: SharedValue<number>;
|
|
21
46
|
textStyle: DigitSlotProps["textStyle"];
|
|
22
47
|
}
|
|
23
48
|
|
|
24
|
-
const DigitElement = React.memo(
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
49
|
+
const DigitElement = React.memo(
|
|
50
|
+
({ digitString, yValue, opacityValue, textStyle }: DigitElementProps) => {
|
|
51
|
+
const animatedStyle = useAnimatedStyle(() => ({
|
|
52
|
+
transform: [{ translateY: yValue.value }],
|
|
53
|
+
opacity: opacityValue.value,
|
|
54
|
+
}));
|
|
28
55
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
}
|
|
56
|
+
return (
|
|
57
|
+
<Animated.View style={[styles.digitView, animatedStyle]}>
|
|
58
|
+
<Text style={textStyle}>{digitString}</Text>
|
|
59
|
+
</Animated.View>
|
|
60
|
+
);
|
|
61
|
+
},
|
|
62
|
+
);
|
|
35
63
|
|
|
36
64
|
DigitElement.displayName = "DigitElement";
|
|
37
65
|
|
|
@@ -122,6 +150,17 @@ export const DigitSlot = React.memo(
|
|
|
122
150
|
}),
|
|
123
151
|
);
|
|
124
152
|
|
|
153
|
+
// Per-digit opacity for edge fading (replaces container-level MaskedView)
|
|
154
|
+
const [digitOpacities] = useState(() =>
|
|
155
|
+
Array.from({ length: resolvedDigitCount }, (_, n) => {
|
|
156
|
+
const offset = signedDigitOffset(n, initialDigit, resolvedDigitCount);
|
|
157
|
+
const clamped = Math.max(-1.5, Math.min(1.5, offset));
|
|
158
|
+
return makeMutable(
|
|
159
|
+
computeDigitOpacity(clamped, effectiveMaskTop, effectiveMaskBottom, effectiveLH),
|
|
160
|
+
);
|
|
161
|
+
}),
|
|
162
|
+
);
|
|
163
|
+
|
|
125
164
|
/**
|
|
126
165
|
* Mirrors NumberFlow's CSS mod(): each digit n computes its signed
|
|
127
166
|
* offset from virtual position c, clamped to [-1.5, 1.5].
|
|
@@ -135,9 +174,15 @@ export const DigitSlot = React.memo(
|
|
|
135
174
|
const offset = signedDigitOffset(n, c, resolvedDigitCount);
|
|
136
175
|
const clamped = Math.max(-1.5, Math.min(1.5, offset));
|
|
137
176
|
digitYValues[n].value = clamped * effectiveLH + effectiveMaskTop;
|
|
177
|
+
digitOpacities[n].value = computeDigitOpacity(
|
|
178
|
+
clamped,
|
|
179
|
+
effectiveMaskTop,
|
|
180
|
+
effectiveMaskBottom,
|
|
181
|
+
effectiveLH,
|
|
182
|
+
);
|
|
138
183
|
}
|
|
139
184
|
},
|
|
140
|
-
[effectiveLH, resolvedDigitCount, effectiveMaskTop],
|
|
185
|
+
[effectiveLH, resolvedDigitCount, effectiveMaskTop, effectiveMaskBottom],
|
|
141
186
|
);
|
|
142
187
|
|
|
143
188
|
const animatedX = useAnimatedX(targetX, exiting, transformTiming);
|
|
@@ -176,9 +221,10 @@ export const DigitSlot = React.memo(
|
|
|
176
221
|
key={n}
|
|
177
222
|
textStyle={effectiveTextStyle}
|
|
178
223
|
yValue={digitYValues[n]}
|
|
224
|
+
opacityValue={digitOpacities[n]}
|
|
179
225
|
/>
|
|
180
226
|
)),
|
|
181
|
-
[resolvedDigitCount, resolvedDigitStrings, digitYValues, effectiveTextStyle],
|
|
227
|
+
[resolvedDigitCount, resolvedDigitStrings, digitYValues, digitOpacities, effectiveTextStyle],
|
|
182
228
|
);
|
|
183
229
|
|
|
184
230
|
return (
|
|
@@ -2,24 +2,23 @@ import type { ReactElement } from "react";
|
|
|
2
2
|
import type { ViewProps } from "react-native";
|
|
3
3
|
|
|
4
4
|
interface MaskedViewProps extends ViewProps {
|
|
5
|
-
|
|
5
|
+
maskElement: ReactElement;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
|
-
* Resolves
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
9
|
+
* Resolves `@rednegniw/masked-view` if installed. Returns null when the
|
|
10
|
+
* package isn't available, allowing the caller to fall back to per-digit
|
|
11
|
+
* opacity fading.
|
|
12
|
+
*
|
|
13
|
+
* Only `@rednegniw/masked-view` (Fabric-compatible fork) is supported.
|
|
14
|
+
* The community `@react-native-masked-view/masked-view` is intentionally
|
|
15
|
+
* excluded because it crashes on Fabric (New Architecture).
|
|
13
16
|
*/
|
|
14
17
|
let Resolved: React.ComponentType<MaskedViewProps> | null = null;
|
|
15
18
|
try {
|
|
16
|
-
|
|
19
|
+
Resolved = require("@rednegniw/masked-view").default;
|
|
17
20
|
} catch {
|
|
18
|
-
|
|
19
|
-
Resolved = require("@react-native-masked-view/masked-view").default;
|
|
20
|
-
} catch {
|
|
21
|
-
// Neither available — mask prop will be ignored
|
|
22
|
-
}
|
|
21
|
+
// Not installed — masking falls back to per-digit opacity
|
|
23
22
|
}
|
|
24
23
|
|
|
25
24
|
export default Resolved;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
2
2
|
import { type LayoutChangeEvent, Text, View } from "react-native";
|
|
3
|
-
import MaskedView from "./MaskedView";
|
|
4
3
|
import { getFormatCharacters } from "../core/intlHelpers";
|
|
5
4
|
import { computeKeyedLayout } from "../core/layout";
|
|
6
5
|
import { detectNumberingSystem, getDigitStrings } from "../core/numerals";
|
|
@@ -8,6 +7,7 @@ import { useFlowPipeline } from "../core/useFlowPipeline";
|
|
|
8
7
|
import { useNumberFormatting } from "../core/useNumberFormatting";
|
|
9
8
|
import { getDigitCount } from "../core/utils";
|
|
10
9
|
import { warnOnce } from "../core/warnings";
|
|
10
|
+
import MaskedView from "./MaskedView";
|
|
11
11
|
import { renderSlots } from "./renderSlots";
|
|
12
12
|
import type { NumberFlowProps } from "./types";
|
|
13
13
|
import { useMeasuredGlyphMetrics } from "./useMeasuredGlyphMetrics";
|
|
@@ -118,7 +118,6 @@ export const NumberFlow = ({
|
|
|
118
118
|
const maskBottom = adaptiveMask.bottom;
|
|
119
119
|
const { expansionTop, expansionBottom } = adaptiveMask;
|
|
120
120
|
|
|
121
|
-
// Step count scales with mask height — each step must be >=1px (sub-pixel Views collapse to 0).
|
|
122
121
|
const topSteps = Math.max(2, Math.round(maskTop));
|
|
123
122
|
const bottomSteps = Math.max(2, Math.round(maskBottom));
|
|
124
123
|
|
|
@@ -136,10 +135,8 @@ export const NumberFlow = ({
|
|
|
136
135
|
}}
|
|
137
136
|
/>
|
|
138
137
|
))}
|
|
139
|
-
|
|
140
138
|
{/* Middle: fully opaque */}
|
|
141
139
|
<View style={{ flex: 1, backgroundColor: "black" }} />
|
|
142
|
-
|
|
143
140
|
{/* Bottom fade: opaque -> transparent */}
|
|
144
141
|
{Array.from({ length: bottomSteps }, (_, i) => (
|
|
145
142
|
<View
|
|
@@ -222,22 +219,6 @@ export const NumberFlow = ({
|
|
|
222
219
|
digitStrings,
|
|
223
220
|
});
|
|
224
221
|
|
|
225
|
-
// Optionally wrap in MaskedView for gradient edge fade.
|
|
226
|
-
const maskedContent =
|
|
227
|
-
resolvedMask && gradientMaskElement && MaskedView ? (
|
|
228
|
-
<MaskedView maskElement={gradientMaskElement} style={{ flex: 1 }}>
|
|
229
|
-
<View style={{ flex: 1, position: "relative", top: expansionTop }}>
|
|
230
|
-
{MeasureElement}
|
|
231
|
-
{slots}
|
|
232
|
-
</View>
|
|
233
|
-
</MaskedView>
|
|
234
|
-
) : (
|
|
235
|
-
<View style={{ flex: 1, position: "relative", top: expansionTop }}>
|
|
236
|
-
{MeasureElement}
|
|
237
|
-
{slots}
|
|
238
|
-
</View>
|
|
239
|
-
);
|
|
240
|
-
|
|
241
222
|
return (
|
|
242
223
|
<View
|
|
243
224
|
accessible
|
|
@@ -255,7 +236,19 @@ export const NumberFlow = ({
|
|
|
255
236
|
},
|
|
256
237
|
]}
|
|
257
238
|
>
|
|
258
|
-
{
|
|
239
|
+
{resolvedMask && gradientMaskElement && MaskedView ? (
|
|
240
|
+
<MaskedView maskElement={gradientMaskElement} style={{ flex: 1 }}>
|
|
241
|
+
<View style={{ flex: 1, position: "relative", top: expansionTop }}>
|
|
242
|
+
{MeasureElement}
|
|
243
|
+
{slots}
|
|
244
|
+
</View>
|
|
245
|
+
</MaskedView>
|
|
246
|
+
) : (
|
|
247
|
+
<View style={{ flex: 1, position: "relative", top: expansionTop }}>
|
|
248
|
+
{MeasureElement}
|
|
249
|
+
{slots}
|
|
250
|
+
</View>
|
|
251
|
+
)}
|
|
259
252
|
</View>
|
|
260
253
|
);
|
|
261
254
|
};
|
package/src/native/TimeFlow.tsx
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
2
2
|
import { type LayoutChangeEvent, Text, View } from "react-native";
|
|
3
|
-
import MaskedView from "./MaskedView";
|
|
4
3
|
import { computeKeyedLayout } from "../core/layout";
|
|
5
4
|
import type { TimeFlowProps } from "../core/timeTypes";
|
|
6
5
|
import { useFlowPipeline } from "../core/useFlowPipeline";
|
|
7
6
|
import { useTimeFormatting } from "../core/useTimeFormatting";
|
|
8
7
|
import { TIME_DIGIT_COUNTS } from "../core/utils";
|
|
9
8
|
import { warnOnce } from "../core/warnings";
|
|
9
|
+
import MaskedView from "./MaskedView";
|
|
10
10
|
import { renderSlots } from "./renderSlots";
|
|
11
11
|
import { useMeasuredGlyphMetrics } from "./useMeasuredGlyphMetrics";
|
|
12
12
|
|
|
@@ -140,7 +140,6 @@ export const TimeFlow = ({
|
|
|
140
140
|
const maskBottom = adaptiveMask.bottom;
|
|
141
141
|
const { expansionTop, expansionBottom } = adaptiveMask;
|
|
142
142
|
|
|
143
|
-
// Step count scales with mask height — each step must be >=1px (sub-pixel Views collapse to 0).
|
|
144
143
|
const topSteps = Math.max(2, Math.round(maskTop));
|
|
145
144
|
const bottomSteps = Math.max(2, Math.round(maskBottom));
|
|
146
145
|
|
|
@@ -243,25 +242,6 @@ export const TimeFlow = ({
|
|
|
243
242
|
maskBottom,
|
|
244
243
|
});
|
|
245
244
|
|
|
246
|
-
// Optionally wrap in MaskedView for gradient edge fade.
|
|
247
|
-
// Content must be inside a single wrapper View so MaskedView's native
|
|
248
|
-
// didUpdateReactSubviews always sees one stable child — avoids Fabric
|
|
249
|
-
// "Attempt to recycle a mounted view" crash from dynamic slot churn.
|
|
250
|
-
const maskedContent =
|
|
251
|
-
resolvedMask && gradientMaskElement && MaskedView ? (
|
|
252
|
-
<MaskedView maskElement={gradientMaskElement} style={{ flex: 1 }}>
|
|
253
|
-
<View style={{ flex: 1, position: "relative", top: expansionTop }}>
|
|
254
|
-
{MeasureElement}
|
|
255
|
-
{slots}
|
|
256
|
-
</View>
|
|
257
|
-
</MaskedView>
|
|
258
|
-
) : (
|
|
259
|
-
<View style={{ flex: 1, position: "relative", top: expansionTop }}>
|
|
260
|
-
{MeasureElement}
|
|
261
|
-
{slots}
|
|
262
|
-
</View>
|
|
263
|
-
);
|
|
264
|
-
|
|
265
245
|
return (
|
|
266
246
|
<View
|
|
267
247
|
accessible
|
|
@@ -279,7 +259,19 @@ export const TimeFlow = ({
|
|
|
279
259
|
},
|
|
280
260
|
]}
|
|
281
261
|
>
|
|
282
|
-
{
|
|
262
|
+
{resolvedMask && gradientMaskElement && MaskedView ? (
|
|
263
|
+
<MaskedView maskElement={gradientMaskElement} style={{ flex: 1 }}>
|
|
264
|
+
<View style={{ flex: 1, position: "relative", top: expansionTop }}>
|
|
265
|
+
{MeasureElement}
|
|
266
|
+
{slots}
|
|
267
|
+
</View>
|
|
268
|
+
</MaskedView>
|
|
269
|
+
) : (
|
|
270
|
+
<View style={{ flex: 1, position: "relative", top: expansionTop }}>
|
|
271
|
+
{MeasureElement}
|
|
272
|
+
{slots}
|
|
273
|
+
</View>
|
|
274
|
+
)}
|
|
283
275
|
</View>
|
|
284
276
|
);
|
|
285
277
|
};
|