motion-on-native 1.1.0 → 1.1.1

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 (2) hide show
  1. package/lib/index.js +222 -4
  2. package/package.json +1 -1
package/lib/index.js CHANGED
@@ -64,12 +64,68 @@ function createMotionComponent(Component) {
64
64
  const opacity = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('opacity', initial));
65
65
  const x = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('x', initial));
66
66
  const y = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('y', initial));
67
+ const z = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('z', initial));
67
68
  const scale = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('scale', initial));
69
+ const scaleX = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('scaleX', initial));
70
+ const scaleY = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('scaleY', initial));
68
71
  const rotate = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('rotate', initial));
72
+ const rotateX = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('rotateX', initial));
73
+ const rotateY = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('rotateY', initial));
74
+ const rotateZ = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('rotateZ', initial));
75
+ const skewX = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('skewX', initial));
76
+ const skewY = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('skewY', initial));
77
+ // Layout properties
69
78
  const width = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('width', initial));
70
79
  const height = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('height', initial));
71
- const backgroundColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('backgroundColor', initial));
80
+ const minWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('minWidth', initial));
81
+ const minHeight = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('minHeight', initial));
82
+ const maxWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('maxWidth', initial));
83
+ const maxHeight = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('maxHeight', initial));
84
+ // Spacing properties
85
+ const margin = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('margin', initial));
86
+ const marginTop = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('marginTop', initial));
87
+ const marginBottom = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('marginBottom', initial));
88
+ const marginLeft = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('marginLeft', initial));
89
+ const marginRight = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('marginRight', initial));
90
+ const marginHorizontal = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('marginHorizontal', initial));
91
+ const marginVertical = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('marginVertical', initial));
92
+ const padding = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('padding', initial));
93
+ const paddingTop = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('paddingTop', initial));
94
+ const paddingBottom = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('paddingBottom', initial));
95
+ const paddingLeft = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('paddingLeft', initial));
96
+ const paddingRight = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('paddingRight', initial));
97
+ const paddingHorizontal = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('paddingHorizontal', initial));
98
+ const paddingVertical = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('paddingVertical', initial));
99
+ // Border properties
72
100
  const borderRadius = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderRadius', initial));
101
+ const borderTopLeftRadius = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderTopLeftRadius', initial));
102
+ const borderTopRightRadius = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderTopRightRadius', initial));
103
+ const borderBottomLeftRadius = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderBottomLeftRadius', initial));
104
+ const borderBottomRightRadius = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderBottomRightRadius', initial));
105
+ const borderWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderWidth', initial));
106
+ const borderTopWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderTopWidth', initial));
107
+ const borderBottomWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderBottomWidth', initial));
108
+ const borderLeftWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderLeftWidth', initial));
109
+ const borderRightWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderRightWidth', initial));
110
+ const borderColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderColor', initial));
111
+ const borderTopColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderTopColor', initial));
112
+ const borderBottomColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderBottomColor', initial));
113
+ const borderLeftColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderLeftColor', initial));
114
+ const borderRightColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderRightColor', initial));
115
+ // Color properties
116
+ const backgroundColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('backgroundColor', initial));
117
+ const color = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('color', initial));
118
+ // Position properties
119
+ const top = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('top', initial));
120
+ const bottom = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('bottom', initial));
121
+ const left = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('left', initial));
122
+ const right = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('right', initial));
123
+ // Shadow properties
124
+ const shadowColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('shadowColor', initial));
125
+ const shadowOffset = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('shadowOffset', initial));
126
+ const shadowOpacity = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('shadowOpacity', initial));
127
+ const shadowRadius = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('shadowRadius', initial));
128
+ const elevation = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('elevation', initial));
73
129
  // Animation helper
74
130
  const animateToValues = (targetValues, transitionConfig = transition) => {
75
131
  Object.entries(targetValues).forEach(([key, value]) => {
@@ -101,15 +157,72 @@ function createMotionComponent(Component) {
101
157
  // Get shared value by key
102
158
  const getSharedValue = (key) => {
103
159
  switch (key) {
160
+ // Transform properties
104
161
  case 'opacity': return opacity;
105
162
  case 'x': return x;
106
163
  case 'y': return y;
164
+ case 'z': return z;
107
165
  case 'scale': return scale;
166
+ case 'scaleX': return scaleX;
167
+ case 'scaleY': return scaleY;
108
168
  case 'rotate': return rotate;
169
+ case 'rotateX': return rotateX;
170
+ case 'rotateY': return rotateY;
171
+ case 'rotateZ': return rotateZ;
172
+ case 'skewX': return skewX;
173
+ case 'skewY': return skewY;
174
+ // Layout properties
109
175
  case 'width': return width;
110
176
  case 'height': return height;
111
- case 'backgroundColor': return backgroundColor;
177
+ case 'minWidth': return minWidth;
178
+ case 'minHeight': return minHeight;
179
+ case 'maxWidth': return maxWidth;
180
+ case 'maxHeight': return maxHeight;
181
+ // Spacing properties
182
+ case 'margin': return margin;
183
+ case 'marginTop': return marginTop;
184
+ case 'marginBottom': return marginBottom;
185
+ case 'marginLeft': return marginLeft;
186
+ case 'marginRight': return marginRight;
187
+ case 'marginHorizontal': return marginHorizontal;
188
+ case 'marginVertical': return marginVertical;
189
+ case 'padding': return padding;
190
+ case 'paddingTop': return paddingTop;
191
+ case 'paddingBottom': return paddingBottom;
192
+ case 'paddingLeft': return paddingLeft;
193
+ case 'paddingRight': return paddingRight;
194
+ case 'paddingHorizontal': return paddingHorizontal;
195
+ case 'paddingVertical': return paddingVertical;
196
+ // Border properties
112
197
  case 'borderRadius': return borderRadius;
198
+ case 'borderTopLeftRadius': return borderTopLeftRadius;
199
+ case 'borderTopRightRadius': return borderTopRightRadius;
200
+ case 'borderBottomLeftRadius': return borderBottomLeftRadius;
201
+ case 'borderBottomRightRadius': return borderBottomRightRadius;
202
+ case 'borderWidth': return borderWidth;
203
+ case 'borderTopWidth': return borderTopWidth;
204
+ case 'borderBottomWidth': return borderBottomWidth;
205
+ case 'borderLeftWidth': return borderLeftWidth;
206
+ case 'borderRightWidth': return borderRightWidth;
207
+ case 'borderColor': return borderColor;
208
+ case 'borderTopColor': return borderTopColor;
209
+ case 'borderBottomColor': return borderBottomColor;
210
+ case 'borderLeftColor': return borderLeftColor;
211
+ case 'borderRightColor': return borderRightColor;
212
+ // Color properties
213
+ case 'backgroundColor': return backgroundColor;
214
+ case 'color': return color;
215
+ // Position properties
216
+ case 'top': return top;
217
+ case 'bottom': return bottom;
218
+ case 'left': return left;
219
+ case 'right': return right;
220
+ // Shadow properties
221
+ case 'shadowColor': return shadowColor;
222
+ case 'shadowOffset': return shadowOffset;
223
+ case 'shadowOpacity': return shadowOpacity;
224
+ case 'shadowRadius': return shadowRadius;
225
+ case 'elevation': return elevation;
113
226
  default: return null;
114
227
  }
115
228
  };
@@ -197,10 +310,26 @@ function createMotionComponent(Component) {
197
310
  transform.push({ translateX: x.value });
198
311
  if (y.value !== 0)
199
312
  transform.push({ translateY: y.value });
313
+ if (z.value !== 0)
314
+ transform.push({ translateZ: z.value });
200
315
  if (scale.value !== 1)
201
316
  transform.push({ scale: scale.value });
317
+ if (scaleX.value !== 1)
318
+ transform.push({ scaleX: scaleX.value });
319
+ if (scaleY.value !== 1)
320
+ transform.push({ scaleY: scaleY.value });
202
321
  if (rotate.value !== '0deg')
203
322
  transform.push({ rotate: rotate.value });
323
+ if (rotateX.value !== '0deg')
324
+ transform.push({ rotateX: rotateX.value });
325
+ if (rotateY.value !== '0deg')
326
+ transform.push({ rotateY: rotateY.value });
327
+ if (rotateZ.value !== '0deg')
328
+ transform.push({ rotateZ: rotateZ.value });
329
+ if (skewX.value !== '0deg')
330
+ transform.push({ skewX: skewX.value });
331
+ if (skewY.value !== '0deg')
332
+ transform.push({ skewY: skewY.value });
204
333
  if (transform.length > 0)
205
334
  style.transform = transform;
206
335
  // Layout properties
@@ -208,10 +337,99 @@ function createMotionComponent(Component) {
208
337
  style.width = width.value;
209
338
  if (height.value !== 0)
210
339
  style.height = height.value;
211
- if (backgroundColor.value !== 0)
212
- style.backgroundColor = backgroundColor.value;
340
+ if (minWidth.value !== 0)
341
+ style.minWidth = minWidth.value;
342
+ if (minHeight.value !== 0)
343
+ style.minHeight = minHeight.value;
344
+ if (maxWidth.value !== 0)
345
+ style.maxWidth = maxWidth.value;
346
+ if (maxHeight.value !== 0)
347
+ style.maxHeight = maxHeight.value;
348
+ // Spacing properties
349
+ if (margin.value !== 0)
350
+ style.margin = margin.value;
351
+ if (marginTop.value !== 0)
352
+ style.marginTop = marginTop.value;
353
+ if (marginBottom.value !== 0)
354
+ style.marginBottom = marginBottom.value;
355
+ if (marginLeft.value !== 0)
356
+ style.marginLeft = marginLeft.value;
357
+ if (marginRight.value !== 0)
358
+ style.marginRight = marginRight.value;
359
+ if (marginHorizontal.value !== 0)
360
+ style.marginHorizontal = marginHorizontal.value;
361
+ if (marginVertical.value !== 0)
362
+ style.marginVertical = marginVertical.value;
363
+ if (padding.value !== 0)
364
+ style.padding = padding.value;
365
+ if (paddingTop.value !== 0)
366
+ style.paddingTop = paddingTop.value;
367
+ if (paddingBottom.value !== 0)
368
+ style.paddingBottom = paddingBottom.value;
369
+ if (paddingLeft.value !== 0)
370
+ style.paddingLeft = paddingLeft.value;
371
+ if (paddingRight.value !== 0)
372
+ style.paddingRight = paddingRight.value;
373
+ if (paddingHorizontal.value !== 0)
374
+ style.paddingHorizontal = paddingHorizontal.value;
375
+ if (paddingVertical.value !== 0)
376
+ style.paddingVertical = paddingVertical.value;
377
+ // Border properties
213
378
  if (borderRadius.value !== 0)
214
379
  style.borderRadius = borderRadius.value;
380
+ if (borderTopLeftRadius.value !== 0)
381
+ style.borderTopLeftRadius = borderTopLeftRadius.value;
382
+ if (borderTopRightRadius.value !== 0)
383
+ style.borderTopRightRadius = borderTopRightRadius.value;
384
+ if (borderBottomLeftRadius.value !== 0)
385
+ style.borderBottomLeftRadius = borderBottomLeftRadius.value;
386
+ if (borderBottomRightRadius.value !== 0)
387
+ style.borderBottomRightRadius = borderBottomRightRadius.value;
388
+ if (borderWidth.value !== 0)
389
+ style.borderWidth = borderWidth.value;
390
+ if (borderTopWidth.value !== 0)
391
+ style.borderTopWidth = borderTopWidth.value;
392
+ if (borderBottomWidth.value !== 0)
393
+ style.borderBottomWidth = borderBottomWidth.value;
394
+ if (borderLeftWidth.value !== 0)
395
+ style.borderLeftWidth = borderLeftWidth.value;
396
+ if (borderRightWidth.value !== 0)
397
+ style.borderRightWidth = borderRightWidth.value;
398
+ if (borderColor.value !== 0)
399
+ style.borderColor = borderColor.value;
400
+ if (borderTopColor.value !== 0)
401
+ style.borderTopColor = borderTopColor.value;
402
+ if (borderBottomColor.value !== 0)
403
+ style.borderBottomColor = borderBottomColor.value;
404
+ if (borderLeftColor.value !== 0)
405
+ style.borderLeftColor = borderLeftColor.value;
406
+ if (borderRightColor.value !== 0)
407
+ style.borderRightColor = borderRightColor.value;
408
+ // Color properties
409
+ if (backgroundColor.value !== 0)
410
+ style.backgroundColor = backgroundColor.value;
411
+ if (color.value !== 0)
412
+ style.color = color.value;
413
+ // Position properties
414
+ if (top.value !== 0)
415
+ style.top = top.value;
416
+ if (bottom.value !== 0)
417
+ style.bottom = bottom.value;
418
+ if (left.value !== 0)
419
+ style.left = left.value;
420
+ if (right.value !== 0)
421
+ style.right = right.value;
422
+ // Shadow properties
423
+ if (shadowColor.value !== 0)
424
+ style.shadowColor = shadowColor.value;
425
+ if (shadowOffset.value !== 0)
426
+ style.shadowOffset = shadowOffset.value;
427
+ if (shadowOpacity.value !== 0)
428
+ style.shadowOpacity = shadowOpacity.value;
429
+ if (shadowRadius.value !== 0)
430
+ style.shadowRadius = shadowRadius.value;
431
+ if (elevation.value !== 0)
432
+ style.elevation = elevation.value;
215
433
  return style;
216
434
  });
217
435
  const AnimatedComponent = react_native_reanimated_1.default.createAnimatedComponent(Component);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "motion-on-native",
3
- "version": "1.1.0",
3
+ "version": "1.1.1",
4
4
  "description": "Framer Motion-inspired animation library for React Native with Reanimated. Easy spring animations, gestures, and transitions for mobile apps.",
5
5
  "main": "lib/index.js",
6
6
  "types": "lib/index.d.ts",