Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@tamagui/animations-react-native

Package Overview
Dependencies
Maintainers
1
Versions
1020
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@tamagui/animations-react-native - npm Package Compare versions

Comparing version 1.111.8 to 1.111.9

394

dist/esm/createAnimations.native.js

@@ -7,25 +7,29 @@ import React from "react";

var animatedStyleKey = {
transform: !0,
opacity: !0
}, colorStyleKey = {
backgroundColor: !0,
color: !0,
borderColor: !0,
borderLeftColor: !0,
borderRightColor: !0,
borderTopColor: !0,
borderBottomColor: !0
}, costlyToAnimateStyleKey = {
borderRadius: !0,
borderTopLeftRadius: !0,
borderTopRightRadius: !0,
borderBottomLeftRadius: !0,
borderBottomRightRadius: !0,
borderWidth: !0,
borderLeftWidth: !0,
borderRightWidth: !0,
borderTopWidth: !0,
borderBottomWidth: !0,
...colorStyleKey
}, AnimatedView = Animated.View, AnimatedText = Animated.Text;
transform: !0,
opacity: !0
},
colorStyleKey = {
backgroundColor: !0,
color: !0,
borderColor: !0,
borderLeftColor: !0,
borderRightColor: !0,
borderTopColor: !0,
borderBottomColor: !0
},
costlyToAnimateStyleKey = {
borderRadius: !0,
borderTopLeftRadius: !0,
borderTopRightRadius: !0,
borderBottomLeftRadius: !0,
borderBottomRightRadius: !0,
borderWidth: !0,
borderLeftWidth: !0,
borderRightWidth: !0,
borderTopWidth: !0,
borderBottomWidth: !0,
...colorStyleKey
},
AnimatedView = Animated.View,
AnimatedText = Animated.Text;
function useAnimatedNumber(initial) {

@@ -51,11 +55,17 @@ var state = React.useRef(null);

setValue(next) {
var { type, ...config } = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
type: "spring"
}, onFinish = arguments.length > 2 ? arguments[2] : void 0, val = state.current.val, handleFinish = onFinish ? function(param) {
var { finished } = param;
return finished ? onFinish() : null;
} : void 0;
if (type === "direct")
val.setValue(next);
else if (type === "spring") {
var {
type,
...config
} = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
type: "spring"
},
onFinish = arguments.length > 2 ? arguments[2] : void 0,
val = state.current.val,
handleFinish = onFinish ? function (param) {
var {
finished
} = param;
return finished ? onFinish() : null;
} : void 0;
if (type === "direct") val.setValue(next);else if (type === "spring") {
var _state_current_composite;

@@ -83,14 +93,14 @@ (_state_current_composite = state.current.composite) === null || _state_current_composite === void 0 || _state_current_composite.stop();

function useAnimatedNumberReaction(param, onValue) {
var { value } = param, onChange = useEvent(function(current) {
onValue(current.value);
});
React.useEffect(function() {
var {
value
} = param,
onChange = useEvent(function (current) {
onValue(current.value);
});
React.useEffect(function () {
var id = value.getInstance().addListener(onChange);
return function() {
return function () {
value.getInstance().removeListener(id);
};
}, [
value,
onChange
]);
}, [value, onChange]);
}

@@ -111,136 +121,147 @@ function useAnimatedNumberStyle(value, getStyle) {

ResetPresence,
useAnimations: function(param) {
var { props, onDidAnimate, style, componentState, presence } = param, isExiting = presence?.[0] === !1, sendExitComplete = presence?.[1], animateStyles = React.useRef({}), animatedTranforms = React.useRef([]), animationsState = React.useRef(/* @__PURE__ */ new WeakMap()), animateOnly = props.animateOnly || [], hasAnimateOnly = !!props.animateOnly, args = [
JSON.stringify(style),
componentState,
isExiting,
!!onDidAnimate
], isThereNoNativeStyleKeys = React.useMemo(function() {
return isWeb ? !0 : Object.keys(style).some(function(key) {
return animateOnly.length ? !animatedStyleKey[key] && animateOnly.indexOf(key) === -1 : !animatedStyleKey[key];
});
}, args), res = React.useMemo(function() {
var runners = [], completions = [], nonAnimatedStyle = {};
for (var key in style) {
var val = style[key];
if (animatedStyleKey[key] == null && !costlyToAnimateStyleKey[key]) {
nonAnimatedStyle[key] = val;
continue;
}
if (hasAnimateOnly && !animateOnly.includes(key)) {
nonAnimatedStyle[key] = val;
continue;
}
if (key !== "transform") {
animateStyles.current[key] = update(key, animateStyles.current[key], val);
continue;
}
if (val) {
if (typeof val == "string") {
console.warn("Warning: Tamagui can't animate string transforms yet!");
useAnimations: function (param) {
var {
props,
onDidAnimate,
style,
componentState,
presence
} = param,
isExiting = presence?.[0] === !1,
sendExitComplete = presence?.[1],
animateStyles = React.useRef({}),
animatedTranforms = React.useRef([]),
animationsState = React.useRef(/* @__PURE__ */new WeakMap()),
animateOnly = props.animateOnly || [],
hasAnimateOnly = !!props.animateOnly,
args = [JSON.stringify(style), componentState, isExiting, !!onDidAnimate],
isThereNoNativeStyleKeys = React.useMemo(function () {
return isWeb ? !0 : Object.keys(style).some(function (key) {
return animateOnly.length ? !animatedStyleKey[key] && animateOnly.indexOf(key) === -1 : !animatedStyleKey[key];
});
}, args),
res = React.useMemo(function () {
var runners = [],
completions = [],
nonAnimatedStyle = {};
for (var key in style) {
var val = style[key];
if (animatedStyleKey[key] == null && !costlyToAnimateStyleKey[key]) {
nonAnimatedStyle[key] = val;
continue;
}
var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
try {
for (var _iterator = val.entries()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
var [index, transform] = _step.value, _animatedTranforms_current_index;
if (transform) {
var tkey = Object.keys(transform)[0], currentTransform = (_animatedTranforms_current_index = animatedTranforms.current[index]) === null || _animatedTranforms_current_index === void 0 ? void 0 : _animatedTranforms_current_index[tkey];
animatedTranforms.current[index] = {
[tkey]: update(tkey, currentTransform, transform[tkey])
}, animatedTranforms.current = [
...animatedTranforms.current
];
}
if (hasAnimateOnly && !animateOnly.includes(key)) {
nonAnimatedStyle[key] = val;
continue;
}
if (key !== "transform") {
animateStyles.current[key] = update(key, animateStyles.current[key], val);
continue;
}
if (val) {
if (typeof val == "string") {
console.warn("Warning: Tamagui can't animate string transforms yet!");
continue;
}
} catch (err) {
_didIteratorError = !0, _iteratorError = err;
} finally {
var _iteratorNormalCompletion = !0,
_didIteratorError = !1,
_iteratorError = void 0;
try {
!_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
for (var _iterator = val.entries()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
var [index, transform] = _step.value,
_animatedTranforms_current_index;
if (transform) {
var tkey = Object.keys(transform)[0],
currentTransform = (_animatedTranforms_current_index = animatedTranforms.current[index]) === null || _animatedTranforms_current_index === void 0 ? void 0 : _animatedTranforms_current_index[tkey];
animatedTranforms.current[index] = {
[tkey]: update(tkey, currentTransform, transform[tkey])
}, animatedTranforms.current = [...animatedTranforms.current];
}
}
} catch (err) {
_didIteratorError = !0, _iteratorError = err;
} finally {
if (_didIteratorError)
throw _iteratorError;
try {
!_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
} finally {
if (_didIteratorError) throw _iteratorError;
}
}
}
}
}
var animatedStyle = {
...Object.fromEntries(Object.entries(animateStyles.current).map(function(param2) {
var [k, v] = param2, _animationsState_current_get;
return [
k,
((_animationsState_current_get = animationsState.current.get(v)) === null || _animationsState_current_get === void 0 ? void 0 : _animationsState_current_get.interpolation) || v
];
})),
transform: animatedTranforms.current.map(function(r) {
var _animationsState_current_get, key2 = Object.keys(r)[0], val2 = ((_animationsState_current_get = animationsState.current.get(r[key2])) === null || _animationsState_current_get === void 0 ? void 0 : _animationsState_current_get.interpolation) || r[key2];
return {
[key2]: val2
};
})
};
return {
runners,
completions,
style: [
nonAnimatedStyle,
animatedStyle
]
};
function update(key2, animated, valIn) {
var isColorStyleKey = colorStyleKey[key2], [val2, type] = isColorStyleKey ? [
0,
void 0
] : getValue(valIn), animateToValue = val2, value = animated || new Animated.Value(val2), curInterpolation = animationsState.current.get(value), interpolateArgs;
if (type) {
var _curInterpolation_current;
interpolateArgs = getInterpolated((_curInterpolation_current = curInterpolation?.current) !== null && _curInterpolation_current !== void 0 ? _curInterpolation_current : value._value, val2, type), animationsState.current.set(value, {
var animatedStyle = {
...Object.fromEntries(Object.entries(animateStyles.current).map(function (param2) {
var [k, v] = param2,
_animationsState_current_get;
return [k, ((_animationsState_current_get = animationsState.current.get(v)) === null || _animationsState_current_get === void 0 ? void 0 : _animationsState_current_get.interpolation) || v];
})),
transform: animatedTranforms.current.map(function (r) {
var _animationsState_current_get,
key2 = Object.keys(r)[0],
val2 = ((_animationsState_current_get = animationsState.current.get(r[key2])) === null || _animationsState_current_get === void 0 ? void 0 : _animationsState_current_get.interpolation) || r[key2];
return {
[key2]: val2
};
})
};
return {
runners,
completions,
style: [nonAnimatedStyle, animatedStyle]
};
function update(key2, animated, valIn) {
var isColorStyleKey = colorStyleKey[key2],
[val2, type] = isColorStyleKey ? [0, void 0] : getValue(valIn),
animateToValue = val2,
value = animated || new Animated.Value(val2),
curInterpolation = animationsState.current.get(value),
interpolateArgs;
if (type) {
var _curInterpolation_current;
interpolateArgs = getInterpolated((_curInterpolation_current = curInterpolation?.current) !== null && _curInterpolation_current !== void 0 ? _curInterpolation_current : value._value, val2, type), animationsState.current.set(value, {
interpolation: value.interpolate(interpolateArgs),
current: val2
});
}
if (isColorStyleKey && (animateToValue = curInterpolation?.animateToValue ? 0 : 1, interpolateArgs = getColorInterpolated(curInterpolation?.current,
// valIn is the next color
valIn, animateToValue), animationsState.current.set(value, {
current: valIn,
interpolation: value.interpolate(interpolateArgs),
current: val2
});
}
if (isColorStyleKey && (animateToValue = curInterpolation?.animateToValue ? 0 : 1, interpolateArgs = getColorInterpolated(
curInterpolation?.current,
// valIn is the next color
valIn,
animateToValue
), animationsState.current.set(value, {
current: valIn,
interpolation: value.interpolate(interpolateArgs),
animateToValue: curInterpolation?.animateToValue ? 0 : 1
})), value) {
var animationConfig = getAnimationConfig(key2, animations, props.animation), resolve, promise = new Promise(function(res2) {
resolve = res2;
});
completions.push(promise), runners.push(function() {
value.stopAnimation();
function getAnimation() {
return Animated[animationConfig.type || "spring"](value, {
toValue: animateToValue,
useNativeDriver: !isWeb && !isThereNoNativeStyleKeys,
...animationConfig
animateToValue: curInterpolation?.animateToValue ? 0 : 1
})), value) {
var animationConfig = getAnimationConfig(key2, animations, props.animation),
resolve,
promise = new Promise(function (res2) {
resolve = res2;
});
}
var animation = animationConfig.delay ? Animated.sequence([
Animated.delay(animationConfig.delay),
getAnimation()
]) : getAnimation();
animation.start(function(param2) {
var { finished } = param2;
finished && resolve();
completions.push(promise), runners.push(function () {
value.stopAnimation();
function getAnimation() {
return Animated[animationConfig.type || "spring"](value, {
toValue: animateToValue,
useNativeDriver: !isWeb && !isThereNoNativeStyleKeys,
...animationConfig
});
}
var animation = animationConfig.delay ? Animated.sequence([Animated.delay(animationConfig.delay), getAnimation()]) : getAnimation();
animation.start(function (param2) {
var {
finished
} = param2;
finished && resolve();
});
});
});
}
return process.env.NODE_ENV === "development" && props.debug === "verbose" && console.info(" \u{1F4A0} animate", key2, `from (${value._value}) to`, valIn, `(${val2})`, "type", type, "interpolate", interpolateArgs), value;
}
return process.env.NODE_ENV === "development" && props.debug === "verbose" && console.info(" \u{1F4A0} animate", key2, `from (${value._value}) to`, valIn, `(${val2})`, "type", type, "interpolate", interpolateArgs), value;
}
}, args);
return useIsomorphicLayoutEffect(function() {
res.runners.forEach(function(r) {
}, args);
return useIsomorphicLayoutEffect(function () {
res.runners.forEach(function (r) {
return r();
});
var cancel = !1;
return Promise.all(res.completions).then(function() {
return Promise.all(res.completions).then(function () {
cancel || (onDidAnimate?.(), isExiting && sendExitComplete?.());
}), function() {
}), function () {
cancel = !0;

@@ -257,9 +278,4 @@ };

function getColorInterpolated(currentColor, nextColor, animateToValue) {
var inputRange = [
0,
1
], outputRange = [
currentColor || nextColor,
nextColor
];
var inputRange = [0, 1],
outputRange = [currentColor || nextColor, nextColor];
return animateToValue === 0 && outputRange.reverse(), {

@@ -273,9 +289,4 @@ inputRange,

next === current && (current = next - 1e-9);
var inputRange = [
current,
next
], outputRange = [
`${current}${postfix}`,
`${next}${postfix}`
];
var inputRange = [current, next],
outputRange = [`${current}${postfix}`, `${next}${postfix}`];
return next < current && (inputRange.reverse(), outputRange.reverse()), {

@@ -287,12 +298,15 @@ inputRange,

function getAnimationConfig(key, animations, animation) {
if (typeof animation == "string")
return animations[animation];
var type = "", extraConf, shortKey = transformShorthands[key];
if (typeof animation == "string") return animations[animation];
var type = "",
extraConf,
shortKey = transformShorthands[key];
if (Array.isArray(animation)) {
var _animation_, _animation_1;
type = animation[0];
var _animation__key, conf = (_animation__key = (_animation_ = animation[1]) === null || _animation_ === void 0 ? void 0 : _animation_[key]) !== null && _animation__key !== void 0 ? _animation__key : (_animation_1 = animation[1]) === null || _animation_1 === void 0 ? void 0 : _animation_1[shortKey];
var _animation__key,
conf = (_animation__key = (_animation_ = animation[1]) === null || _animation_ === void 0 ? void 0 : _animation_[key]) !== null && _animation__key !== void 0 ? _animation__key : (_animation_1 = animation[1]) === null || _animation_1 === void 0 ? void 0 : _animation_1[shortKey];
conf && (typeof conf == "string" ? type = conf : (type = conf.type || type, extraConf = conf));
} else {
var _animation_key, val = (_animation_key = animation?.[key]) !== null && _animation_key !== void 0 ? _animation_key : animation?.[shortKey];
var _animation_key,
val = (_animation_key = animation?.[key]) !== null && _animation_key !== void 0 ? _animation_key : animation?.[shortKey];
type = val?.type, extraConf = val;

@@ -314,20 +328,8 @@ }

var isColor = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1;
if (typeof input != "string")
return [
input
];
var _input_match, [_, number, after] = (_input_match = input.match(/([-0-9]+)(deg|%|px)/)) !== null && _input_match !== void 0 ? _input_match : [];
return [
+number,
after
];
if (typeof input != "string") return [input];
var _input_match,
[_, number, after] = (_input_match = input.match(/([-0-9]+)(deg|%|px)/)) !== null && _input_match !== void 0 ? _input_match : [];
return [+number, after];
}
export {
AnimatedText,
AnimatedView,
createAnimations,
useAnimatedNumber,
useAnimatedNumberReaction,
useAnimatedNumberStyle
};
//# sourceMappingURL=createAnimations.js.map
export { AnimatedText, AnimatedView, createAnimations, useAnimatedNumber, useAnimatedNumberReaction, useAnimatedNumberStyle };
//# sourceMappingURL=createAnimations.native.js.map

5

dist/esm/index.native.js

@@ -1,3 +0,2 @@

export * from "./createAnimations";
//# sourceMappingURL=index.js.map
export * from "./createAnimations.native.js";
//# sourceMappingURL=index.native.js.map

2

dist/esm/polyfill.native.js
typeof requestAnimationFrame > "u" && (globalThis.requestAnimationFrame = setImmediate);
//# sourceMappingURL=polyfill.js.map
//# sourceMappingURL=polyfill.native.js.map

12

package.json
{
"name": "@tamagui/animations-react-native",
"version": "1.111.8",
"version": "1.111.9",
"source": "src/index.ts",

@@ -21,3 +21,3 @@ "removeSideEffects": true,

".": {
"react-native-import": "./dist/esm/index.native.mjs",
"react-native-import": "./dist/esm/index.native.js",
"react-native": "./dist/cjs/index.native.js",

@@ -30,8 +30,8 @@ "types": "./types/index.d.ts",

"dependencies": {
"@tamagui/constants": "1.111.8",
"@tamagui/use-presence": "1.111.8",
"@tamagui/web": "1.111.8"
"@tamagui/constants": "1.111.9",
"@tamagui/use-presence": "1.111.9",
"@tamagui/web": "1.111.9"
},
"devDependencies": {
"@tamagui/build": "1.111.8",
"@tamagui/build": "1.111.9",
"react": "^18.2.0 || ^19.0.0",

@@ -38,0 +38,0 @@ "react-native": "0.74.1"

dist/esm/createAnimations.native.mjs
dist/esm/createAnimations.native.mjs.map
dist/esm/index.native.mjs
dist/esm/index.native.mjs.map
dist/esm/polyfill.native.mjs
dist/esm/polyfill.native.mjs.map
dist/esm/createAnimations.native.js.map

Sorry, the diff of this file is not supported yet

dist/esm/index.native.js.map

Sorry, the diff of this file is not supported yet

dist/esm/polyfill.native.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc