@tamagui/animations-react-native 2.7.7 → 3.0.0-0.canary.1791057742817

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.
Files changed (47) hide show
  1. package/dist/cjs/createAnimations.native.cjs +863 -0
  2. package/dist/cjs/createAnimations.native.js +814 -597
  3. package/dist/cjs/createAnimations.native.js.map +1 -1
  4. package/dist/cjs/index.cjs +19 -13
  5. package/dist/cjs/index.native.cjs +21 -0
  6. package/dist/cjs/index.native.js +12 -13
  7. package/dist/cjs/index.native.js.map +1 -1
  8. package/dist/cjs/polyfill.cjs +2 -2
  9. package/dist/cjs/polyfill.native.cjs +5 -0
  10. package/dist/cjs/polyfill.native.js +2 -1
  11. package/dist/cjs/polyfill.native.js.map +1 -1
  12. package/dist/cjs/types.cjs +16 -0
  13. package/dist/cjs/types.native.cjs +18 -0
  14. package/dist/cjs/types.native.js +20 -0
  15. package/dist/cjs/types.native.js.map +1 -0
  16. package/dist/esm/createAnimations.native.js +792 -567
  17. package/dist/esm/createAnimations.native.js.map +1 -1
  18. package/dist/esm/index.js +6 -2
  19. package/dist/esm/index.js.map +1 -1
  20. package/dist/esm/index.mjs +6 -2
  21. package/dist/esm/index.mjs.map +1 -1
  22. package/dist/esm/index.native.js +2 -2
  23. package/dist/esm/polyfill.mjs +2 -1
  24. package/dist/esm/polyfill.mjs.map +1 -1
  25. package/dist/esm/polyfill.native.js +2 -1
  26. package/dist/esm/polyfill.native.js.map +1 -1
  27. package/dist/esm/types.mjs +0 -0
  28. package/dist/esm/types.native.js +0 -0
  29. package/package.json +17 -11
  30. package/src/createAnimations.native.tsx +1351 -0
  31. package/src/index.native.ts +3 -0
  32. package/src/index.ts +20 -2
  33. package/src/types.ts +4 -0
  34. package/types/{createAnimations.d.ts → createAnimations.native.d.ts} +5 -14
  35. package/types/createAnimations.native.d.ts.map +11 -0
  36. package/types/index.d.ts +10 -2
  37. package/types/index.d.ts.map +2 -2
  38. package/types/index.native.d.ts +4 -0
  39. package/types/index.native.d.ts.map +11 -0
  40. package/types/types.d.ts +5 -0
  41. package/types/types.d.ts.map +11 -0
  42. package/dist/cjs/createAnimations.cjs +0 -566
  43. package/dist/esm/createAnimations.mjs +0 -524
  44. package/dist/esm/createAnimations.mjs.map +0 -1
  45. package/dist/esm/index.native.js.map +0 -1
  46. package/src/createAnimations.tsx +0 -831
  47. package/types/createAnimations.d.ts.map +0 -11
@@ -7,642 +7,859 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
7
7
  var __getProtoOf = Object.getPrototypeOf;
8
8
  var __hasOwnProp = Object.prototype.hasOwnProperty;
9
9
  var __export = (target, all) => {
10
- for (var name in all) __defProp(target, name, {
11
- get: all[name],
12
- enumerable: true
13
- });
10
+ for (var name in all) __defProp(target, name, {
11
+ get: all[name],
12
+ enumerable: true
13
+ });
14
14
  };
15
15
  var __copyProps = (to, from, except, desc) => {
16
- if (from && typeof from === "object" || typeof from === "function") {
17
- for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
18
- get: () => from[key],
19
- enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
20
- });
21
- }
22
- return to;
16
+ if (from && typeof from === "object" || typeof from === "function") {
17
+ for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
18
+ get: () => from[key],
19
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
20
+ });
21
+ }
22
+ return to;
23
23
  };
24
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
25
- // If the importer is in node compatibility mode or this is not an ESM
26
- // file that has been converted to a CommonJS file using a Babel-
27
- // compatible transform (i.e. "__esModule" has not been set), then set
28
- // "default" to the CommonJS "module.exports" for node compatibility.
29
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
30
- value: mod,
31
- enumerable: true
24
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
25
+ value: mod,
26
+ enumerable: true
32
27
  }) : target, mod));
33
- var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
34
- value: true
35
- }), mod);
36
- var createAnimations_exports = {};
37
- __export(createAnimations_exports, {
38
- AnimatedText: () => AnimatedText,
39
- AnimatedView: () => AnimatedView,
40
- createAnimations: () => createAnimations,
41
- useAnimatedNumber: () => useAnimatedNumber,
42
- useAnimatedNumberReaction: () => useAnimatedNumberReaction,
43
- useAnimatedNumberStyle: () => useAnimatedNumberStyle,
44
- useAnimatedNumbersStyle: () => useAnimatedNumbersStyle
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+ var createAnimations_native_exports = {};
30
+ __export(createAnimations_native_exports, {
31
+ AnimatedText: () => AnimatedText,
32
+ AnimatedView: () => AnimatedView,
33
+ createAnimations: () => createAnimations,
34
+ useAnimatedNumber: () => useAnimatedNumber,
35
+ useAnimatedNumberReaction: () => useAnimatedNumberReaction,
36
+ useAnimatedNumberStyle: () => useAnimatedNumberStyle,
37
+ useAnimatedNumbersStyle: () => useAnimatedNumbersStyle
45
38
  });
46
- module.exports = __toCommonJS(createAnimations_exports);
39
+ module.exports = __toCommonJS(createAnimations_native_exports);
47
40
  var import_animation_helpers = require("@tamagui/animation-helpers");
48
41
  var import_constants = require("@tamagui/constants");
49
42
  var import_use_presence = require("@tamagui/use-presence");
50
43
  var import_web = require("@tamagui/web");
44
+ var import_internal_runtime = require("@tamagui/web/internal-runtime");
51
45
  var import_react = __toESM(require("react"), 1);
52
46
  var import_react_native = require("react-native");
53
- function _type_of(obj) {
54
- "@swc/helpers - typeof";
55
-
56
- return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
57
- }
58
47
  var isFabric = !import_constants.isWeb && typeof global !== "undefined" && !!global.__nativeFabricUIManager;
59
- var resolveDynamicValue = function (value, isDark) {
60
- if (value && (typeof value === "undefined" ? "undefined" : _type_of(value)) === "object" && "dynamic" in value) {
61
- var dynamicValue = isDark ? value.dynamic.dark : value.dynamic.light;
62
- return dynamicValue;
63
- }
64
- return value;
48
+ var resolveDynamicValue = function(value, isDark) {
49
+ if (value && typeof value === "object" && "dynamic" in value) {
50
+ var dynamicValue = isDark ? value.dynamic.dark : value.dynamic.light;
51
+ return dynamicValue;
52
+ }
53
+ return value;
65
54
  };
66
55
  var animatedStyleKey = {
67
- transform: true,
68
- opacity: true
56
+ transform: true,
57
+ opacity: true
69
58
  };
70
59
  var colorStyleKey = {
71
- backgroundColor: true,
72
- color: true,
73
- borderColor: true,
74
- borderLeftColor: true,
75
- borderRightColor: true,
76
- borderTopColor: true,
77
- borderBottomColor: true
60
+ backgroundColor: true,
61
+ color: true,
62
+ borderColor: true,
63
+ borderLeftColor: true,
64
+ borderRightColor: true,
65
+ borderTopColor: true,
66
+ borderBottomColor: true
78
67
  };
79
68
  var layoutStyleKey = {
80
- height: true,
81
- width: true,
82
- minHeight: true,
83
- maxHeight: true,
84
- minWidth: true,
85
- maxWidth: true
69
+ height: true,
70
+ width: true,
71
+ minHeight: true,
72
+ maxHeight: true,
73
+ minWidth: true,
74
+ maxWidth: true
75
+ };
76
+ var textMetricStyleKey = {
77
+ fontSize: true,
78
+ lineHeight: true
86
79
  };
87
- function hasAnimatedLayoutKey(style, isDark, animateOnly) {
88
- for (var key in layoutStyleKey) {
89
- if (animateOnly && !animateOnly.includes(key)) continue;
90
- if (typeof resolveDynamicValue(style[key], isDark) === "number") return true;
91
- }
92
- return false;
80
+ var jsDriverStyleKey = {
81
+ ...layoutStyleKey,
82
+ ...textMetricStyleKey
83
+ };
84
+ function hasAnimatedLayoutKey(style, isDark, resolved) {
85
+ for (var key in layoutStyleKey) {
86
+ if (!(0, import_animation_helpers.getTransitionForKey)(resolved, key)) continue;
87
+ if (typeof resolveDynamicValue(style[key], isDark) === "number") return true;
88
+ }
89
+ return false;
93
90
  }
91
+ var getLeadingRatio = function(metrics) {
92
+ var ratio = metrics === null || metrics === void 0 ? void 0 : metrics.lineHeight;
93
+ return typeof ratio === "number" && Number.isFinite(ratio) && ratio >= 0 ? ratio : void 0;
94
+ };
95
+ var paintsLeadingProduct = function(style, ratio) {
96
+ return ratio !== void 0 && typeof style.fontSize === "number" && typeof style.lineHeight === "number";
97
+ };
98
+ var inheritedFontSizeNode = function(style, ratio, inheritedText) {
99
+ return ratio !== void 0 && typeof style.fontSize !== "number" && (inheritedText === null || inheritedText === void 0 ? void 0 : inheritedText.driver) === "react-native" ? inheritedText.fontSize : void 0;
100
+ };
94
101
  function isAnimatableColor(value) {
95
- if (typeof value !== "string") return false;
96
- if (value === "") return false;
97
- if (value.includes("var(") || value.includes("calc(")) return false;
98
- return true;
102
+ return typeof value === "string" && (0, import_react_native.processColor)(value) != null;
99
103
  }
100
104
  var costlyToAnimateStyleKey = {
101
- borderRadius: true,
102
- borderTopLeftRadius: true,
103
- borderTopRightRadius: true,
104
- borderBottomLeftRadius: true,
105
- borderBottomRightRadius: true,
106
- borderWidth: true,
107
- borderLeftWidth: true,
108
- borderRightWidth: true,
109
- borderTopWidth: true,
110
- borderBottomWidth: true,
111
- ...colorStyleKey
105
+ borderRadius: true,
106
+ borderTopLeftRadius: true,
107
+ borderTopRightRadius: true,
108
+ borderBottomLeftRadius: true,
109
+ borderBottomRightRadius: true,
110
+ borderWidth: true,
111
+ borderLeftWidth: true,
112
+ borderRightWidth: true,
113
+ borderTopWidth: true,
114
+ borderBottomWidth: true,
115
+ ...colorStyleKey
112
116
  };
113
117
  var AnimatedView = import_react_native.Animated.View;
114
118
  var AnimatedText = import_react_native.Animated.Text;
119
+ var animatedTextInput;
115
120
  function useAnimatedNumber(initial) {
116
- var state = import_react.default.useRef(null);
117
- if (!state.current) {
118
- state.current = {
119
- composite: null,
120
- val: new import_react_native.Animated.Value(initial),
121
- strategy: {
122
- type: "spring"
123
- }
124
- };
125
- }
126
- return {
127
- getInstance() {
128
- return state.current.val;
129
- },
130
- getValue() {
131
- return state.current.val["_value"];
132
- },
133
- stop() {
134
- var _state_current_composite;
135
- (_state_current_composite = state.current.composite) === null || _state_current_composite === void 0 ? void 0 : _state_current_composite.stop();
136
- state.current.composite = null;
137
- },
138
- setValue(next) {
139
- var {
140
- type,
141
- ...config
142
- } = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
143
- type: "spring"
144
- },
145
- onFinish = arguments.length > 2 ? arguments[2] : void 0;
146
- var val = state.current.val;
147
- var handleFinish = onFinish ? function (param) {
148
- var {
149
- finished
150
- } = param;
151
- return finished ? onFinish() : null;
152
- } : void 0;
153
- if (type === "direct") {
154
- val.setValue(next);
155
- } else if (type === "spring") {
156
- var _state_current_composite;
157
- (_state_current_composite = state.current.composite) === null || _state_current_composite === void 0 ? void 0 : _state_current_composite.stop();
158
- var composite = import_react_native.Animated.spring(val, {
159
- ...config,
160
- toValue: next,
161
- useNativeDriver: isFabric
162
- });
163
- composite.start(handleFinish);
164
- state.current.composite = composite;
165
- } else {
166
- var _state_current_composite1;
167
- (_state_current_composite1 = state.current.composite) === null || _state_current_composite1 === void 0 ? void 0 : _state_current_composite1.stop();
168
- var composite1 = import_react_native.Animated.timing(val, {
169
- ...config,
170
- toValue: next,
171
- useNativeDriver: isFabric
172
- });
173
- composite1.start(handleFinish);
174
- state.current.composite = composite1;
175
- }
176
- }
177
- };
121
+ var state = import_react.default.useRef(null);
122
+ if (!state.current) {
123
+ state.current = {
124
+ composite: null,
125
+ val: new import_react_native.Animated.Value(initial),
126
+ strategy: { type: "spring" }
127
+ };
128
+ }
129
+ return {
130
+ getInstance() {
131
+ return state.current.val;
132
+ },
133
+ getValue() {
134
+ return state.current.val["_value"];
135
+ },
136
+ stop() {
137
+ var _state_current_composite;
138
+ (_state_current_composite = state.current.composite) === null || _state_current_composite === void 0 ? void 0 : _state_current_composite.stop();
139
+ state.current.composite = null;
140
+ },
141
+ setValue(next) {
142
+ var { type, ...config } = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : { type: "spring" }, onFinish = arguments.length > 2 ? arguments[2] : void 0;
143
+ var val = state.current.val;
144
+ var handleFinish = onFinish ? function(param) {
145
+ var { finished } = param;
146
+ return finished ? onFinish() : null;
147
+ } : void 0;
148
+ if (type === "direct") {
149
+ var _state_current_composite;
150
+ (_state_current_composite = state.current.composite) === null || _state_current_composite === void 0 ? void 0 : _state_current_composite.stop();
151
+ state.current.composite = null;
152
+ val.setValue(next);
153
+ onFinish === null || onFinish === void 0 ? void 0 : onFinish();
154
+ } else if (type === "spring") {
155
+ var _state_current_composite1;
156
+ (_state_current_composite1 = state.current.composite) === null || _state_current_composite1 === void 0 ? void 0 : _state_current_composite1.stop();
157
+ var composite = import_react_native.Animated.spring(val, {
158
+ ...config,
159
+ toValue: next,
160
+ useNativeDriver: isFabric
161
+ });
162
+ composite.start(handleFinish);
163
+ state.current.composite = composite;
164
+ } else {
165
+ var _state_current_composite2;
166
+ (_state_current_composite2 = state.current.composite) === null || _state_current_composite2 === void 0 ? void 0 : _state_current_composite2.stop();
167
+ var composite1 = import_react_native.Animated.timing(val, {
168
+ ...config,
169
+ toValue: next,
170
+ useNativeDriver: isFabric
171
+ });
172
+ composite1.start(handleFinish);
173
+ state.current.composite = composite1;
174
+ }
175
+ }
176
+ };
178
177
  }
179
- var useAnimatedNumberReaction = function (param, onValue) {
180
- var {
181
- value
182
- } = param;
183
- var onChange = (0, import_web.useEvent)(function (current) {
184
- onValue(current.value);
185
- });
186
- import_react.default.useEffect(function () {
187
- var id = value.getInstance().addListener(onChange);
188
- return function () {
189
- value.getInstance().removeListener(id);
190
- };
191
- }, [value, onChange]);
178
+ var useAnimatedNumberReaction = function(param, onValue) {
179
+ var { value } = param;
180
+ var onChange = (0, import_web.useEvent)(function(current) {
181
+ onValue(current.value);
182
+ });
183
+ import_react.default.useEffect(function() {
184
+ var id = value.getInstance().addListener(onChange);
185
+ return function() {
186
+ value.getInstance().removeListener(id);
187
+ };
188
+ }, [value, onChange]);
192
189
  };
193
- var useAnimatedNumberStyle = function (value, getStyle) {
194
- return getStyle(value.getInstance());
190
+ var useAnimatedNumberStyle = function(value, getStyle) {
191
+ var instance = value.getInstance();
192
+ var animatedStyle = getStyle(instance);
193
+ var usesAnimatedNode = hasAnimatedNode(animatedStyle);
194
+ var [current, setCurrent] = import_react.default.useState(value.getValue());
195
+ import_react.default.useEffect(function() {
196
+ if (usesAnimatedNode) return;
197
+ var id = instance.addListener(function(param) {
198
+ var { value: next } = param;
199
+ setCurrent(next);
200
+ });
201
+ return function() {
202
+ instance.removeListener(id);
203
+ };
204
+ }, [instance, usesAnimatedNode]);
205
+ return usesAnimatedNode ? animatedStyle : getStyle(current);
195
206
  };
196
- var useAnimatedNumbersStyle = function (vals, getStyle) {
197
- return getStyle(...vals.map(function (v) {
198
- return v.getInstance();
199
- }));
207
+ function hasAnimatedNode(value) {
208
+ if (!value || typeof value !== "object") return false;
209
+ if (typeof value.__getValue === "function") return true;
210
+ if (Array.isArray(value)) return value.some(hasAnimatedNode);
211
+ return Object.values(value).some(hasAnimatedNode);
212
+ }
213
+ var useAnimatedNumbersStyle = function(vals, getStyle) {
214
+ return getStyle(...vals.map(function(v) {
215
+ return v.getInstance();
216
+ }));
200
217
  };
201
218
  function createAnimations(animations, options) {
202
- var _options_useNativeDriver;
203
- var nativeDriver = (_options_useNativeDriver = options === null || options === void 0 ? void 0 : options.useNativeDriver) !== null && _options_useNativeDriver !== void 0 ? _options_useNativeDriver : isFabric;
204
- return {
205
- isReactNative: true,
206
- inputStyle: "value",
207
- outputStyle: "inline",
208
- avoidReRenders: true,
209
- animations,
210
- needsCustomComponent: true,
211
- View: AnimatedView,
212
- Text: AnimatedText,
213
- useAnimatedNumber,
214
- useAnimatedNumberReaction,
215
- useAnimatedNumberStyle,
216
- useAnimatedNumbersStyle,
217
- usePresence: import_use_presence.usePresence,
218
- ResetPresence: import_use_presence.ResetPresence,
219
- useAnimations: function (param) {
220
- var {
221
- props,
222
- onDidAnimate,
223
- style,
224
- componentState,
225
- presence,
226
- stateRef,
227
- useStyleEmitter
228
- } = param;
229
- var _themeState_name;
230
- var isDisabled = import_constants.isWeb && componentState.unmounted === true;
231
- var isExiting = (presence === null || presence === void 0 ? void 0 : presence[0]) === false;
232
- var sendExitComplete = presence === null || presence === void 0 ? void 0 : presence[1];
233
- var [, themeState] = (0, import_web.useThemeWithState)({});
234
- var isDark = (themeState === null || themeState === void 0 ? void 0 : themeState.scheme) === "dark" || (themeState === null || themeState === void 0 ? void 0 : (_themeState_name = themeState.name) === null || _themeState_name === void 0 ? void 0 : _themeState_name.startsWith("dark"));
235
- var animateStyles = import_react.default.useRef({});
236
- var animatedTranforms = import_react.default.useRef([]);
237
- var animationsState = import_react.default.useRef(/* @__PURE__ */new WeakMap());
238
- var pseudoActiveRef = import_react.default.useRef(false);
239
- var exitCycleIdRef = import_react.default.useRef(0);
240
- var exitCompletedRef = import_react.default.useRef(false);
241
- var wasExitingRef = import_react.default.useRef(false);
242
- var justStartedExiting = isExiting && !wasExitingRef.current;
243
- var justStoppedExiting = !isExiting && wasExitingRef.current;
244
- if (justStartedExiting) {
245
- exitCycleIdRef.current++;
246
- exitCompletedRef.current = false;
247
- }
248
- if (justStoppedExiting) {
249
- exitCycleIdRef.current++;
250
- }
251
- var animateOnly = props.animateOnly || [];
252
- var hasTransitionOnly = !!props.animateOnly;
253
- var isEntering = !!componentState.unmounted;
254
- var wasEnteringRef = import_react.default.useRef(isEntering);
255
- var justFinishedEntering = wasEnteringRef.current && !isEntering;
256
- import_react.default.useEffect(function () {
257
- wasEnteringRef.current = isEntering;
258
- });
259
- var args = [JSON.stringify(style), componentState, isExiting, !!onDidAnimate, isDark, justFinishedEntering, hasTransitionOnly];
260
- var res = import_react.default.useMemo(function () {
261
- var runners = [];
262
- var completions = [];
263
- var animationState = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "default";
264
- var nonAnimatedStyle = {};
265
- var useNativeDriverForNode = nativeDriver && !hasAnimatedLayoutKey(style, isDark, hasTransitionOnly ? animateOnly : void 0);
266
- var seenAnimateKeys = /* @__PURE__ */new Set();
267
- var sawTransform = false;
268
- var transformCount = 0;
269
- for (var key in style) {
270
- var rawVal = style[key];
271
- var val = resolveDynamicValue(rawVal, isDark);
272
- if (val === void 0) continue;
273
- if (isDisabled) {
274
- continue;
275
- }
276
- if (animatedStyleKey[key] == null && !costlyToAnimateStyleKey[key] && !layoutStyleKey[key]) {
277
- nonAnimatedStyle[key] = val;
278
- continue;
279
- }
280
- if (hasTransitionOnly && !animateOnly.includes(key)) {
281
- nonAnimatedStyle[key] = val;
282
- continue;
283
- }
284
- if (layoutStyleKey[key] && typeof val !== "number") {
285
- nonAnimatedStyle[key] = val;
286
- continue;
287
- }
288
- if (colorStyleKey[key] && !isAnimatableColor(val)) {
289
- nonAnimatedStyle[key] = val;
290
- continue;
291
- }
292
- if (key !== "transform") {
293
- animateStyles.current[key] = update(key, animateStyles.current[key], val);
294
- seenAnimateKeys.add(key);
295
- continue;
296
- }
297
- if (!val) continue;
298
- if (typeof val === "string") {
299
- console.warn(`Warning: Tamagui can't animate string transforms yet!`);
300
- continue;
301
- }
302
- sawTransform = true;
303
- var _iteratorNormalCompletion = true,
304
- _didIteratorError = false,
305
- _iteratorError = void 0;
306
- try {
307
- for (var _iterator = val[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
308
- var transform = _step.value;
309
- var _animatedTranforms_current_index;
310
- if (!transform) continue;
311
- var index = transformCount++;
312
- var tkey = Object.keys(transform)[0];
313
- var currentTransform = (_animatedTranforms_current_index = animatedTranforms.current[index]) === null || _animatedTranforms_current_index === void 0 ? void 0 : _animatedTranforms_current_index[tkey];
314
- animatedTranforms.current[index] = {
315
- [tkey]: update(tkey, currentTransform, transform[tkey])
316
- };
317
- animatedTranforms.current = [...animatedTranforms.current];
318
- }
319
- } catch (err) {
320
- _didIteratorError = true;
321
- _iteratorError = err;
322
- } finally {
323
- try {
324
- if (!_iteratorNormalCompletion && _iterator.return != null) {
325
- _iterator.return();
326
- }
327
- } finally {
328
- if (_didIteratorError) {
329
- throw _iteratorError;
330
- }
331
- }
332
- }
333
- }
334
- if (!isExiting && !isDisabled && !pseudoActiveRef.current) {
335
- for (var k in animateStyles.current) {
336
- if (!seenAnimateKeys.has(k)) delete animateStyles.current[k];
337
- }
338
- if (!sawTransform) {
339
- if (animatedTranforms.current.length) animatedTranforms.current = [];
340
- } else if (animatedTranforms.current.length > transformCount) {
341
- animatedTranforms.current = animatedTranforms.current.slice(0, transformCount);
342
- }
343
- }
344
- var animatedTransformStyle = animatedTranforms.current.length > 0 ? {
345
- transform: animatedTranforms.current.map(function (r) {
346
- var _animationsState_current_get;
347
- var key2 = Object.keys(r)[0];
348
- var val2 = ((_animationsState_current_get = animationsState.current.get(r[key2])) === null || _animationsState_current_get === void 0 ? void 0 : _animationsState_current_get.interpolation) || r[key2];
349
- return {
350
- [key2]: val2
351
- };
352
- })
353
- } : {};
354
- var animatedStyle = {
355
- ...Object.fromEntries(Object.entries(animateStyles.current).map(function (param2) {
356
- var [k2, v] = param2;
357
- var _animationsState_current_get;
358
- return [k2, ((_animationsState_current_get = animationsState.current.get(v)) === null || _animationsState_current_get === void 0 ? void 0 : _animationsState_current_get.interpolation) || v];
359
- })),
360
- ...animatedTransformStyle
361
- };
362
- return {
363
- runners,
364
- completions,
365
- style: [nonAnimatedStyle, animatedStyle]
366
- };
367
- function update(key2, animated, valIn) {
368
- var isColorStyleKey = colorStyleKey[key2];
369
- var [val2, type] = isColorStyleKey ? [0, void 0] : getValue(valIn);
370
- var animateToValue = val2;
371
- var value = animated || new import_react_native.Animated.Value(val2);
372
- var curInterpolation = animationsState.current.get(value);
373
- var interpolateArgs;
374
- if (type) {
375
- var _curInterpolation_current;
376
- interpolateArgs = getInterpolated((_curInterpolation_current = curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.current) !== null && _curInterpolation_current !== void 0 ? _curInterpolation_current : value["_value"], val2, type);
377
- animationsState.current.set(value, {
378
- interpolation: value.interpolate(interpolateArgs),
379
- current: val2
380
- });
381
- }
382
- if (isColorStyleKey) {
383
- animateToValue = (curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.animateToValue) ? 0 : 1;
384
- interpolateArgs = getColorInterpolated(curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.current,
385
- // valIn is the next color
386
- valIn, animateToValue);
387
- animationsState.current.set(value, {
388
- current: valIn,
389
- interpolation: value.interpolate(interpolateArgs),
390
- animateToValue: (curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.animateToValue) ? 0 : 1
391
- });
392
- }
393
- if (value) {
394
- var animationConfig = getAnimationConfig(key2, animations, props.transition, animationState);
395
- var resolve;
396
- var promise = new Promise(function (res2) {
397
- resolve = res2;
398
- });
399
- completions.push(promise);
400
- runners.push(function () {
401
- value.stopAnimation();
402
- function getAnimation() {
403
- return import_react_native.Animated[animationConfig.type || "spring"](value, {
404
- toValue: animateToValue,
405
- ...animationConfig,
406
- useNativeDriver: useNativeDriverForNode
407
- });
408
- }
409
- var animation = animationConfig.delay ? import_react_native.Animated.sequence([import_react_native.Animated.delay(animationConfig.delay), getAnimation()]) : getAnimation();
410
- animation.start(function (param2) {
411
- var {
412
- finished
413
- } = param2;
414
- if (finished || isExiting) {
415
- resolve();
416
- }
417
- });
418
- });
419
- }
420
- if (process.env.NODE_ENV === "development") {
421
- if (props["debug"] === "verbose") {
422
- console.info(" \u{1F4A0} animate", key2, `from (${value["_value"]}) to`, valIn, `(${val2})`, "type", type, "interpolate", interpolateArgs);
423
- }
424
- }
425
- return value;
426
- }
427
- }, args);
428
- import_react.default.useEffect(function () {
429
- wasExitingRef.current = isExiting;
430
- });
431
- (0, import_constants.useIsomorphicLayoutEffect)(function () {
432
- res.runners.forEach(function (r) {
433
- return r();
434
- });
435
- var cycleId = exitCycleIdRef.current;
436
- if (res.completions.length === 0) {
437
- onDidAnimate === null || onDidAnimate === void 0 ? void 0 : onDidAnimate();
438
- if (isExiting && !exitCompletedRef.current) {
439
- exitCompletedRef.current = true;
440
- sendExitComplete === null || sendExitComplete === void 0 ? void 0 : sendExitComplete();
441
- }
442
- return;
443
- }
444
- var cancel = false;
445
- Promise.all(res.completions).then(function () {
446
- if (cancel) return;
447
- if (isExiting && cycleId !== exitCycleIdRef.current) return;
448
- if (isExiting && exitCompletedRef.current) return;
449
- onDidAnimate === null || onDidAnimate === void 0 ? void 0 : onDidAnimate();
450
- if (isExiting) {
451
- exitCompletedRef.current = true;
452
- sendExitComplete === null || sendExitComplete === void 0 ? void 0 : sendExitComplete();
453
- }
454
- });
455
- return function () {
456
- cancel = true;
457
- };
458
- }, args);
459
- useStyleEmitter === null || useStyleEmitter === void 0 ? void 0 : useStyleEmitter(function (nextStyle, _effectiveTransition, pseudoActive) {
460
- pseudoActiveRef.current = pseudoActive === true;
461
- var runners = [];
462
- var seenAnimateKeys = /* @__PURE__ */new Set();
463
- var transformCount = 0;
464
- var animatedShapeChanged = false;
465
- var useNativeDriverForNode = nativeDriver && !hasAnimatedLayoutKey(nextStyle, isDark) && !Object.keys(animateStyles.current).some(function (key2) {
466
- return layoutStyleKey[key2];
467
- });
468
- for (var key in nextStyle) {
469
- var rawVal = nextStyle[key];
470
- var val = resolveDynamicValue(rawVal, isDark);
471
- if (val === void 0) continue;
472
- if (key === "transform" && Array.isArray(val)) {
473
- var _iteratorNormalCompletion = true,
474
- _didIteratorError = false,
475
- _iteratorError = void 0;
476
- try {
477
- for (var _iterator = val[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
478
- var transform = _step.value;
479
- var _animatedTranforms_current_index;
480
- if (!transform) continue;
481
- var index = transformCount++;
482
- var tkey = Object.keys(transform)[0];
483
- var currentTransform = (_animatedTranforms_current_index = animatedTranforms.current[index]) === null || _animatedTranforms_current_index === void 0 ? void 0 : _animatedTranforms_current_index[tkey];
484
- if (!currentTransform) animatedShapeChanged = true;
485
- animatedTranforms.current[index] = {
486
- [tkey]: update(tkey, currentTransform, transform[tkey])
487
- };
488
- }
489
- } catch (err) {
490
- _didIteratorError = true;
491
- _iteratorError = err;
492
- } finally {
493
- try {
494
- if (!_iteratorNormalCompletion && _iterator.return != null) {
495
- _iterator.return();
496
- }
497
- } finally {
498
- if (_didIteratorError) {
499
- throw _iteratorError;
500
- }
501
- }
502
- }
503
- } else if (animatedStyleKey[key] != null || costlyToAnimateStyleKey[key] || layoutStyleKey[key]) {
504
- if (layoutStyleKey[key] && typeof val !== "number") continue;
505
- if (colorStyleKey[key] && !isAnimatableColor(val)) continue;
506
- if (!animateStyles.current[key]) animatedShapeChanged = true;
507
- animateStyles.current[key] = update(key, animateStyles.current[key], val);
508
- seenAnimateKeys.add(key);
509
- }
510
- }
511
- for (var key1 in animateStyles.current) {
512
- if (!seenAnimateKeys.has(key1)) {
513
- delete animateStyles.current[key1];
514
- animatedShapeChanged = true;
515
- }
516
- }
517
- if (animatedTranforms.current.length > transformCount) {
518
- animatedTranforms.current = animatedTranforms.current.slice(0, transformCount);
519
- animatedShapeChanged = true;
520
- }
521
- runners.forEach(function (r) {
522
- return r();
523
- });
524
- if (animatedShapeChanged && stateRef.current.nextState) {
525
- var _stateRef_current_baseSetStateShallow, _stateRef_current;
526
- (_stateRef_current_baseSetStateShallow = (_stateRef_current = stateRef.current).baseSetStateShallow) === null || _stateRef_current_baseSetStateShallow === void 0 ? void 0 : _stateRef_current_baseSetStateShallow.call(_stateRef_current, stateRef.current.nextState);
527
- }
528
- function update(key2, animated, valIn) {
529
- var isColor = colorStyleKey[key2];
530
- var [numVal, type] = isColor ? [0, void 0] : getValue(valIn);
531
- var animateToValue = numVal;
532
- var value = animated || new import_react_native.Animated.Value(numVal);
533
- var curInterpolation = animationsState.current.get(value);
534
- if (type) {
535
- var _curInterpolation_current;
536
- animationsState.current.set(value, {
537
- interpolation: value.interpolate(getInterpolated((_curInterpolation_current = curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.current) !== null && _curInterpolation_current !== void 0 ? _curInterpolation_current : value["_value"], numVal, type)),
538
- current: numVal
539
- });
540
- }
541
- if (isColor) {
542
- animateToValue = (curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.animateToValue) ? 0 : 1;
543
- animationsState.current.set(value, {
544
- current: valIn,
545
- interpolation: value.interpolate(getColorInterpolated(curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.current, valIn, animateToValue)),
546
- animateToValue: (curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.animateToValue) ? 0 : 1
547
- });
548
- }
549
- var animationConfig = getAnimationConfig(key2, animations, props.transition, "default");
550
- runners.push(function () {
551
- value.stopAnimation();
552
- var anim = import_react_native.Animated[animationConfig.type || "spring"](value, {
553
- toValue: animateToValue,
554
- ...animationConfig,
555
- useNativeDriver: useNativeDriverForNode
556
- });
557
- (animationConfig.delay ? import_react_native.Animated.sequence([import_react_native.Animated.delay(animationConfig.delay), anim]) : anim).start();
558
- });
559
- return value;
560
- }
561
- });
562
- if (process.env.NODE_ENV === "development") {
563
- if (props["debug"] === "verbose") {
564
- console.info(`Animated`, {
565
- response: res,
566
- inputStyle: style,
567
- isExiting
568
- });
569
- }
570
- }
571
- return res;
572
- }
573
- };
219
+ var _options_useNativeDriver;
220
+ var nativeDriver = (_options_useNativeDriver = options === null || options === void 0 ? void 0 : options.useNativeDriver) !== null && _options_useNativeDriver !== void 0 ? _options_useNativeDriver : isFabric;
221
+ return {
222
+ inputStyle: "value",
223
+ outputStyle: "inline",
224
+ avoidReRenders: true,
225
+ animations,
226
+ needsCustomComponent: true,
227
+ View: AnimatedView,
228
+ Text: AnimatedText,
229
+ useAnimatedNumber,
230
+ useAnimatedNumberReaction,
231
+ useAnimatedNumberStyle,
232
+ useAnimatedNumbersStyle,
233
+ usePresence: import_use_presence.usePresence,
234
+ ResetPresence: import_use_presence.ResetPresence,
235
+ useTextMetrics: function(param) {
236
+ var { inheritedText, lineHeight } = param;
237
+ var node = (inheritedText === null || inheritedText === void 0 ? void 0 : inheritedText.driver) === "react-native" ? inheritedText.fontSize : null;
238
+ var ratio = typeof lineHeight === "number" ? lineHeight : null;
239
+ var style = import_react.default.useMemo(function() {
240
+ return node ? ratio === null ? { fontSize: node } : {
241
+ fontSize: node,
242
+ lineHeight: import_react_native.Animated.multiply(node, ratio)
243
+ } : null;
244
+ }, [node, ratio]);
245
+ var textChannel = inheritedText !== null && inheritedText !== void 0 ? inheritedText : null;
246
+ if (!style) return {
247
+ style: null,
248
+ textChannel
249
+ };
250
+ animatedTextInput || (animatedTextInput = import_react_native.Animated.createAnimatedComponent(import_react_native.TextInput));
251
+ return {
252
+ style,
253
+ textChannel,
254
+ Text: AnimatedText,
255
+ TextInput: animatedTextInput
256
+ };
257
+ },
258
+ useAnimations: function(param) {
259
+ var { props, onTransition, style, componentState, presence, stateRef, styleState, useStyleEmitter, inheritedText } = param;
260
+ var _themeState_name;
261
+ var isDisabled = import_constants.isWeb && componentState.unmounted === true;
262
+ var isExiting = (presence === null || presence === void 0 ? void 0 : presence[0]) === false;
263
+ var sendExitComplete = presence === null || presence === void 0 ? void 0 : presence[1];
264
+ var onTransitionRef = import_react.default.useRef(onTransition);
265
+ onTransitionRef.current = onTransition;
266
+ var emit = function(phase, cause, finished) {
267
+ var _onTransitionRef_current;
268
+ (_onTransitionRef_current = onTransitionRef.current) === null || _onTransitionRef_current === void 0 ? void 0 : _onTransitionRef_current.call(onTransitionRef, phase === "end" ? {
269
+ phase,
270
+ cause,
271
+ finished
272
+ } : {
273
+ phase,
274
+ cause
275
+ });
276
+ };
277
+ var _styleState_effectiveTransition;
278
+ var effectiveTransition = (_styleState_effectiveTransition = styleState === null || styleState === void 0 ? void 0 : styleState.effectiveTransition) !== null && _styleState_effectiveTransition !== void 0 ? _styleState_effectiveTransition : props.transition;
279
+ var [, themeState] = (0, import_internal_runtime.useThemeWithState)({});
280
+ var isDark = (themeState === null || themeState === void 0 ? void 0 : themeState.scheme) === "dark" || (themeState === null || themeState === void 0 ? void 0 : (_themeState_name = themeState.name) === null || _themeState_name === void 0 ? void 0 : _themeState_name.startsWith("dark"));
281
+ var animateStyles = import_react.default.useRef({});
282
+ var leadingRatioValue = import_react.default.useRef(null);
283
+ var leadingRatioRef = import_react.default.useRef(void 0);
284
+ var paintsDerivedLeading = import_react.default.useRef(false);
285
+ var textChannelRef = import_react.default.useRef(null);
286
+ leadingRatioRef.current = getLeadingRatio(styleState === null || styleState === void 0 ? void 0 : styleState.nativeTextMetrics);
287
+ var paintedTextRef = import_react.default.useRef({});
288
+ var movesTextValue = function(key, target) {
289
+ if (typeof target !== "number") return false;
290
+ var node = animateStyles.current[key];
291
+ var last = node ? node["_value"] : paintedTextRef.current[key];
292
+ return last !== void 0 && last !== target;
293
+ };
294
+ var movesLeadingRatio = function(ratio) {
295
+ if (ratio === void 0) return false;
296
+ var node = leadingRatioValue.current;
297
+ var last = node ? node["_value"] : paintedTextRef.current.ratio;
298
+ return last !== void 0 && last !== ratio;
299
+ };
300
+ var fontSizeNode = import_react.default.useRef(null);
301
+ var animatedValueFor = function(key) {
302
+ var painted = animateStyles.current[key];
303
+ if (painted) return painted;
304
+ if (key === "fontSize" && fontSizeNode.current) return fontSizeNode.current;
305
+ if (textMetricStyleKey[key]) return new import_react_native.Animated.Value(paintedTextRef.current[key]);
306
+ return void 0;
307
+ };
308
+ var leadingRatioValueFrom = function() {
309
+ var _leadingRatioValue_current;
310
+ return (_leadingRatioValue_current = leadingRatioValue.current) !== null && _leadingRatioValue_current !== void 0 ? _leadingRatioValue_current : new import_react_native.Animated.Value(paintedTextRef.current.ratio);
311
+ };
312
+ var animatedTranforms = import_react.default.useRef([]);
313
+ var animationsState = import_react.default.useRef(/* @__PURE__ */ new WeakMap());
314
+ var pseudoActiveRef = import_react.default.useRef(false);
315
+ var exitCycleIdRef = import_react.default.useRef(0);
316
+ var exitCompletedRef = import_react.default.useRef(false);
317
+ var wasExitingRef = import_react.default.useRef(false);
318
+ var enterStartedRef = import_react.default.useRef(false);
319
+ var exitStartedRef = import_react.default.useRef(false);
320
+ var updateInFlightRef = import_react.default.useRef(false);
321
+ var updateCycleIdRef = import_react.default.useRef(0);
322
+ var prevStyleSigRef = import_react.default.useRef(null);
323
+ var justStartedExiting = isExiting && !wasExitingRef.current;
324
+ var justStoppedExiting = !isExiting && wasExitingRef.current;
325
+ if (justStartedExiting) {
326
+ exitCycleIdRef.current++;
327
+ exitCompletedRef.current = false;
328
+ }
329
+ if (justStoppedExiting) {
330
+ exitCycleIdRef.current++;
331
+ }
332
+ var isEntering = !!componentState.unmounted;
333
+ var wasEnteringRef = import_react.default.useRef(isEntering);
334
+ var justFinishedEntering = wasEnteringRef.current && !isEntering;
335
+ import_react.default.useEffect(function() {
336
+ wasEnteringRef.current = isEntering;
337
+ });
338
+ var args = [
339
+ JSON.stringify(style),
340
+ JSON.stringify(effectiveTransition),
341
+ componentState,
342
+ isExiting,
343
+ !!onTransition,
344
+ isDark,
345
+ justFinishedEntering,
346
+ leadingRatioRef.current,
347
+ inheritedText
348
+ ];
349
+ var res = import_react.default.useMemo(function() {
350
+ var _textChannelRef_current;
351
+ var runners = [];
352
+ var completions = [];
353
+ var animationState = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "default";
354
+ var resolved = (0, import_animation_helpers.forAnimationState)((0, import_animation_helpers.resolveTransition)(effectiveTransition, { animations }), animationState);
355
+ var nonAnimatedStyle = {};
356
+ var paintedRatio = leadingRatioRef.current;
357
+ var paintsProduct = paintsLeadingProduct(style, paintedRatio);
358
+ var movesFontSize = movesTextValue("fontSize", style.fontSize);
359
+ var movesLeading = paintsProduct ? movesLeadingRatio(paintedRatio) : movesTextValue("lineHeight", style.lineHeight);
360
+ if (!isExiting && !isDisabled && !pseudoActiveRef.current) {
361
+ if (!movesFontSize) delete animateStyles.current.fontSize;
362
+ if (!movesLeading) delete animateStyles.current.lineHeight;
363
+ }
364
+ if (isDisabled || typeof style.fontSize !== "number" || !(0, import_animation_helpers.getTransitionForKey)(resolved, "fontSize")) {
365
+ fontSizeNode.current = null;
366
+ } else if (!fontSizeNode.current) {
367
+ fontSizeNode.current = new import_react_native.Animated.Value(style.fontSize);
368
+ }
369
+ var seenAnimateKeys = /* @__PURE__ */ new Set();
370
+ var sawTransform = false;
371
+ var transformCount = 0;
372
+ var derivesLeading = !isDisabled && paintsProduct && (movesFontSize || movesLeading) && (!!(0, import_animation_helpers.getTransitionForKey)(resolved, "fontSize") || !!(0, import_animation_helpers.getTransitionForKey)(resolved, "lineHeight"));
373
+ var inheritedFontSize = isDisabled ? void 0 : inheritedFontSizeNode(style, paintedRatio, inheritedText);
374
+ var useNativeDriverForNode = nativeDriver && !hasAnimatedLayoutKey(style, isDark, resolved) && !movesFontSize && !movesLeading && !inheritedFontSize && !Object.keys(animateStyles.current).some(function(key2) {
375
+ return jsDriverStyleKey[key2];
376
+ });
377
+ for (var key in style) {
378
+ var rawVal = style[key];
379
+ var val = resolveDynamicValue(rawVal, isDark);
380
+ if (val === void 0) continue;
381
+ if (isDisabled) {
382
+ continue;
383
+ }
384
+ if ((derivesLeading || inheritedFontSize) && (key === "fontSize" || key === "lineHeight")) {
385
+ if (key === "fontSize" && derivesLeading && !movesFontSize) {
386
+ nonAnimatedStyle[key] = val;
387
+ }
388
+ continue;
389
+ }
390
+ if (textMetricStyleKey[key] && !(key === "fontSize" ? movesFontSize : movesLeading)) {
391
+ nonAnimatedStyle[key] = val;
392
+ continue;
393
+ }
394
+ if (animatedStyleKey[key] == null && !costlyToAnimateStyleKey[key] && !jsDriverStyleKey[key]) {
395
+ nonAnimatedStyle[key] = val;
396
+ continue;
397
+ }
398
+ if (key !== "transform" && !(0, import_animation_helpers.getTransitionForKey)(resolved, key)) {
399
+ nonAnimatedStyle[key] = val;
400
+ continue;
401
+ }
402
+ if (jsDriverStyleKey[key] && typeof val !== "number") {
403
+ nonAnimatedStyle[key] = val;
404
+ continue;
405
+ }
406
+ if (colorStyleKey[key] && !isAnimatableColor(val)) {
407
+ nonAnimatedStyle[key] = val;
408
+ continue;
409
+ }
410
+ if (key !== "transform") {
411
+ animateStyles.current[key] = update(key, animatedValueFor(key), val);
412
+ seenAnimateKeys.add(key);
413
+ continue;
414
+ }
415
+ if (!val) continue;
416
+ if (typeof val === "string") {
417
+ console.warn(`Warning: Tamagui can't animate string transforms yet!`);
418
+ continue;
419
+ }
420
+ sawTransform = true;
421
+ var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
422
+ try {
423
+ for (var _iterator = val[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
424
+ var transform = _step.value;
425
+ var _animatedTranforms_current_index;
426
+ if (!transform) continue;
427
+ var index = transformCount++;
428
+ var tkey = Object.keys(transform)[0];
429
+ var currentTransform = (_animatedTranforms_current_index = animatedTranforms.current[index]) === null || _animatedTranforms_current_index === void 0 ? void 0 : _animatedTranforms_current_index[tkey];
430
+ animatedTranforms.current[index] = { [tkey]: update(tkey, currentTransform, transform[tkey]) };
431
+ animatedTranforms.current = [...animatedTranforms.current];
432
+ }
433
+ } catch (err) {
434
+ _didIteratorError = true;
435
+ _iteratorError = err;
436
+ } finally {
437
+ try {
438
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
439
+ _iterator.return();
440
+ }
441
+ } finally {
442
+ if (_didIteratorError) {
443
+ throw _iteratorError;
444
+ }
445
+ }
446
+ }
447
+ }
448
+ var ratioFactor = function() {
449
+ if (!movesLeading) {
450
+ leadingRatioValue.current = null;
451
+ return paintedRatio;
452
+ }
453
+ leadingRatioValue.current = update("lineHeight", leadingRatioValueFrom(), paintedRatio);
454
+ return leadingRatioValue.current;
455
+ };
456
+ var derivedLeading;
457
+ if (derivesLeading) {
458
+ var fontSizeFactor = style.fontSize;
459
+ if (movesFontSize) {
460
+ fontSizeFactor = update("fontSize", animatedValueFor("fontSize"), style.fontSize);
461
+ animateStyles.current.fontSize = fontSizeFactor;
462
+ seenAnimateKeys.add("fontSize");
463
+ }
464
+ derivedLeading = import_react_native.Animated.multiply(fontSizeFactor, ratioFactor());
465
+ } else if (inheritedFontSize) {
466
+ derivedLeading = import_react_native.Animated.multiply(inheritedFontSize, ratioFactor());
467
+ } else if (!isDisabled) {
468
+ leadingRatioValue.current = null;
469
+ }
470
+ paintsDerivedLeading.current = !!derivedLeading;
471
+ var ownFontSizeNode = fontSizeNode.current;
472
+ var textChannel = ownFontSizeNode ? ((_textChannelRef_current = textChannelRef.current) === null || _textChannelRef_current === void 0 ? void 0 : _textChannelRef_current.fontSize) === ownFontSizeNode ? textChannelRef.current : {
473
+ fontSize: ownFontSizeNode,
474
+ driver: "react-native"
475
+ } : typeof style.fontSize === "number" ? null : inheritedText !== null && inheritedText !== void 0 ? inheritedText : null;
476
+ textChannelRef.current = textChannel;
477
+ if (!isExiting && !isDisabled && !pseudoActiveRef.current) {
478
+ for (var k in animateStyles.current) {
479
+ if (!seenAnimateKeys.has(k)) delete animateStyles.current[k];
480
+ }
481
+ if (!sawTransform) {
482
+ if (animatedTranforms.current.length) animatedTranforms.current = [];
483
+ } else if (animatedTranforms.current.length > transformCount) {
484
+ animatedTranforms.current = animatedTranforms.current.slice(0, transformCount);
485
+ }
486
+ }
487
+ var animatedTransformStyle = animatedTranforms.current.length > 0 ? { transform: animatedTranforms.current.map(function(r) {
488
+ var _animationsState_current_get;
489
+ var key2 = Object.keys(r)[0];
490
+ var val2 = ((_animationsState_current_get = animationsState.current.get(r[key2])) === null || _animationsState_current_get === void 0 ? void 0 : _animationsState_current_get.interpolation) || r[key2];
491
+ return { [key2]: val2 };
492
+ }) } : {};
493
+ var animatedStyle = {
494
+ ...Object.fromEntries(Object.entries(animateStyles.current).map(function(param2) {
495
+ var [k2, v] = param2;
496
+ var _animationsState_current_get;
497
+ return [k2, ((_animationsState_current_get = animationsState.current.get(v)) === null || _animationsState_current_get === void 0 ? void 0 : _animationsState_current_get.interpolation) || v];
498
+ })),
499
+ ...derivedLeading ? { lineHeight: derivedLeading } : null,
500
+ ...animatedTransformStyle
501
+ };
502
+ if (!isDisabled) {
503
+ paintedTextRef.current = {
504
+ fontSize: style.fontSize,
505
+ lineHeight: style.lineHeight,
506
+ ratio: paintedRatio
507
+ };
508
+ }
509
+ return {
510
+ runners,
511
+ completions,
512
+ textChannel,
513
+ style: [nonAnimatedStyle, animatedStyle]
514
+ };
515
+ function update(key2, animated, valIn) {
516
+ var isColorStyleKey = colorStyleKey[key2];
517
+ var [val2, type] = isColorStyleKey ? [0, void 0] : getValue(valIn);
518
+ var animateToValue = val2;
519
+ var value = animated || new import_react_native.Animated.Value(val2);
520
+ var curInterpolation = animationsState.current.get(value);
521
+ var interpolateArgs;
522
+ if (type) {
523
+ var _curInterpolation_current;
524
+ interpolateArgs = getInterpolated((_curInterpolation_current = curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.current) !== null && _curInterpolation_current !== void 0 ? _curInterpolation_current : value["_value"], val2, type);
525
+ animationsState.current.set(value, {
526
+ interpolation: value.interpolate(interpolateArgs),
527
+ current: val2
528
+ });
529
+ }
530
+ if (isColorStyleKey) {
531
+ animateToValue = (curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.animateToValue) ? 0 : 1;
532
+ interpolateArgs = getColorInterpolated(curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.current, valIn, animateToValue);
533
+ animationsState.current.set(value, {
534
+ current: valIn,
535
+ interpolation: value.interpolate(interpolateArgs),
536
+ animateToValue: (curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.animateToValue) ? 0 : 1
537
+ });
538
+ }
539
+ if (value) {
540
+ var animationConfig = getAnimationConfig(key2, animations, effectiveTransition, animationState);
541
+ var resolve;
542
+ var promise = new Promise(function(res2) {
543
+ resolve = res2;
544
+ });
545
+ completions.push(promise);
546
+ runners.push(function() {
547
+ value.stopAnimation();
548
+ var { type: type2, delay, ...config } = animationConfig;
549
+ var animation = import_react_native.Animated[type2 || "spring"](value, {
550
+ toValue: animateToValue,
551
+ ...config,
552
+ useNativeDriver: useNativeDriverForNode
553
+ });
554
+ var animation2 = delay ? import_react_native.Animated.sequence([import_react_native.Animated.delay(delay), animation]) : animation;
555
+ animation2.start(function(param2) {
556
+ var { finished } = param2;
557
+ if (finished || isExiting) {
558
+ resolve();
559
+ }
560
+ });
561
+ });
562
+ }
563
+ if (process.env.NODE_ENV === "development") {
564
+ if (props["debug"] === "verbose") {
565
+ console.info(" 💠 animate", key2, `from (${value["_value"]}) to`, valIn, `(${val2})`, "type", type, "interpolate", interpolateArgs);
566
+ }
567
+ }
568
+ return value;
569
+ }
570
+ }, args);
571
+ import_react.default.useEffect(function() {
572
+ wasExitingRef.current = isExiting;
573
+ });
574
+ (0, import_constants.useIsomorphicLayoutEffect)(function() {
575
+ if (justStoppedExiting && exitStartedRef.current && !exitCompletedRef.current) {
576
+ exitStartedRef.current = false;
577
+ emit("end", "exit", false);
578
+ }
579
+ }, [justStoppedExiting]);
580
+ (0, import_constants.useIsomorphicLayoutEffect)(function() {
581
+ res.runners.forEach(function(r) {
582
+ return r();
583
+ });
584
+ var cycleId = exitCycleIdRef.current;
585
+ var cause = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "update";
586
+ if (cause === "exit") {
587
+ if (enterStartedRef.current) {
588
+ enterStartedRef.current = false;
589
+ emit("end", "enter", false);
590
+ }
591
+ if (updateInFlightRef.current) {
592
+ updateInFlightRef.current = false;
593
+ updateCycleIdRef.current++;
594
+ emit("end", "update", false);
595
+ }
596
+ }
597
+ if (cause === "update") {
598
+ var sig = args[0];
599
+ if (prevStyleSigRef.current === null || prevStyleSigRef.current === sig) {
600
+ prevStyleSigRef.current = sig;
601
+ return;
602
+ }
603
+ prevStyleSigRef.current = sig;
604
+ if (res.completions.length === 0) return;
605
+ if (updateInFlightRef.current) {
606
+ emit("end", "update", false);
607
+ }
608
+ updateInFlightRef.current = true;
609
+ var uid = ++updateCycleIdRef.current;
610
+ emit("start", "update");
611
+ Promise.all(res.completions).then(function() {
612
+ if (uid !== updateCycleIdRef.current) return;
613
+ updateInFlightRef.current = false;
614
+ emit("end", "update", true);
615
+ });
616
+ return;
617
+ }
618
+ prevStyleSigRef.current = args[0];
619
+ if (res.completions.length === 0) {
620
+ emit("start", cause);
621
+ emit("end", cause, true);
622
+ if (isExiting && !exitCompletedRef.current) {
623
+ exitCompletedRef.current = true;
624
+ sendExitComplete === null || sendExitComplete === void 0 ? void 0 : sendExitComplete();
625
+ }
626
+ return;
627
+ }
628
+ if (cause === "enter" && !enterStartedRef.current) {
629
+ enterStartedRef.current = true;
630
+ emit("start", "enter");
631
+ }
632
+ if (cause === "exit" && !exitStartedRef.current) {
633
+ exitStartedRef.current = true;
634
+ emit("start", "exit");
635
+ }
636
+ Promise.all(res.completions).then(function() {
637
+ if (isExiting && cycleId !== exitCycleIdRef.current) return;
638
+ if (isExiting && exitCompletedRef.current) return;
639
+ if (isExiting) {
640
+ if (exitStartedRef.current) {
641
+ exitStartedRef.current = false;
642
+ emit("end", "exit", true);
643
+ }
644
+ exitCompletedRef.current = true;
645
+ sendExitComplete === null || sendExitComplete === void 0 ? void 0 : sendExitComplete();
646
+ } else if (enterStartedRef.current) {
647
+ enterStartedRef.current = false;
648
+ emit("end", "enter", true);
649
+ }
650
+ });
651
+ }, args);
652
+ var onEmittedStyle = function(nextStyle, emittedTransition, pseudoActive, nextMetrics) {
653
+ pseudoActiveRef.current = pseudoActive === true;
654
+ var runners = [];
655
+ var seenAnimateKeys = /* @__PURE__ */ new Set();
656
+ var transformCount = 0;
657
+ var animatedShapeChanged = false;
658
+ var emittedResolved = (0, import_animation_helpers.forAnimationState)((0, import_animation_helpers.resolveTransition)(emittedTransition !== null && emittedTransition !== void 0 ? emittedTransition : effectiveTransition, { animations }), "default");
659
+ var emittedRatio = getLeadingRatio(nextMetrics);
660
+ var emitterPaintsProduct = paintsLeadingProduct(nextStyle, emittedRatio);
661
+ var emitterMovesFontSize = movesTextValue("fontSize", nextStyle.fontSize);
662
+ var emitterMovesLeading = emitterPaintsProduct ? movesLeadingRatio(emittedRatio) : movesTextValue("lineHeight", nextStyle.lineHeight);
663
+ var useNativeDriverForNode = nativeDriver && !hasAnimatedLayoutKey(nextStyle, isDark, emittedResolved) && !emitterMovesFontSize && !emitterMovesLeading && !inheritedFontSizeNode(nextStyle, emittedRatio, inheritedText) && !Object.keys(animateStyles.current).some(function(key2) {
664
+ return jsDriverStyleKey[key2];
665
+ });
666
+ var emitterDerivesLeading = emitterPaintsProduct && (emitterMovesFontSize || emitterMovesLeading) && (!!(0, import_animation_helpers.getTransitionForKey)(emittedResolved, "fontSize") || !!(0, import_animation_helpers.getTransitionForKey)(emittedResolved, "lineHeight"));
667
+ for (var key in nextStyle) {
668
+ var rawVal = nextStyle[key];
669
+ var val = resolveDynamicValue(rawVal, isDark);
670
+ if (val === void 0) continue;
671
+ if (emitterDerivesLeading && (key === "fontSize" || key === "lineHeight")) {
672
+ continue;
673
+ }
674
+ if (textMetricStyleKey[key] && !(key === "fontSize" ? emitterMovesFontSize : emitterMovesLeading)) {
675
+ continue;
676
+ }
677
+ if (key === "transform" && Array.isArray(val)) {
678
+ var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
679
+ try {
680
+ for (var _iterator = val[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
681
+ var transform = _step.value;
682
+ var _animatedTranforms_current_index;
683
+ if (!transform) continue;
684
+ var index = transformCount++;
685
+ var tkey = Object.keys(transform)[0];
686
+ var currentTransform = (_animatedTranforms_current_index = animatedTranforms.current[index]) === null || _animatedTranforms_current_index === void 0 ? void 0 : _animatedTranforms_current_index[tkey];
687
+ if (!currentTransform) animatedShapeChanged = true;
688
+ animatedTranforms.current[index] = { [tkey]: update(tkey, currentTransform, transform[tkey]) };
689
+ }
690
+ } catch (err) {
691
+ _didIteratorError = true;
692
+ _iteratorError = err;
693
+ } finally {
694
+ try {
695
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
696
+ _iterator.return();
697
+ }
698
+ } finally {
699
+ if (_didIteratorError) {
700
+ throw _iteratorError;
701
+ }
702
+ }
703
+ }
704
+ } else if (animatedStyleKey[key] != null || costlyToAnimateStyleKey[key] || jsDriverStyleKey[key]) {
705
+ if (jsDriverStyleKey[key] && typeof val !== "number") continue;
706
+ if (colorStyleKey[key] && !isAnimatableColor(val)) continue;
707
+ if (!animateStyles.current[key]) animatedShapeChanged = true;
708
+ animateStyles.current[key] = update(key, animatedValueFor(key), val);
709
+ seenAnimateKeys.add(key);
710
+ }
711
+ }
712
+ if (emitterDerivesLeading) {
713
+ if (emitterMovesFontSize) {
714
+ if (!animateStyles.current.fontSize) animatedShapeChanged = true;
715
+ animateStyles.current.fontSize = update("fontSize", animatedValueFor("fontSize"), nextStyle.fontSize);
716
+ seenAnimateKeys.add("fontSize");
717
+ }
718
+ if (emitterMovesLeading) {
719
+ if (!leadingRatioValue.current) animatedShapeChanged = true;
720
+ leadingRatioValue.current = update("lineHeight", leadingRatioValueFrom(), emittedRatio);
721
+ }
722
+ }
723
+ if (emitterDerivesLeading !== paintsDerivedLeading.current) {
724
+ animatedShapeChanged = true;
725
+ }
726
+ for (var key1 in animateStyles.current) {
727
+ if (!seenAnimateKeys.has(key1)) {
728
+ delete animateStyles.current[key1];
729
+ animatedShapeChanged = true;
730
+ }
731
+ }
732
+ if (animatedTranforms.current.length > transformCount) {
733
+ animatedTranforms.current = animatedTranforms.current.slice(0, transformCount);
734
+ animatedShapeChanged = true;
735
+ }
736
+ paintedTextRef.current = {
737
+ fontSize: nextStyle.fontSize,
738
+ lineHeight: nextStyle.lineHeight,
739
+ ratio: emittedRatio
740
+ };
741
+ runners.forEach(function(r) {
742
+ return r();
743
+ });
744
+ if (animatedShapeChanged && stateRef.current.nextState) {
745
+ var _stateRef_current_baseSetStateShallow, _stateRef_current;
746
+ (_stateRef_current_baseSetStateShallow = (_stateRef_current = stateRef.current).baseSetStateShallow) === null || _stateRef_current_baseSetStateShallow === void 0 ? void 0 : _stateRef_current_baseSetStateShallow.call(_stateRef_current, stateRef.current.nextState);
747
+ }
748
+ function update(key2, animated, valIn) {
749
+ var isColor = colorStyleKey[key2];
750
+ var [numVal, type] = isColor ? [0, void 0] : getValue(valIn);
751
+ var animateToValue = numVal;
752
+ var value = animated || new import_react_native.Animated.Value(numVal);
753
+ var curInterpolation = animationsState.current.get(value);
754
+ if (type) {
755
+ var _curInterpolation_current;
756
+ animationsState.current.set(value, {
757
+ interpolation: value.interpolate(getInterpolated((_curInterpolation_current = curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.current) !== null && _curInterpolation_current !== void 0 ? _curInterpolation_current : value["_value"], numVal, type)),
758
+ current: numVal
759
+ });
760
+ }
761
+ if (isColor) {
762
+ animateToValue = (curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.animateToValue) ? 0 : 1;
763
+ animationsState.current.set(value, {
764
+ current: valIn,
765
+ interpolation: value.interpolate(getColorInterpolated(curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.current, valIn, animateToValue)),
766
+ animateToValue: (curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.animateToValue) ? 0 : 1
767
+ });
768
+ }
769
+ var animationConfig = getAnimationConfig(key2, animations, emittedTransition !== null && emittedTransition !== void 0 ? emittedTransition : effectiveTransition, "default");
770
+ runners.push(function() {
771
+ value.stopAnimation();
772
+ var { type: type2, delay, ...config } = animationConfig;
773
+ var anim = import_react_native.Animated[type2 || "spring"](value, {
774
+ toValue: animateToValue,
775
+ ...config,
776
+ useNativeDriver: useNativeDriverForNode
777
+ });
778
+ (delay ? import_react_native.Animated.sequence([import_react_native.Animated.delay(delay), anim]) : anim).start();
779
+ });
780
+ return value;
781
+ }
782
+ };
783
+ useStyleEmitter === null || useStyleEmitter === void 0 ? void 0 : useStyleEmitter(onEmittedStyle);
784
+ if (process.env.NODE_ENV === "development") {
785
+ if (props["debug"] === "verbose") {
786
+ console.info(`Animated`, {
787
+ response: res,
788
+ inputStyle: style,
789
+ isExiting
790
+ });
791
+ }
792
+ }
793
+ return res;
794
+ }
795
+ };
574
796
  }
575
797
  function getColorInterpolated(currentColor, nextColor, animateToValue) {
576
- var inputRange = [0, 1];
577
- var outputRange = [currentColor ? currentColor : nextColor, nextColor];
578
- if (animateToValue === 0) {
579
- outputRange.reverse();
580
- }
581
- return {
582
- inputRange,
583
- outputRange
584
- };
798
+ var inputRange = [0, 1];
799
+ var outputRange = [currentColor ? currentColor : nextColor, nextColor];
800
+ if (animateToValue === 0) {
801
+ outputRange.reverse();
802
+ }
803
+ return {
804
+ inputRange,
805
+ outputRange
806
+ };
585
807
  }
586
808
  function getInterpolated(current, next) {
587
- var postfix = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "deg";
588
- if (next === current) {
589
- current = next - 1e-9;
590
- }
591
- var inputRange = [current, next];
592
- var outputRange = [`${current}${postfix}`, `${next}${postfix}`];
593
- if (next < current) {
594
- inputRange.reverse();
595
- outputRange.reverse();
596
- }
597
- return {
598
- inputRange,
599
- outputRange
600
- };
809
+ var postfix = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "deg";
810
+ if (next === current) {
811
+ current = next - 1e-9;
812
+ }
813
+ var inputRange = [current, next];
814
+ var outputRange = [`${current}${postfix}`, `${next}${postfix}`];
815
+ if (next < current) {
816
+ inputRange.reverse();
817
+ outputRange.reverse();
818
+ }
819
+ return {
820
+ inputRange,
821
+ outputRange
822
+ };
601
823
  }
602
- function getAnimationConfig(key, animations, transition) {
603
- var animationState = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "default";
604
- var normalized = (0, import_animation_helpers.normalizeTransition)(transition);
605
- var shortKey = transformShorthands[key];
606
- var _normalized_properties_key;
607
- var propAnimation = (_normalized_properties_key = normalized.properties[key]) !== null && _normalized_properties_key !== void 0 ? _normalized_properties_key : normalized.properties[shortKey];
608
- var animationType = null;
609
- var extraConf = {};
610
- if (typeof propAnimation === "string") {
611
- animationType = propAnimation;
612
- } else if (propAnimation && (typeof propAnimation === "undefined" ? "undefined" : _type_of(propAnimation)) === "object") {
613
- animationType = propAnimation.type || (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
614
- extraConf = propAnimation;
615
- } else {
616
- animationType = (0, import_animation_helpers.getEffectiveAnimation)(normalized, animationState);
617
- }
618
- if (normalized.delay && !extraConf.delay) {
619
- extraConf = {
620
- ...extraConf,
621
- delay: normalized.delay
622
- };
623
- }
624
- var found = animationType ? animations[animationType] : {};
625
- return {
626
- ...found,
627
- // Apply global spring config overrides (from transition={['bouncy', { stiffness: 1000 }]})
628
- ...normalized.config,
629
- // Property-specific config takes highest precedence
630
- ...extraConf
631
- };
824
+ function entryToRN(entry) {
825
+ var extra = entry.timing.kind === "spring" ? entry.timing.extra : void 0;
826
+ if (entry.timing.kind === "spring") {
827
+ return {
828
+ type: "spring",
829
+ stiffness: entry.timing.stiffness,
830
+ damping: entry.timing.damping,
831
+ mass: entry.timing.mass,
832
+ ...typeof (extra === null || extra === void 0 ? void 0 : extra.velocity) === "number" ? { velocity: extra.velocity } : null,
833
+ ...typeof (extra === null || extra === void 0 ? void 0 : extra.overshootClamping) === "boolean" ? { overshootClamping: extra.overshootClamping } : null,
834
+ ...entry.delayMs ? { delay: entry.delayMs } : null
835
+ };
836
+ }
837
+ var bezier = (0, import_animation_helpers.easingToBezier)(entry.timing.easing);
838
+ return {
839
+ type: "timing",
840
+ duration: entry.timing.durationMs,
841
+ ...bezier ? { easing: import_react_native.Easing.bezier(bezier[0], bezier[1], bezier[2], bezier[3]) } : null,
842
+ ...entry.delayMs ? { delay: entry.delayMs } : null
843
+ };
632
844
  }
633
- var transformShorthands = {
634
- x: "translateX",
635
- y: "translateY",
636
- translateX: "x",
637
- translateY: "y"
845
+ var snapConfig = {
846
+ type: "timing",
847
+ duration: 0
638
848
  };
849
+ function getAnimationConfig(key, animations, transition) {
850
+ var animationState = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "default";
851
+ var resolved = (0, import_animation_helpers.forAnimationState)((0, import_animation_helpers.resolveTransition)(transition, { animations }), animationState);
852
+ var entry = (0, import_animation_helpers.getTransitionForKey)(resolved, key);
853
+ return entry ? entryToRN(entry) : snapConfig;
854
+ }
639
855
  function getValue(input) {
640
- var isColor = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
641
- if (typeof input !== "string") {
642
- return [input];
643
- }
644
- var _input_match;
645
- var [_, number, after] = (_input_match = input.match(/([-0-9]+)(deg|%|px)/)) !== null && _input_match !== void 0 ? _input_match : [];
646
- return [+number, after];
856
+ var isColor = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
857
+ if (typeof input !== "string") {
858
+ return [input];
859
+ }
860
+ var _input_match;
861
+ var [_, number, after] = (_input_match = input.match(/(-?(?:\d+\.?\d*|\.\d+))(deg|%|px)?/)) !== null && _input_match !== void 0 ? _input_match : [];
862
+ return [+number, after];
647
863
  }
864
+
648
865
  //# sourceMappingURL=createAnimations.native.js.map