motion-on-native 1.1.0 → 1.1.2

package/lib/index.d.ts

@@ -56,10 +56,6 @@ export interface AnimationProps {
     left?: number;
     right?: number;
     shadowColor?: string;
-    shadowOffset?: {
-        width: number;
-        height: number;
-    };
     shadowOpacity?: number;
     shadowRadius?: number;
     elevation?: number;

package/lib/index.js

@@ -64,12 +64,67 @@ function createMotionComponent(Component) {
         const opacity = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('opacity', initial));
         const x = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('x', initial));
         const y = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('y', initial));
+        const z = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('z', initial));
         const scale = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('scale', initial));
+        const scaleX = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('scaleX', initial));
+        const scaleY = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('scaleY', initial));
         const rotate = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('rotate', initial));
+        const rotateX = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('rotateX', initial));
+        const rotateY = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('rotateY', initial));
+        const rotateZ = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('rotateZ', initial));
+        const skewX = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('skewX', initial));
+        const skewY = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('skewY', initial));
+        // Layout properties
         const width = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('width', initial));
         const height = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('height', initial));
-        const backgroundColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('backgroundColor', initial));
+        const minWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('minWidth', initial));
+        const minHeight = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('minHeight', initial));
+        const maxWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('maxWidth', initial));
+        const maxHeight = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('maxHeight', initial));
+        // Spacing properties
+        const margin = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('margin', initial));
+        const marginTop = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('marginTop', initial));
+        const marginBottom = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('marginBottom', initial));
+        const marginLeft = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('marginLeft', initial));
+        const marginRight = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('marginRight', initial));
+        const marginHorizontal = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('marginHorizontal', initial));
+        const marginVertical = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('marginVertical', initial));
+        const padding = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('padding', initial));
+        const paddingTop = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('paddingTop', initial));
+        const paddingBottom = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('paddingBottom', initial));
+        const paddingLeft = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('paddingLeft', initial));
+        const paddingRight = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('paddingRight', initial));
+        const paddingHorizontal = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('paddingHorizontal', initial));
+        const paddingVertical = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('paddingVertical', initial));
+        // Border properties
         const borderRadius = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderRadius', initial));
+        const borderTopLeftRadius = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderTopLeftRadius', initial));
+        const borderTopRightRadius = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderTopRightRadius', initial));
+        const borderBottomLeftRadius = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderBottomLeftRadius', initial));
+        const borderBottomRightRadius = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderBottomRightRadius', initial));
+        const borderWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderWidth', initial));
+        const borderTopWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderTopWidth', initial));
+        const borderBottomWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderBottomWidth', initial));
+        const borderLeftWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderLeftWidth', initial));
+        const borderRightWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderRightWidth', initial));
+        const borderColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderColor', initial));
+        const borderTopColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderTopColor', initial));
+        const borderBottomColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderBottomColor', initial));
+        const borderLeftColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderLeftColor', initial));
+        const borderRightColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderRightColor', initial));
+        // Color properties
+        const backgroundColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('backgroundColor', initial));
+        const color = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('color', initial));
+        // Position properties
+        const top = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('top', initial));
+        const bottom = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('bottom', initial));
+        const left = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('left', initial));
+        const right = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('right', initial));
+        // Shadow properties
+        const shadowColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('shadowColor', initial));
+        const shadowOpacity = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('shadowOpacity', initial));
+        const shadowRadius = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('shadowRadius', initial));
+        const elevation = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('elevation', initial));
         // Animation helper
         const animateToValues = (targetValues, transitionConfig = transition) => {
             Object.entries(targetValues).forEach(([key, value]) => {
@@ -101,15 +156,71 @@ function createMotionComponent(Component) {
         // Get shared value by key
         const getSharedValue = (key) => {
             switch (key) {
+                // Transform properties
                 case 'opacity': return opacity;
                 case 'x': return x;
                 case 'y': return y;
+                case 'z': return z;
                 case 'scale': return scale;
+                case 'scaleX': return scaleX;
+                case 'scaleY': return scaleY;
                 case 'rotate': return rotate;
+                case 'rotateX': return rotateX;
+                case 'rotateY': return rotateY;
+                case 'rotateZ': return rotateZ;
+                case 'skewX': return skewX;
+                case 'skewY': return skewY;
+                // Layout properties
                 case 'width': return width;
                 case 'height': return height;
-                case 'backgroundColor': return backgroundColor;
+                case 'minWidth': return minWidth;
+                case 'minHeight': return minHeight;
+                case 'maxWidth': return maxWidth;
+                case 'maxHeight': return maxHeight;
+                // Spacing properties
+                case 'margin': return margin;
+                case 'marginTop': return marginTop;
+                case 'marginBottom': return marginBottom;
+                case 'marginLeft': return marginLeft;
+                case 'marginRight': return marginRight;
+                case 'marginHorizontal': return marginHorizontal;
+                case 'marginVertical': return marginVertical;
+                case 'padding': return padding;
+                case 'paddingTop': return paddingTop;
+                case 'paddingBottom': return paddingBottom;
+                case 'paddingLeft': return paddingLeft;
+                case 'paddingRight': return paddingRight;
+                case 'paddingHorizontal': return paddingHorizontal;
+                case 'paddingVertical': return paddingVertical;
+                // Border properties
                 case 'borderRadius': return borderRadius;
+                case 'borderTopLeftRadius': return borderTopLeftRadius;
+                case 'borderTopRightRadius': return borderTopRightRadius;
+                case 'borderBottomLeftRadius': return borderBottomLeftRadius;
+                case 'borderBottomRightRadius': return borderBottomRightRadius;
+                case 'borderWidth': return borderWidth;
+                case 'borderTopWidth': return borderTopWidth;
+                case 'borderBottomWidth': return borderBottomWidth;
+                case 'borderLeftWidth': return borderLeftWidth;
+                case 'borderRightWidth': return borderRightWidth;
+                case 'borderColor': return borderColor;
+                case 'borderTopColor': return borderTopColor;
+                case 'borderBottomColor': return borderBottomColor;
+                case 'borderLeftColor': return borderLeftColor;
+                case 'borderRightColor': return borderRightColor;
+                // Color properties
+                case 'backgroundColor': return backgroundColor;
+                case 'color': return color;
+                // Position properties
+                case 'top': return top;
+                case 'bottom': return bottom;
+                case 'left': return left;
+                case 'right': return right;
+                // Shadow properties
+                case 'shadowColor': return shadowColor;
+                case 'shadowOpacity': return shadowOpacity;
+                case 'shadowRadius': return shadowRadius;
+                case 'elevation': return elevation;
                 default: return null;
             }
         };
@@ -197,10 +308,26 @@ function createMotionComponent(Component) {
                 transform.push({ translateX: x.value });
             if (y.value !== 0)
                 transform.push({ translateY: y.value });
+            if (z.value !== 0)
+                transform.push({ translateZ: z.value });
             if (scale.value !== 1)
                 transform.push({ scale: scale.value });
+            if (scaleX.value !== 1)
+                transform.push({ scaleX: scaleX.value });
+            if (scaleY.value !== 1)
+                transform.push({ scaleY: scaleY.value });
             if (rotate.value !== '0deg')
                 transform.push({ rotate: rotate.value });
+            if (rotateX.value !== '0deg')
+                transform.push({ rotateX: rotateX.value });
+            if (rotateY.value !== '0deg')
+                transform.push({ rotateY: rotateY.value });
+            if (rotateZ.value !== '0deg')
+                transform.push({ rotateZ: rotateZ.value });
+            if (skewX.value !== '0deg')
+                transform.push({ skewX: skewX.value });
+            if (skewY.value !== '0deg')
+                transform.push({ skewY: skewY.value });
             if (transform.length > 0)
                 style.transform = transform;
             // Layout properties
@@ -208,10 +335,97 @@ function createMotionComponent(Component) {
                 style.width = width.value;
             if (height.value !== 0)
                 style.height = height.value;
-            if (backgroundColor.value !== 0)
-                style.backgroundColor = backgroundColor.value;
+            if (minWidth.value !== 0)
+                style.minWidth = minWidth.value;
+            if (minHeight.value !== 0)
+                style.minHeight = minHeight.value;
+            if (maxWidth.value !== 0)
+                style.maxWidth = maxWidth.value;
+            if (maxHeight.value !== 0)
+                style.maxHeight = maxHeight.value;
+            // Spacing properties
+            if (margin.value !== 0)
+                style.margin = margin.value;
+            if (marginTop.value !== 0)
+                style.marginTop = marginTop.value;
+            if (marginBottom.value !== 0)
+                style.marginBottom = marginBottom.value;
+            if (marginLeft.value !== 0)
+                style.marginLeft = marginLeft.value;
+            if (marginRight.value !== 0)
+                style.marginRight = marginRight.value;
+            if (marginHorizontal.value !== 0)
+                style.marginHorizontal = marginHorizontal.value;
+            if (marginVertical.value !== 0)
+                style.marginVertical = marginVertical.value;
+            if (padding.value !== 0)
+                style.padding = padding.value;
+            if (paddingTop.value !== 0)
+                style.paddingTop = paddingTop.value;
+            if (paddingBottom.value !== 0)
+                style.paddingBottom = paddingBottom.value;
+            if (paddingLeft.value !== 0)
+                style.paddingLeft = paddingLeft.value;
+            if (paddingRight.value !== 0)
+                style.paddingRight = paddingRight.value;
+            if (paddingHorizontal.value !== 0)
+                style.paddingHorizontal = paddingHorizontal.value;
+            if (paddingVertical.value !== 0)
+                style.paddingVertical = paddingVertical.value;
+            // Border properties
             if (borderRadius.value !== 0)
                 style.borderRadius = borderRadius.value;
+            if (borderTopLeftRadius.value !== 0)
+                style.borderTopLeftRadius = borderTopLeftRadius.value;
+            if (borderTopRightRadius.value !== 0)
+                style.borderTopRightRadius = borderTopRightRadius.value;
+            if (borderBottomLeftRadius.value !== 0)
+                style.borderBottomLeftRadius = borderBottomLeftRadius.value;
+            if (borderBottomRightRadius.value !== 0)
+                style.borderBottomRightRadius = borderBottomRightRadius.value;
+            if (borderWidth.value !== 0)
+                style.borderWidth = borderWidth.value;
+            if (borderTopWidth.value !== 0)
+                style.borderTopWidth = borderTopWidth.value;
+            if (borderBottomWidth.value !== 0)
+                style.borderBottomWidth = borderBottomWidth.value;
+            if (borderLeftWidth.value !== 0)
+                style.borderLeftWidth = borderLeftWidth.value;
+            if (borderRightWidth.value !== 0)
+                style.borderRightWidth = borderRightWidth.value;
+            if (borderColor.value !== 0)
+                style.borderColor = borderColor.value;
+            if (borderTopColor.value !== 0)
+                style.borderTopColor = borderTopColor.value;
+            if (borderBottomColor.value !== 0)
+                style.borderBottomColor = borderBottomColor.value;
+            if (borderLeftColor.value !== 0)
+                style.borderLeftColor = borderLeftColor.value;
+            if (borderRightColor.value !== 0)
+                style.borderRightColor = borderRightColor.value;
+            // Color properties
+            if (backgroundColor.value !== 0)
+                style.backgroundColor = backgroundColor.value;
+            if (color.value !== 0)
+                style.color = color.value;
+            // Position properties
+            if (top.value !== 0)
+                style.top = top.value;
+            if (bottom.value !== 0)
+                style.bottom = bottom.value;
+            if (left.value !== 0)
+                style.left = left.value;
+            if (right.value !== 0)
+                style.right = right.value;
+            // Shadow properties
+            if (shadowColor.value !== 0)
+                style.shadowColor = shadowColor.value;
+            if (shadowOpacity.value !== 0)
+                style.shadowOpacity = shadowOpacity.value;
+            if (shadowRadius.value !== 0)
+                style.shadowRadius = shadowRadius.value;
+            if (elevation.value !== 0)
+                style.elevation = elevation.value;
             return style;
         });
         const AnimatedComponent = react_native_reanimated_1.default.createAnimatedComponent(Component);
@@ -245,8 +459,6 @@ function getDefaultValue(key) {
         case 'skewX':
         case 'skewY':
             return '0deg';
-        case 'shadowOffset':
-            return { width: 0, height: 0 };
         default:
             return 0;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-on-native",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Framer Motion-inspired animation library for React Native with Reanimated. Easy spring animations, gestures, and transitions for mobile apps.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",