diff --git a/packages/vibrant-motion/src/lib/Motion/Motion.native.tsx b/packages/vibrant-motion/src/lib/Motion/Motion.native.tsx index 1ebb169b5..b485f0371 100644 --- a/packages/vibrant-motion/src/lib/Motion/Motion.native.tsx +++ b/packages/vibrant-motion/src/lib/Motion/Motion.native.tsx @@ -5,7 +5,6 @@ import { Animated } from 'react-native'; import { useInterpolation } from '@vibrant-ui/core'; import { useSafeDeps } from '@vibrant-ui/utils'; import { NATIVE_SUPPORT_ANIMATION_PROPERTIES, easings } from '../constants'; -import { transformMotionProps } from '../props/transform'; import { handleTransformStyle } from '../utils/handleTransformStyle'; import { withMotionVariation } from './MotionProps'; @@ -23,7 +22,7 @@ export const Motion = withMotionVariation( style = {}, ...restProps }) => { - const { interpolation } = useInterpolation(transformMotionProps); + const { interpolation } = useInterpolation(); const onEndRef = useSafeDeps(onEnd); const useNativeDriver = useRef(true); diff --git a/packages/vibrant-motion/src/lib/Transition/Transition.native.tsx b/packages/vibrant-motion/src/lib/Transition/Transition.native.tsx index 6569cfa2a..8032aba3c 100644 --- a/packages/vibrant-motion/src/lib/Transition/Transition.native.tsx +++ b/packages/vibrant-motion/src/lib/Transition/Transition.native.tsx @@ -5,13 +5,12 @@ import { Animated } from 'react-native'; import { useInterpolation } from '@vibrant-ui/core'; import { useSafeDeps } from '@vibrant-ui/utils'; import { NATIVE_SUPPORT_ANIMATION_PROPERTIES, easings } from '../constants'; -import { transformMotionProps } from '../props/transform'; import { handleTransformStyle } from '../utils/handleTransformStyle'; import { withTransitionVariation } from './TransitionProp'; export const Transition = withTransitionVariation( ({ innerRef, children, style = {}, animation, duration = 500, easing = 'easeOutQuad', onEnd, ...restProps }) => { - const { interpolation } = useInterpolation(transformMotionProps); + const { interpolation } = useInterpolation(); const reverse = useRef(false); const isFirstRender = useRef(true); const onEndRef = useSafeDeps(onEnd); diff --git a/packages/vibrant-motion/src/lib/props/transform/index.ts b/packages/vibrant-motion/src/lib/props/transform/index.ts index 1d202f034..6a6178648 100644 --- a/packages/vibrant-motion/src/lib/props/transform/index.ts +++ b/packages/vibrant-motion/src/lib/props/transform/index.ts @@ -1,2 +1 @@ -export { transformMotionProps } from './transform'; export type { TransformMotionProps } from './type'; diff --git a/packages/vibrant-motion/src/lib/props/transform/transform.ts b/packages/vibrant-motion/src/lib/props/transform/transform.ts deleted file mode 100644 index 0a8327b07..000000000 --- a/packages/vibrant-motion/src/lib/props/transform/transform.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { createSystemProp } from '@vibrant-ui/core'; - -const xProp = createSystemProp({ - property: 'x', -}); - -const yProp = createSystemProp({ - property: 'y', -}); - -const rotateProp = createSystemProp({ - property: 'rotate', -}); - -export const transformMotionProps = [xProp, yProp, rotateProp]; diff --git a/packages/vibrant-motion/src/lib/props/transform/type.ts b/packages/vibrant-motion/src/lib/props/transform/type.ts index 8de3de7f4..9b5243b46 100644 --- a/packages/vibrant-motion/src/lib/props/transform/type.ts +++ b/packages/vibrant-motion/src/lib/props/transform/type.ts @@ -4,4 +4,5 @@ export type TransformMotionProps = { x?: ResponsiveValue; y?: ResponsiveValue; rotate?: ResponsiveValue; + scale?: ResponsiveValue; }; diff --git a/packages/vibrant-motion/src/lib/utils/handleTransformStyle.ts b/packages/vibrant-motion/src/lib/utils/handleTransformStyle.ts index ec82c60fe..82ea7c23a 100644 --- a/packages/vibrant-motion/src/lib/utils/handleTransformStyle.ts +++ b/packages/vibrant-motion/src/lib/utils/handleTransformStyle.ts @@ -1,15 +1,16 @@ import { isDefined } from '@vibrant-ui/utils'; export const handleTransformStyle = (style: Record) => { - const { x, y, rotate, ...restStyle } = style; + const { x, y, rotate, scale, ...restStyle } = style; - if (isDefined(x) || isDefined(y) || isDefined(rotate)) { + if (isDefined(x) || isDefined(y) || isDefined(rotate) || isDefined(scale)) { return { ...restStyle, transform: { ...(isDefined(x) ? { translateX: x } : {}), ...(isDefined(y) ? { translateY: y } : {}), ...(isDefined(rotate) ? { rotate } : {}), + ...(isDefined(scale) ? { scale } : {}), }, }; }