@tamagui/animations-react-native 3.0.0-beta.922.1 → 3.0.0

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.
@@ -1,18 +1,14 @@
1
- import { getEffectiveAnimation, normalizeTransition } from "@tamagui/animation-helpers";
1
+ import { easingToBezier, forAnimationState, getTransitionForKey, resolveTransition } from "@tamagui/animation-helpers";
2
2
  import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
3
3
  import { ResetPresence, usePresence } from "@tamagui/use-presence";
4
4
  import { useEvent } from "@tamagui/web";
5
5
  import { useThemeWithState } from "@tamagui/web/internal-runtime";
6
6
  import React from "react";
7
- import { Animated, processColor } from "react-native";
7
+ import { Animated, Easing, TextInput, processColor } from "react-native";
8
8
 
9
- function _type_of(obj) {
10
- "@swc/helpers - typeof";
11
- return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
12
- }
13
9
  var isFabric = !isWeb && typeof global !== "undefined" && !!global.__nativeFabricUIManager;
14
10
  var resolveDynamicValue = function(value, isDark) {
15
- if (value && (typeof value === "undefined" ? "undefined" : _type_of(value)) === "object" && "dynamic" in value) {
11
+ if (value && typeof value === "object" && "dynamic" in value) {
16
12
  var dynamicValue = isDark ? value.dynamic.dark : value.dynamic.light;
17
13
  return dynamicValue;
18
14
  }
@@ -39,13 +35,31 @@ var layoutStyleKey = {
39
35
  minWidth: true,
40
36
  maxWidth: true
41
37
  };
42
- function hasAnimatedLayoutKey(style, isDark, animateOnly) {
38
+ var textMetricStyleKey = {
39
+ fontSize: true,
40
+ lineHeight: true
41
+ };
42
+ var jsDriverStyleKey = {
43
+ ...layoutStyleKey,
44
+ ...textMetricStyleKey
45
+ };
46
+ function hasAnimatedLayoutKey(style, isDark, resolved) {
43
47
  for (var key in layoutStyleKey) {
44
- if (animateOnly && !animateOnly.includes(key)) continue;
48
+ if (!getTransitionForKey(resolved, key)) continue;
45
49
  if (typeof resolveDynamicValue(style[key], isDark) === "number") return true;
46
50
  }
47
51
  return false;
48
52
  }
53
+ var getLeadingRatio = function(metrics) {
54
+ var ratio = metrics === null || metrics === void 0 ? void 0 : metrics.lineHeight;
55
+ return typeof ratio === "number" && Number.isFinite(ratio) && ratio >= 0 ? ratio : void 0;
56
+ };
57
+ var paintsLeadingProduct = function(style, ratio) {
58
+ return ratio !== void 0 && typeof style.fontSize === "number" && typeof style.lineHeight === "number";
59
+ };
60
+ var inheritedFontSizeNode = function(style, ratio, inheritedText) {
61
+ return ratio !== void 0 && typeof style.fontSize !== "number" && (inheritedText === null || inheritedText === void 0 ? void 0 : inheritedText.driver) === "react-native" ? inheritedText.fontSize : void 0;
62
+ };
49
63
  function isAnimatableColor(value) {
50
64
  return typeof value === "string" && processColor(value) != null;
51
65
  }
@@ -64,6 +78,7 @@ var costlyToAnimateStyleKey = {
64
78
  };
65
79
  var AnimatedView = Animated.View;
66
80
  var AnimatedText = Animated.Text;
81
+ var animatedTextInput;
67
82
  function useAnimatedNumber(initial) {
68
83
  var state = React.useRef(null);
69
84
  if (!state.current) {
@@ -93,10 +108,14 @@ function useAnimatedNumber(initial) {
93
108
  return finished ? onFinish() : null;
94
109
  } : void 0;
95
110
  if (type === "direct") {
96
- val.setValue(next);
97
- } else if (type === "spring") {
98
111
  var _state_current_composite;
99
112
  (_state_current_composite = state.current.composite) === null || _state_current_composite === void 0 ? void 0 : _state_current_composite.stop();
113
+ state.current.composite = null;
114
+ val.setValue(next);
115
+ onFinish === null || onFinish === void 0 ? void 0 : onFinish();
116
+ } else if (type === "spring") {
117
+ var _state_current_composite1;
118
+ (_state_current_composite1 = state.current.composite) === null || _state_current_composite1 === void 0 ? void 0 : _state_current_composite1.stop();
100
119
  var composite = Animated.spring(val, {
101
120
  ...config,
102
121
  toValue: next,
@@ -105,8 +124,8 @@ function useAnimatedNumber(initial) {
105
124
  composite.start(handleFinish);
106
125
  state.current.composite = composite;
107
126
  } else {
108
- var _state_current_composite1;
109
- (_state_current_composite1 = state.current.composite) === null || _state_current_composite1 === void 0 ? void 0 : _state_current_composite1.stop();
127
+ var _state_current_composite2;
128
+ (_state_current_composite2 = state.current.composite) === null || _state_current_composite2 === void 0 ? void 0 : _state_current_composite2.stop();
110
129
  var composite1 = Animated.timing(val, {
111
130
  ...config,
112
131
  toValue: next,
@@ -148,7 +167,7 @@ var useAnimatedNumberStyle = function(value, getStyle) {
148
167
  return usesAnimatedNode ? animatedStyle : getStyle(current);
149
168
  };
150
169
  function hasAnimatedNode(value) {
151
- if (!value || (typeof value === "undefined" ? "undefined" : _type_of(value)) !== "object") return false;
170
+ if (!value || typeof value !== "object") return false;
152
171
  if (typeof value.__getValue === "function") return true;
153
172
  if (Array.isArray(value)) return value.some(hasAnimatedNode);
154
173
  return Object.values(value).some(hasAnimatedNode);
@@ -175,8 +194,31 @@ function createAnimations(animations, options) {
175
194
  useAnimatedNumbersStyle,
176
195
  usePresence,
177
196
  ResetPresence,
197
+ useTextMetrics: function(param) {
198
+ var { inheritedText, lineHeight } = param;
199
+ var node = (inheritedText === null || inheritedText === void 0 ? void 0 : inheritedText.driver) === "react-native" ? inheritedText.fontSize : null;
200
+ var ratio = typeof lineHeight === "number" ? lineHeight : null;
201
+ var style = React.useMemo(function() {
202
+ return node ? ratio === null ? { fontSize: node } : {
203
+ fontSize: node,
204
+ lineHeight: Animated.multiply(node, ratio)
205
+ } : null;
206
+ }, [node, ratio]);
207
+ var textChannel = inheritedText !== null && inheritedText !== void 0 ? inheritedText : null;
208
+ if (!style) return {
209
+ style: null,
210
+ textChannel
211
+ };
212
+ animatedTextInput || (animatedTextInput = Animated.createAnimatedComponent(TextInput));
213
+ return {
214
+ style,
215
+ textChannel,
216
+ Text: AnimatedText,
217
+ TextInput: animatedTextInput
218
+ };
219
+ },
178
220
  useAnimations: function(param) {
179
- var { props, onTransition, style, componentState, presence, stateRef, useStyleEmitter } = param;
221
+ var { props, onTransition, style, componentState, presence, stateRef, styleState, useStyleEmitter, inheritedText } = param;
180
222
  var _themeState_name;
181
223
  var isDisabled = isWeb && componentState.unmounted === true;
182
224
  var isExiting = (presence === null || presence === void 0 ? void 0 : presence[0]) === false;
@@ -194,9 +236,41 @@ function createAnimations(animations, options) {
194
236
  cause
195
237
  });
196
238
  };
239
+ var _styleState_effectiveTransition;
240
+ var effectiveTransition = (_styleState_effectiveTransition = styleState === null || styleState === void 0 ? void 0 : styleState.effectiveTransition) !== null && _styleState_effectiveTransition !== void 0 ? _styleState_effectiveTransition : props.transition;
197
241
  var [, themeState] = useThemeWithState({});
198
242
  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"));
199
243
  var animateStyles = React.useRef({});
244
+ var leadingRatioValue = React.useRef(null);
245
+ var leadingRatioRef = React.useRef(void 0);
246
+ var paintsDerivedLeading = React.useRef(false);
247
+ var textChannelRef = React.useRef(null);
248
+ leadingRatioRef.current = getLeadingRatio(styleState === null || styleState === void 0 ? void 0 : styleState.nativeTextMetrics);
249
+ var paintedTextRef = React.useRef({});
250
+ var movesTextValue = function(key, target) {
251
+ if (typeof target !== "number") return false;
252
+ var node = animateStyles.current[key];
253
+ var last = node ? node["_value"] : paintedTextRef.current[key];
254
+ return last !== void 0 && last !== target;
255
+ };
256
+ var movesLeadingRatio = function(ratio) {
257
+ if (ratio === void 0) return false;
258
+ var node = leadingRatioValue.current;
259
+ var last = node ? node["_value"] : paintedTextRef.current.ratio;
260
+ return last !== void 0 && last !== ratio;
261
+ };
262
+ var fontSizeNode = React.useRef(null);
263
+ var animatedValueFor = function(key) {
264
+ var painted = animateStyles.current[key];
265
+ if (painted) return painted;
266
+ if (key === "fontSize" && fontSizeNode.current) return fontSizeNode.current;
267
+ if (textMetricStyleKey[key]) return new Animated.Value(paintedTextRef.current[key]);
268
+ return void 0;
269
+ };
270
+ var leadingRatioValueFrom = function() {
271
+ var _leadingRatioValue_current;
272
+ return (_leadingRatioValue_current = leadingRatioValue.current) !== null && _leadingRatioValue_current !== void 0 ? _leadingRatioValue_current : new Animated.Value(paintedTextRef.current.ratio);
273
+ };
200
274
  var animatedTranforms = React.useRef([]);
201
275
  var animationsState = React.useRef(/* @__PURE__ */ new WeakMap());
202
276
  var pseudoActiveRef = React.useRef(false);
@@ -217,8 +291,6 @@ function createAnimations(animations, options) {
217
291
  if (justStoppedExiting) {
218
292
  exitCycleIdRef.current++;
219
293
  }
220
- var animateOnly = props.animateOnly || [];
221
- var hasTransitionOnly = !!props.animateOnly;
222
294
  var isEntering = !!componentState.unmounted;
223
295
  var wasEnteringRef = React.useRef(isEntering);
224
296
  var justFinishedEntering = wasEnteringRef.current && !isEntering;
@@ -227,22 +299,43 @@ function createAnimations(animations, options) {
227
299
  });
228
300
  var args = [
229
301
  JSON.stringify(style),
302
+ JSON.stringify(effectiveTransition),
230
303
  componentState,
231
304
  isExiting,
232
305
  !!onTransition,
233
306
  isDark,
234
307
  justFinishedEntering,
235
- hasTransitionOnly
308
+ leadingRatioRef.current,
309
+ inheritedText
236
310
  ];
237
311
  var res = React.useMemo(function() {
312
+ var _textChannelRef_current;
238
313
  var runners = [];
239
314
  var completions = [];
240
315
  var animationState = isExiting ? "exit" : isEntering || justFinishedEntering ? "enter" : "default";
316
+ var resolved = forAnimationState(resolveTransition(effectiveTransition, { animations }), animationState);
241
317
  var nonAnimatedStyle = {};
242
- var useNativeDriverForNode = nativeDriver && !hasAnimatedLayoutKey(style, isDark, hasTransitionOnly ? animateOnly : void 0);
318
+ var paintedRatio = leadingRatioRef.current;
319
+ var paintsProduct = paintsLeadingProduct(style, paintedRatio);
320
+ var movesFontSize = movesTextValue("fontSize", style.fontSize);
321
+ var movesLeading = paintsProduct ? movesLeadingRatio(paintedRatio) : movesTextValue("lineHeight", style.lineHeight);
322
+ if (!isExiting && !isDisabled && !pseudoActiveRef.current) {
323
+ if (!movesFontSize) delete animateStyles.current.fontSize;
324
+ if (!movesLeading) delete animateStyles.current.lineHeight;
325
+ }
326
+ if (isDisabled || typeof style.fontSize !== "number" || !getTransitionForKey(resolved, "fontSize")) {
327
+ fontSizeNode.current = null;
328
+ } else if (!fontSizeNode.current) {
329
+ fontSizeNode.current = new Animated.Value(style.fontSize);
330
+ }
243
331
  var seenAnimateKeys = /* @__PURE__ */ new Set();
244
332
  var sawTransform = false;
245
333
  var transformCount = 0;
334
+ var derivesLeading = !isDisabled && paintsProduct && (movesFontSize || movesLeading) && (!!getTransitionForKey(resolved, "fontSize") || !!getTransitionForKey(resolved, "lineHeight"));
335
+ var inheritedFontSize = isDisabled ? void 0 : inheritedFontSizeNode(style, paintedRatio, inheritedText);
336
+ var useNativeDriverForNode = nativeDriver && !hasAnimatedLayoutKey(style, isDark, resolved) && !movesFontSize && !movesLeading && !inheritedFontSize && !Object.keys(animateStyles.current).some(function(key2) {
337
+ return jsDriverStyleKey[key2];
338
+ });
246
339
  for (var key in style) {
247
340
  var rawVal = style[key];
248
341
  var val = resolveDynamicValue(rawVal, isDark);
@@ -250,15 +343,25 @@ function createAnimations(animations, options) {
250
343
  if (isDisabled) {
251
344
  continue;
252
345
  }
253
- if (animatedStyleKey[key] == null && !costlyToAnimateStyleKey[key] && !layoutStyleKey[key]) {
346
+ if ((derivesLeading || inheritedFontSize) && (key === "fontSize" || key === "lineHeight")) {
347
+ if (key === "fontSize" && derivesLeading && !movesFontSize) {
348
+ nonAnimatedStyle[key] = val;
349
+ }
350
+ continue;
351
+ }
352
+ if (textMetricStyleKey[key] && !(key === "fontSize" ? movesFontSize : movesLeading)) {
254
353
  nonAnimatedStyle[key] = val;
255
354
  continue;
256
355
  }
257
- if (hasTransitionOnly && !animateOnly.includes(key)) {
356
+ if (animatedStyleKey[key] == null && !costlyToAnimateStyleKey[key] && !jsDriverStyleKey[key]) {
258
357
  nonAnimatedStyle[key] = val;
259
358
  continue;
260
359
  }
261
- if (layoutStyleKey[key] && typeof val !== "number") {
360
+ if (key !== "transform" && !getTransitionForKey(resolved, key)) {
361
+ nonAnimatedStyle[key] = val;
362
+ continue;
363
+ }
364
+ if (jsDriverStyleKey[key] && typeof val !== "number") {
262
365
  nonAnimatedStyle[key] = val;
263
366
  continue;
264
367
  }
@@ -267,7 +370,7 @@ function createAnimations(animations, options) {
267
370
  continue;
268
371
  }
269
372
  if (key !== "transform") {
270
- animateStyles.current[key] = update(key, animateStyles.current[key], val);
373
+ animateStyles.current[key] = update(key, animatedValueFor(key), val);
271
374
  seenAnimateKeys.add(key);
272
375
  continue;
273
376
  }
@@ -304,6 +407,35 @@ function createAnimations(animations, options) {
304
407
  }
305
408
  }
306
409
  }
410
+ var ratioFactor = function() {
411
+ if (!movesLeading) {
412
+ leadingRatioValue.current = null;
413
+ return paintedRatio;
414
+ }
415
+ leadingRatioValue.current = update("lineHeight", leadingRatioValueFrom(), paintedRatio);
416
+ return leadingRatioValue.current;
417
+ };
418
+ var derivedLeading;
419
+ if (derivesLeading) {
420
+ var fontSizeFactor = style.fontSize;
421
+ if (movesFontSize) {
422
+ fontSizeFactor = update("fontSize", animatedValueFor("fontSize"), style.fontSize);
423
+ animateStyles.current.fontSize = fontSizeFactor;
424
+ seenAnimateKeys.add("fontSize");
425
+ }
426
+ derivedLeading = Animated.multiply(fontSizeFactor, ratioFactor());
427
+ } else if (inheritedFontSize) {
428
+ derivedLeading = Animated.multiply(inheritedFontSize, ratioFactor());
429
+ } else if (!isDisabled) {
430
+ leadingRatioValue.current = null;
431
+ }
432
+ paintsDerivedLeading.current = !!derivedLeading;
433
+ var ownFontSizeNode = fontSizeNode.current;
434
+ var textChannel = ownFontSizeNode ? ((_textChannelRef_current = textChannelRef.current) === null || _textChannelRef_current === void 0 ? void 0 : _textChannelRef_current.fontSize) === ownFontSizeNode ? textChannelRef.current : {
435
+ fontSize: ownFontSizeNode,
436
+ driver: "react-native"
437
+ } : typeof style.fontSize === "number" ? null : inheritedText !== null && inheritedText !== void 0 ? inheritedText : null;
438
+ textChannelRef.current = textChannel;
307
439
  if (!isExiting && !isDisabled && !pseudoActiveRef.current) {
308
440
  for (var k in animateStyles.current) {
309
441
  if (!seenAnimateKeys.has(k)) delete animateStyles.current[k];
@@ -326,11 +458,20 @@ function createAnimations(animations, options) {
326
458
  var _animationsState_current_get;
327
459
  return [k2, ((_animationsState_current_get = animationsState.current.get(v)) === null || _animationsState_current_get === void 0 ? void 0 : _animationsState_current_get.interpolation) || v];
328
460
  })),
461
+ ...derivedLeading ? { lineHeight: derivedLeading } : null,
329
462
  ...animatedTransformStyle
330
463
  };
464
+ if (!isDisabled) {
465
+ paintedTextRef.current = {
466
+ fontSize: style.fontSize,
467
+ lineHeight: style.lineHeight,
468
+ ratio: paintedRatio
469
+ };
470
+ }
331
471
  return {
332
472
  runners,
333
473
  completions,
474
+ textChannel,
334
475
  style: [nonAnimatedStyle, animatedStyle]
335
476
  };
336
477
  function update(key2, animated, valIn) {
@@ -358,7 +499,7 @@ function createAnimations(animations, options) {
358
499
  });
359
500
  }
360
501
  if (value) {
361
- var animationConfig = getAnimationConfig(key2, animations, props.transition, animationState);
502
+ var animationConfig = getAnimationConfig(key2, animations, effectiveTransition, animationState);
362
503
  var resolve;
363
504
  var promise = new Promise(function(res2) {
364
505
  resolve = res2;
@@ -366,15 +507,14 @@ function createAnimations(animations, options) {
366
507
  completions.push(promise);
367
508
  runners.push(function() {
368
509
  value.stopAnimation();
369
- function getAnimation() {
370
- return Animated[animationConfig.type || "spring"](value, {
371
- toValue: animateToValue,
372
- ...animationConfig,
373
- useNativeDriver: useNativeDriverForNode
374
- });
375
- }
376
- var animation = animationConfig.delay ? Animated.sequence([Animated.delay(animationConfig.delay), getAnimation()]) : getAnimation();
377
- animation.start(function(param2) {
510
+ var { type: type2, delay, ...config } = animationConfig;
511
+ var animation = Animated[type2 || "spring"](value, {
512
+ toValue: animateToValue,
513
+ ...config,
514
+ useNativeDriver: useNativeDriverForNode
515
+ });
516
+ var animation2 = delay ? Animated.sequence([Animated.delay(delay), animation]) : animation;
517
+ animation2.start(function(param2) {
378
518
  var { finished } = param2;
379
519
  if (finished || isExiting) {
380
520
  resolve();
@@ -471,19 +611,31 @@ function createAnimations(animations, options) {
471
611
  }
472
612
  });
473
613
  }, args);
474
- useStyleEmitter === null || useStyleEmitter === void 0 ? void 0 : useStyleEmitter(function(nextStyle, _effectiveTransition, pseudoActive) {
614
+ var onEmittedStyle = function(nextStyle, emittedTransition, pseudoActive, nextMetrics) {
475
615
  pseudoActiveRef.current = pseudoActive === true;
476
616
  var runners = [];
477
617
  var seenAnimateKeys = /* @__PURE__ */ new Set();
478
618
  var transformCount = 0;
479
619
  var animatedShapeChanged = false;
480
- var useNativeDriverForNode = nativeDriver && !hasAnimatedLayoutKey(nextStyle, isDark) && !Object.keys(animateStyles.current).some(function(key2) {
481
- return layoutStyleKey[key2];
620
+ var emittedResolved = forAnimationState(resolveTransition(emittedTransition !== null && emittedTransition !== void 0 ? emittedTransition : effectiveTransition, { animations }), "default");
621
+ var emittedRatio = getLeadingRatio(nextMetrics);
622
+ var emitterPaintsProduct = paintsLeadingProduct(nextStyle, emittedRatio);
623
+ var emitterMovesFontSize = movesTextValue("fontSize", nextStyle.fontSize);
624
+ var emitterMovesLeading = emitterPaintsProduct ? movesLeadingRatio(emittedRatio) : movesTextValue("lineHeight", nextStyle.lineHeight);
625
+ var useNativeDriverForNode = nativeDriver && !hasAnimatedLayoutKey(nextStyle, isDark, emittedResolved) && !emitterMovesFontSize && !emitterMovesLeading && !inheritedFontSizeNode(nextStyle, emittedRatio, inheritedText) && !Object.keys(animateStyles.current).some(function(key2) {
626
+ return jsDriverStyleKey[key2];
482
627
  });
628
+ var emitterDerivesLeading = emitterPaintsProduct && (emitterMovesFontSize || emitterMovesLeading) && (!!getTransitionForKey(emittedResolved, "fontSize") || !!getTransitionForKey(emittedResolved, "lineHeight"));
483
629
  for (var key in nextStyle) {
484
630
  var rawVal = nextStyle[key];
485
631
  var val = resolveDynamicValue(rawVal, isDark);
486
632
  if (val === void 0) continue;
633
+ if (emitterDerivesLeading && (key === "fontSize" || key === "lineHeight")) {
634
+ continue;
635
+ }
636
+ if (textMetricStyleKey[key] && !(key === "fontSize" ? emitterMovesFontSize : emitterMovesLeading)) {
637
+ continue;
638
+ }
487
639
  if (key === "transform" && Array.isArray(val)) {
488
640
  var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
489
641
  try {
@@ -511,14 +663,28 @@ function createAnimations(animations, options) {
511
663
  }
512
664
  }
513
665
  }
514
- } else if (animatedStyleKey[key] != null || costlyToAnimateStyleKey[key] || layoutStyleKey[key]) {
515
- if (layoutStyleKey[key] && typeof val !== "number") continue;
666
+ } else if (animatedStyleKey[key] != null || costlyToAnimateStyleKey[key] || jsDriverStyleKey[key]) {
667
+ if (jsDriverStyleKey[key] && typeof val !== "number") continue;
516
668
  if (colorStyleKey[key] && !isAnimatableColor(val)) continue;
517
669
  if (!animateStyles.current[key]) animatedShapeChanged = true;
518
- animateStyles.current[key] = update(key, animateStyles.current[key], val);
670
+ animateStyles.current[key] = update(key, animatedValueFor(key), val);
519
671
  seenAnimateKeys.add(key);
520
672
  }
521
673
  }
674
+ if (emitterDerivesLeading) {
675
+ if (emitterMovesFontSize) {
676
+ if (!animateStyles.current.fontSize) animatedShapeChanged = true;
677
+ animateStyles.current.fontSize = update("fontSize", animatedValueFor("fontSize"), nextStyle.fontSize);
678
+ seenAnimateKeys.add("fontSize");
679
+ }
680
+ if (emitterMovesLeading) {
681
+ if (!leadingRatioValue.current) animatedShapeChanged = true;
682
+ leadingRatioValue.current = update("lineHeight", leadingRatioValueFrom(), emittedRatio);
683
+ }
684
+ }
685
+ if (emitterDerivesLeading !== paintsDerivedLeading.current) {
686
+ animatedShapeChanged = true;
687
+ }
522
688
  for (var key1 in animateStyles.current) {
523
689
  if (!seenAnimateKeys.has(key1)) {
524
690
  delete animateStyles.current[key1];
@@ -529,6 +695,11 @@ function createAnimations(animations, options) {
529
695
  animatedTranforms.current = animatedTranforms.current.slice(0, transformCount);
530
696
  animatedShapeChanged = true;
531
697
  }
698
+ paintedTextRef.current = {
699
+ fontSize: nextStyle.fontSize,
700
+ lineHeight: nextStyle.lineHeight,
701
+ ratio: emittedRatio
702
+ };
532
703
  runners.forEach(function(r) {
533
704
  return r();
534
705
  });
@@ -557,19 +728,21 @@ function createAnimations(animations, options) {
557
728
  animateToValue: (curInterpolation === null || curInterpolation === void 0 ? void 0 : curInterpolation.animateToValue) ? 0 : 1
558
729
  });
559
730
  }
560
- var animationConfig = getAnimationConfig(key2, animations, props.transition, "default");
731
+ var animationConfig = getAnimationConfig(key2, animations, emittedTransition !== null && emittedTransition !== void 0 ? emittedTransition : effectiveTransition, "default");
561
732
  runners.push(function() {
562
733
  value.stopAnimation();
563
- var anim = Animated[animationConfig.type || "spring"](value, {
734
+ var { type: type2, delay, ...config } = animationConfig;
735
+ var anim = Animated[type2 || "spring"](value, {
564
736
  toValue: animateToValue,
565
- ...animationConfig,
737
+ ...config,
566
738
  useNativeDriver: useNativeDriverForNode
567
739
  });
568
- (animationConfig.delay ? Animated.sequence([Animated.delay(animationConfig.delay), anim]) : anim).start();
740
+ (delay ? Animated.sequence([Animated.delay(delay), anim]) : anim).start();
569
741
  });
570
742
  return value;
571
743
  }
572
- });
744
+ };
745
+ useStyleEmitter === null || useStyleEmitter === void 0 ? void 0 : useStyleEmitter(onEmittedStyle);
573
746
  if (process.env.NODE_ENV === "development") {
574
747
  if (props["debug"] === "verbose") {
575
748
  console.info(`Animated`, {
@@ -610,41 +783,37 @@ function getInterpolated(current, next) {
610
783
  outputRange
611
784
  };
612
785
  }
613
- function getAnimationConfig(key, animations, transition) {
614
- var animationState = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "default";
615
- var normalized = normalizeTransition(transition);
616
- var shortKey = transformShorthands[key];
617
- var _normalized_properties_key;
618
- var propAnimation = (_normalized_properties_key = normalized.properties[key]) !== null && _normalized_properties_key !== void 0 ? _normalized_properties_key : normalized.properties[shortKey];
619
- var animationType = null;
620
- var extraConf = {};
621
- if (typeof propAnimation === "string") {
622
- animationType = propAnimation;
623
- } else if (propAnimation && (typeof propAnimation === "undefined" ? "undefined" : _type_of(propAnimation)) === "object") {
624
- animationType = propAnimation.type || getEffectiveAnimation(normalized, animationState);
625
- extraConf = propAnimation;
626
- } else {
627
- animationType = getEffectiveAnimation(normalized, animationState);
628
- }
629
- if (normalized.delay && !extraConf.delay) {
630
- extraConf = {
631
- ...extraConf,
632
- delay: normalized.delay
786
+ function entryToRN(entry) {
787
+ var extra = entry.timing.kind === "spring" ? entry.timing.extra : void 0;
788
+ if (entry.timing.kind === "spring") {
789
+ return {
790
+ type: "spring",
791
+ stiffness: entry.timing.stiffness,
792
+ damping: entry.timing.damping,
793
+ mass: entry.timing.mass,
794
+ ...typeof (extra === null || extra === void 0 ? void 0 : extra.velocity) === "number" ? { velocity: extra.velocity } : null,
795
+ ...typeof (extra === null || extra === void 0 ? void 0 : extra.overshootClamping) === "boolean" ? { overshootClamping: extra.overshootClamping } : null,
796
+ ...entry.delayMs ? { delay: entry.delayMs } : null
633
797
  };
634
798
  }
635
- var found = animationType ? animations[animationType] : {};
799
+ var bezier = easingToBezier(entry.timing.easing);
636
800
  return {
637
- ...found,
638
- ...normalized.config,
639
- ...extraConf
801
+ type: "timing",
802
+ duration: entry.timing.durationMs,
803
+ ...bezier ? { easing: Easing.bezier(bezier[0], bezier[1], bezier[2], bezier[3]) } : null,
804
+ ...entry.delayMs ? { delay: entry.delayMs } : null
640
805
  };
641
806
  }
642
- var transformShorthands = {
643
- x: "translateX",
644
- y: "translateY",
645
- translateX: "x",
646
- translateY: "y"
807
+ var snapConfig = {
808
+ type: "timing",
809
+ duration: 0
647
810
  };
811
+ function getAnimationConfig(key, animations, transition) {
812
+ var animationState = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : "default";
813
+ var resolved = forAnimationState(resolveTransition(transition, { animations }), animationState);
814
+ var entry = getTransitionForKey(resolved, key);
815
+ return entry ? entryToRN(entry) : snapConfig;
816
+ }
648
817
  function getValue(input) {
649
818
  var isColor = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
650
819
  if (typeof input !== "string") {