motion-on-native 1.3.0 → 1.5.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.
Files changed (4) hide show
  1. package/README.md +85 -25
  2. package/lib/index.d.ts +1 -16
  3. package/lib/index.js +195 -441
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -23,19 +23,13 @@ This package requires:
23
23
  ```tsx
24
24
  import { NativeMotion } from 'motion-on-native';
25
25
 
26
- // Controlled animation
27
26
  <NativeMotion.View
28
- initial={{ opacity: 0, x: -100 }}
29
- animate={{ opacity: 1, x: 0 }}
30
- exit={{ opacity: 0, scale: 0 }}
31
- shouldAnimate={shouldShow}
32
- shouldDeAnimate={shouldHide}
33
- shouldExit={shouldExit}
34
- transition={{ type: 'spring', damping: 15 }}
35
- onExitComplete={() => console.log('Exit animation complete')}
27
+ initial={{ opacity: 0, translateX: -100 }}
28
+ animate={{ opacity: 1, translateX: 0 }}
29
+ transition={{ type: 'spring', damping: 15, stiffness: 100 }}
36
30
  >
37
31
  <Text>Animated content</Text>
38
- </NativeMotion.View>
32
+ </NativeMotion.View>;
39
33
  ```
40
34
 
41
35
  ## Components
@@ -43,39 +37,105 @@ import { NativeMotion } from 'motion-on-native';
43
37
  - `NativeMotion.View`
44
38
  - `NativeMotion.Text`
45
39
  - `NativeMotion.Image`
40
+ - `NativeMotion.ImageBackground`
46
41
  - `NativeMotion.TextInput`
47
42
  - `NativeMotion.TouchableOpacity`
43
+ - `NativeMotion.ScrollView`
44
+ - `NativeMotion.FlatList`
45
+ - `NativeMotion.SectionList`
46
+ - `NativeMotion.Pressable`
48
47
 
49
- ## Animation Control Props
48
+ ## Props
50
49
 
51
- - `shouldAnimate`: boolean - Triggers animation from `initial` to `animate`
52
- - `shouldDeAnimate`: boolean - Triggers animation from `animate` back to `initial`
53
- - `shouldExit`: boolean - Triggers animation from current state to `exit` (element stays mounted)
54
- - `onExitComplete`: callback - Called when exit animation completes
50
+ - `initial`: AnimationProps | false - Initial animation state
51
+ - `animate`: AnimationProps - Target animation state
52
+ - `exit`: AnimationProps - Exit animation state
53
+ - `transition`: TransitionProps - Animation configuration
54
+ - `styles`: ViewStyle - Additional styles
55
55
 
56
56
  ## Animation Properties
57
57
 
58
+ ### Transform
59
+
58
60
  - `opacity`: 0-1
59
- - `x`, `y`: translation in pixels
60
- - `scale`: size multiplier
61
- - `rotate`: rotation (e.g., '45deg')
62
- - `width`, `height`: dimensions in pixels
61
+ - `translateX`, `translateY`: translation in pixels
62
+ - `scale`, `scaleX`, `scaleY`: size multipliers
63
+ - `rotate`, `rotateX`, `rotateY`, `rotateZ`: rotation (e.g., '45deg')
64
+ - `skewX`, `skewY`: skew transformations
65
+
66
+ ### Layout
67
+
68
+ - `width`, `height`: dimensions
69
+
70
+ ### Spacing
71
+
63
72
  - `margin`, `marginTop`, `marginBottom`, `marginLeft`, `marginRight`
73
+ - `marginHorizontal`, `marginVertical`
64
74
  - `padding`, `paddingTop`, `paddingBottom`, `paddingLeft`, `paddingRight`
65
- - `borderRadius`, `borderWidth`, `borderColor`
66
- - `backgroundColor`: hex color
75
+ - `paddingHorizontal`, `paddingVertical`
76
+
77
+ ### Border
78
+
79
+ - `borderRadius`, `borderTopLeftRadius`, `borderTopRightRadius`, `borderBottomLeftRadius`, `borderBottomRightRadius`
80
+ - `borderWidth`, `borderTopWidth`, `borderBottomWidth`, `borderLeftWidth`, `borderRightWidth`
81
+ - `borderColor`, `borderTopColor`, `borderBottomColor`, `borderLeftColor`, `borderRightColor`
82
+
83
+ ### Colors
84
+
85
+ - `backgroundColor`: color value (BETA)
86
+ - `color`: text color (BETA)
87
+
88
+ ### Position
89
+
67
90
  - `top`, `bottom`, `left`, `right`: positioning
68
91
 
69
- ## Transition Types
92
+ ### Shadow (iOS)
93
+
94
+ - `shadowColor`, `shadowOpacity`, `shadowRadius`
95
+
96
+ ### Elevation (Android)
97
+
98
+ - `elevation`: shadow depth
99
+
100
+ ## Transition Configuration
70
101
 
71
102
  ```tsx
72
- // Spring animation
73
- transition={{ type: 'spring', damping: 15, stiffness: 100 }}
103
+ // Spring animation (default)
104
+ transition={{
105
+ type: 'spring',
106
+ damping: 15,
107
+ stiffness: 100,
108
+ mass: 1
109
+ }}
74
110
 
75
111
  // Timing animation
76
- transition={{ type: 'timing', duration: 300 }}
112
+ transition={{
113
+ type: 'timing',
114
+ duration: 300,
115
+ delay: 100
116
+ }}
117
+
118
+ // Repeating animation
119
+ transition={{
120
+ type: 'timing',
121
+ duration: 1000,
122
+ repeat: 'infinity', // or number
123
+ repeatType: 'reverse' // or 'loop'
124
+ }}
77
125
  ```
78
126
 
127
+ ### Transition Properties
128
+
129
+ - `type`: 'spring' | 'timing'
130
+ - `duration`: animation duration in ms
131
+ - `damping`: spring damping (spring only)
132
+ - `stiffness`: spring stiffness (spring only)
133
+ - `mass`: spring mass (spring only)
134
+ - `delay`: delay before animation starts
135
+ - `ease`: easing function name
136
+ - `repeat`: number of repeats or 'infinity'
137
+ - `repeatType`: 'loop' | 'reverse'
138
+
79
139
  ## License
80
140
 
81
141
  MIT
package/lib/index.d.ts CHANGED
@@ -2,9 +2,6 @@ import React from 'react';
2
2
  import { View, ViewStyle } from 'react-native';
3
3
  export interface AnimationProps {
4
4
  opacity?: number;
5
- x?: number;
6
- y?: number;
7
- z?: number;
8
5
  translateX?: number;
9
6
  translateY?: number;
10
7
  scale?: number;
@@ -18,10 +15,6 @@ export interface AnimationProps {
18
15
  skewY?: string;
19
16
  width?: number;
20
17
  height?: number;
21
- minWidth?: number;
22
- minHeight?: number;
23
- maxWidth?: number;
24
- maxHeight?: number;
25
18
  margin?: number;
26
19
  marginTop?: number;
27
20
  marginBottom?: number;
@@ -47,10 +40,6 @@ export interface AnimationProps {
47
40
  borderLeftWidth?: number;
48
41
  borderRightWidth?: number;
49
42
  borderColor?: string;
50
- borderTopColor?: string;
51
- borderBottomColor?: string;
52
- borderLeftColor?: string;
53
- borderRightColor?: string;
54
43
  backgroundColor?: string;
55
44
  color?: string;
56
45
  top?: number;
@@ -78,16 +67,12 @@ export interface MotionComponentProps {
78
67
  animate?: AnimationProps;
79
68
  exit?: AnimationProps;
80
69
  transition?: TransitionProps;
81
- shouldAnimate?: boolean;
82
- shouldDeAnimate?: boolean;
83
- shouldExit?: boolean;
84
- onExitComplete?: () => void;
85
70
  whileHover?: AnimationProps;
86
71
  whileTap?: AnimationProps;
87
72
  whileFocus?: AnimationProps;
88
73
  layout?: boolean;
89
74
  layoutId?: string;
90
- style?: ViewStyle;
75
+ styles?: ViewStyle;
91
76
  children?: React.ReactNode;
92
77
  }
93
78
  export declare const NativeMotion: {
package/lib/index.js CHANGED
@@ -58,146 +58,111 @@ const DEFAULT_TRANSITION = {
58
58
  };
59
59
  function createMotionComponent(Component) {
60
60
  return function MotionComponent(props) {
61
- const { initial = {}, animate = {}, exit = {}, transition = DEFAULT_TRANSITION, shouldAnimate = false, shouldDeAnimate = false, shouldExit = false, onExitComplete, whileHover, whileTap, whileFocus, layout, layoutId, style = {}, children } = props, rest = __rest(props, ["initial", "animate", "exit", "transition", "shouldAnimate", "shouldDeAnimate", "shouldExit", "onExitComplete", "whileHover", "whileTap", "whileFocus", "layout", "layoutId", "style", "children"]);
62
- // Create shared values
63
- const opacity = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('opacity', initial));
64
- const x = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('x', initial));
65
- const y = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('y', initial));
66
- const z = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('z', initial));
67
- const translateX = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('translateX', initial));
68
- const translateY = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('translateY', initial));
69
- const scale = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('scale', initial));
70
- const scaleX = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('scaleX', initial));
71
- const scaleY = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('scaleY', initial));
72
- const rotate = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('rotate', initial));
73
- const rotateX = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('rotateX', initial));
74
- const rotateY = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('rotateY', initial));
75
- const rotateZ = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('rotateZ', initial));
76
- const skewX = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('skewX', initial));
77
- const skewY = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('skewY', initial));
78
- // Layout properties
79
- const width = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('width', initial));
80
- const height = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('height', initial));
81
- const minWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('minWidth', initial));
82
- const minHeight = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('minHeight', initial));
83
- const maxWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('maxWidth', initial));
84
- const maxHeight = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('maxHeight', initial));
85
- // Spacing properties
86
- const margin = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('margin', initial));
87
- const marginTop = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('marginTop', initial));
88
- const marginBottom = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('marginBottom', initial));
89
- const marginLeft = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('marginLeft', initial));
90
- const marginRight = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('marginRight', initial));
91
- const marginHorizontal = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('marginHorizontal', initial));
92
- const marginVertical = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('marginVertical', initial));
93
- const padding = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('padding', initial));
94
- const paddingTop = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('paddingTop', initial));
95
- const paddingBottom = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('paddingBottom', initial));
96
- const paddingLeft = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('paddingLeft', initial));
97
- const paddingRight = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('paddingRight', initial));
98
- const paddingHorizontal = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('paddingHorizontal', initial));
99
- const paddingVertical = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('paddingVertical', initial));
100
- // Border properties
101
- const borderRadius = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderRadius', initial));
102
- const borderTopLeftRadius = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderTopLeftRadius', initial));
103
- const borderTopRightRadius = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderTopRightRadius', initial));
104
- const borderBottomLeftRadius = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderBottomLeftRadius', initial));
105
- const borderBottomRightRadius = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderBottomRightRadius', initial));
106
- const borderWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderWidth', initial));
107
- const borderTopWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderTopWidth', initial));
108
- const borderBottomWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderBottomWidth', initial));
109
- const borderLeftWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderLeftWidth', initial));
110
- const borderRightWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderRightWidth', 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 - use progress values for interpolation
116
- const backgroundColorProgress = (0, react_native_reanimated_1.useSharedValue)(0);
117
- const colorProgress = (0, react_native_reanimated_1.useSharedValue)(0);
118
- const borderColorProgress = (0, react_native_reanimated_1.useSharedValue)(0);
119
- const shadowColorProgress = (0, react_native_reanimated_1.useSharedValue)(0);
120
- // Store color values for interpolation
121
- const backgroundColorFrom = (0, react_1.useRef)(getInitialValue('backgroundColor', initial));
122
- const backgroundColorTo = (0, react_1.useRef)(getInitialValue('backgroundColor', initial));
123
- const colorFrom = (0, react_1.useRef)(getInitialValue('color', initial));
124
- const colorTo = (0, react_1.useRef)(getInitialValue('color', initial));
125
- const borderColorFrom = (0, react_1.useRef)(getInitialValue('borderColor', initial));
126
- const borderColorTo = (0, react_1.useRef)(getInitialValue('borderColor', initial));
127
- const shadowColorFrom = (0, react_1.useRef)(getInitialValue('shadowColor', initial));
128
- const shadowColorTo = (0, react_1.useRef)(getInitialValue('shadowColor', initial));
129
- // Position properties
130
- const top = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('top', initial));
131
- const bottom = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('bottom', initial));
132
- const left = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('left', initial));
133
- const right = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('right', initial));
134
- // Shadow properties
135
- const shadowOpacity = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('shadowOpacity', initial));
136
- const shadowRadius = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('shadowRadius', initial));
137
- const elevation = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('elevation', initial));
61
+ const { initial = {}, animate = {}, exit = {}, // Future Implementation
62
+ transition = DEFAULT_TRANSITION, whileHover, // Future Implementation
63
+ whileTap, // Future Implementation
64
+ whileFocus, // Future Implementation
65
+ layout, // Future Implementation
66
+ layoutId, // Future Implementation
67
+ styles = {}, children } = props, rest = __rest(props, ["initial", "animate", "exit", "transition", "whileHover", "whileTap", "whileFocus", "layout", "layoutId", "styles", "children"]);
68
+ const sharedValues = (0, react_1.useRef)({
69
+ opacity: (0, react_native_reanimated_1.useSharedValue)(0),
70
+ scale: (0, react_native_reanimated_1.useSharedValue)(1),
71
+ scaleX: (0, react_native_reanimated_1.useSharedValue)(1),
72
+ scaleY: (0, react_native_reanimated_1.useSharedValue)(1),
73
+ x: (0, react_native_reanimated_1.useSharedValue)(0),
74
+ y: (0, react_native_reanimated_1.useSharedValue)(0),
75
+ z: (0, react_native_reanimated_1.useSharedValue)(0),
76
+ translateX: (0, react_native_reanimated_1.useSharedValue)(0),
77
+ translateY: (0, react_native_reanimated_1.useSharedValue)(0),
78
+ shadowOpacity: (0, react_native_reanimated_1.useSharedValue)(0),
79
+ shadowRadius: (0, react_native_reanimated_1.useSharedValue)(0),
80
+ elevation: (0, react_native_reanimated_1.useSharedValue)(0),
81
+ width: (0, react_native_reanimated_1.useSharedValue)(0),
82
+ height: (0, react_native_reanimated_1.useSharedValue)(0),
83
+ margin: (0, react_native_reanimated_1.useSharedValue)(0),
84
+ marginTop: (0, react_native_reanimated_1.useSharedValue)(0),
85
+ marginBottom: (0, react_native_reanimated_1.useSharedValue)(0),
86
+ marginLeft: (0, react_native_reanimated_1.useSharedValue)(0),
87
+ marginRight: (0, react_native_reanimated_1.useSharedValue)(0),
88
+ marginHorizontal: (0, react_native_reanimated_1.useSharedValue)(0),
89
+ marginVertical: (0, react_native_reanimated_1.useSharedValue)(0),
90
+ padding: (0, react_native_reanimated_1.useSharedValue)(0),
91
+ paddingTop: (0, react_native_reanimated_1.useSharedValue)(0),
92
+ paddingBottom: (0, react_native_reanimated_1.useSharedValue)(0),
93
+ paddingLeft: (0, react_native_reanimated_1.useSharedValue)(0),
94
+ paddingRight: (0, react_native_reanimated_1.useSharedValue)(0),
95
+ paddingHorizontal: (0, react_native_reanimated_1.useSharedValue)(0),
96
+ paddingVertical: (0, react_native_reanimated_1.useSharedValue)(0),
97
+ borderRadius: (0, react_native_reanimated_1.useSharedValue)(0),
98
+ borderTopLeftRadius: (0, react_native_reanimated_1.useSharedValue)(0),
99
+ borderTopRightRadius: (0, react_native_reanimated_1.useSharedValue)(0),
100
+ borderBottomLeftRadius: (0, react_native_reanimated_1.useSharedValue)(0),
101
+ borderBottomRightRadius: (0, react_native_reanimated_1.useSharedValue)(0),
102
+ borderWidth: (0, react_native_reanimated_1.useSharedValue)(0),
103
+ borderTopWidth: (0, react_native_reanimated_1.useSharedValue)(0),
104
+ borderBottomWidth: (0, react_native_reanimated_1.useSharedValue)(0),
105
+ borderLeftWidth: (0, react_native_reanimated_1.useSharedValue)(0),
106
+ borderRightWidth: (0, react_native_reanimated_1.useSharedValue)(0),
107
+ top: (0, react_native_reanimated_1.useSharedValue)(0),
108
+ bottom: (0, react_native_reanimated_1.useSharedValue)(0),
109
+ left: (0, react_native_reanimated_1.useSharedValue)(0),
110
+ right: (0, react_native_reanimated_1.useSharedValue)(0),
111
+ // ColorProgress
112
+ backgroundColor: (0, react_native_reanimated_1.useSharedValue)(0), // use Interpolation 'transparent',
113
+ color: (0, react_native_reanimated_1.useSharedValue)(0), // use Interpolation 'transparent',
114
+ borderColor: (0, react_native_reanimated_1.useSharedValue)(0), // use Interpolation 'transparent',
115
+ // Color targets as shared values
116
+ backgroundColorTo: (0, react_native_reanimated_1.useSharedValue)(getInitialValue('backgroundColor', animate)),
117
+ colorTo: (0, react_native_reanimated_1.useSharedValue)(getInitialValue('color', animate)),
118
+ borderColorTo: (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderColor', animate)),
119
+ shadowColorTo: (0, react_native_reanimated_1.useSharedValue)(getInitialValue('shadowColor', animate)),
120
+ // Transform values
121
+ rotate: (0, react_native_reanimated_1.useSharedValue)('0deg'), // use interpolation '0deg',
122
+ rotateX: (0, react_native_reanimated_1.useSharedValue)('0deg'), // use interpolation ''0deg'deg',
123
+ rotateY: (0, react_native_reanimated_1.useSharedValue)('0deg'), // use interpolation ''0deg'deg',
124
+ rotateZ: (0, react_native_reanimated_1.useSharedValue)('0deg'), // use interpolation ''0deg'deg',
125
+ skewX: (0, react_native_reanimated_1.useSharedValue)('0deg'), // use interpolation ''0deg'deg',
126
+ skewY: (0, react_native_reanimated_1.useSharedValue)('0deg'), // use interpolation '0deg',
127
+ }).current;
128
+ let colorFrom = {
129
+ backgroundColor: getInitialValue('backgroundColor', initial),
130
+ color: getInitialValue('color', initial),
131
+ borderColor: getInitialValue('borderColor', initial),
132
+ shadowColor: getInitialValue('shadowColor', initial),
133
+ };
138
134
  // Animation helper
139
135
  const animateToValues = (targetValues, transitionConfig = transition) => {
140
136
  Object.entries(targetValues).forEach(([key, value]) => {
141
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
137
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
142
138
  if (value !== undefined) {
143
- // Handle color properties with interpolation
144
- if (key === 'backgroundColor') {
145
- backgroundColorTo.current = value;
146
- const config = transitionConfig.type === 'spring'
147
- ? (0, react_native_reanimated_1.withSpring)(1, {
148
- damping: (_a = transitionConfig.damping) !== null && _a !== void 0 ? _a : DEFAULT_TRANSITION.damping,
149
- stiffness: (_b = transitionConfig.stiffness) !== null && _b !== void 0 ? _b : DEFAULT_TRANSITION.stiffness,
150
- })
151
- : (0, react_native_reanimated_1.withTiming)(1, { duration: (_c = transitionConfig.duration) !== null && _c !== void 0 ? _c : DEFAULT_TRANSITION.duration });
152
- backgroundColorProgress.value = config;
153
- return;
154
- }
155
- if (key === 'color') {
156
- colorTo.current = value;
157
- const config = transitionConfig.type === 'spring'
158
- ? (0, react_native_reanimated_1.withSpring)(1, {
159
- damping: (_d = transitionConfig.damping) !== null && _d !== void 0 ? _d : DEFAULT_TRANSITION.damping,
160
- stiffness: (_e = transitionConfig.stiffness) !== null && _e !== void 0 ? _e : DEFAULT_TRANSITION.stiffness,
161
- })
162
- : (0, react_native_reanimated_1.withTiming)(1, { duration: (_f = transitionConfig.duration) !== null && _f !== void 0 ? _f : DEFAULT_TRANSITION.duration });
163
- colorProgress.value = config;
164
- return;
165
- }
166
- if (key === 'borderColor') {
167
- borderColorTo.current = value;
168
- const config = transitionConfig.type === 'spring'
169
- ? (0, react_native_reanimated_1.withSpring)(1, {
170
- damping: (_g = transitionConfig.damping) !== null && _g !== void 0 ? _g : DEFAULT_TRANSITION.damping,
171
- stiffness: (_h = transitionConfig.stiffness) !== null && _h !== void 0 ? _h : DEFAULT_TRANSITION.stiffness,
172
- })
173
- : (0, react_native_reanimated_1.withTiming)(1, { duration: (_j = transitionConfig.duration) !== null && _j !== void 0 ? _j : DEFAULT_TRANSITION.duration });
174
- borderColorProgress.value = config;
175
- return;
176
- }
177
- if (key === 'shadowColor') {
178
- shadowColorTo.current = value;
179
- const config = transitionConfig.type === 'spring'
180
- ? (0, react_native_reanimated_1.withSpring)(1, {
181
- damping: (_k = transitionConfig.damping) !== null && _k !== void 0 ? _k : DEFAULT_TRANSITION.damping,
182
- stiffness: (_l = transitionConfig.stiffness) !== null && _l !== void 0 ? _l : DEFAULT_TRANSITION.stiffness,
183
- })
184
- : (0, react_native_reanimated_1.withTiming)(1, { duration: (_m = transitionConfig.duration) !== null && _m !== void 0 ? _m : DEFAULT_TRANSITION.duration });
185
- shadowColorProgress.value = config;
139
+ // Handle color properties
140
+ if (['backgroundColor', 'color', 'borderColor', 'shadowColor'].includes(key)) {
141
+ const progress = sharedValues[key];
142
+ // Capture current interpolated color as new 'from' value
143
+ const currentColor = (0, react_native_reanimated_1.interpolateColor)(progress.value, [0, 1], [colorFrom[key], sharedValues[`${key}To`].value]);
144
+ colorFrom[key] = currentColor;
145
+ sharedValues[`${key}To`].value = value;
146
+ progress.value = 0;
147
+ progress.value = (0, react_native_reanimated_1.withTiming)(1, {
148
+ duration: (_a = transitionConfig.duration) !== null && _a !== void 0 ? _a : DEFAULT_TRANSITION.duration,
149
+ });
186
150
  return;
187
151
  }
188
152
  // Handle non-color properties
189
153
  const sharedValue = getSharedValue(key);
190
154
  if (sharedValue) {
191
155
  let config;
192
- if (transitionConfig.repeat && (transitionConfig.repeat > 0 || transitionConfig.repeat === 'infinity')) {
156
+ if (transitionConfig.repeat &&
157
+ (transitionConfig.repeat > 0 || transitionConfig.repeat === 'infinity')) {
193
158
  const baseAnimation = transitionConfig.type === 'spring'
194
159
  ? (0, react_native_reanimated_1.withSpring)(value, {
195
- damping: (_o = transitionConfig.damping) !== null && _o !== void 0 ? _o : DEFAULT_TRANSITION.damping,
196
- stiffness: (_p = transitionConfig.stiffness) !== null && _p !== void 0 ? _p : DEFAULT_TRANSITION.stiffness,
197
- mass: (_q = transitionConfig.mass) !== null && _q !== void 0 ? _q : 1,
160
+ damping: (_b = transitionConfig.damping) !== null && _b !== void 0 ? _b : DEFAULT_TRANSITION.damping,
161
+ stiffness: (_c = transitionConfig.stiffness) !== null && _c !== void 0 ? _c : DEFAULT_TRANSITION.stiffness,
162
+ mass: (_d = transitionConfig.mass) !== null && _d !== void 0 ? _d : 1,
198
163
  })
199
164
  : (0, react_native_reanimated_1.withTiming)(value, {
200
- duration: (_r = transitionConfig.duration) !== null && _r !== void 0 ? _r : DEFAULT_TRANSITION.duration,
165
+ duration: (_e = transitionConfig.duration) !== null && _e !== void 0 ? _e : DEFAULT_TRANSITION.duration,
201
166
  easing: react_native_reanimated_1.Easing.linear,
202
167
  });
203
168
  const repeatCount = transitionConfig.repeat === 'infinity' ? -1 : transitionConfig.repeat;
@@ -205,15 +170,16 @@ function createMotionComponent(Component) {
205
170
  config = (0, react_native_reanimated_1.withRepeat)(baseAnimation, repeatCount, reverse);
206
171
  }
207
172
  else {
208
- config = transitionConfig.type === 'spring'
209
- ? (0, react_native_reanimated_1.withSpring)(value, {
210
- damping: (_s = transitionConfig.damping) !== null && _s !== void 0 ? _s : DEFAULT_TRANSITION.damping,
211
- stiffness: (_t = transitionConfig.stiffness) !== null && _t !== void 0 ? _t : DEFAULT_TRANSITION.stiffness,
212
- mass: (_u = transitionConfig.mass) !== null && _u !== void 0 ? _u : 1,
213
- })
214
- : (0, react_native_reanimated_1.withTiming)(value, {
215
- duration: (_v = transitionConfig.duration) !== null && _v !== void 0 ? _v : DEFAULT_TRANSITION.duration,
216
- });
173
+ config =
174
+ transitionConfig.type === 'spring'
175
+ ? (0, react_native_reanimated_1.withSpring)(value, {
176
+ damping: (_f = transitionConfig.damping) !== null && _f !== void 0 ? _f : DEFAULT_TRANSITION.damping,
177
+ stiffness: (_g = transitionConfig.stiffness) !== null && _g !== void 0 ? _g : DEFAULT_TRANSITION.stiffness,
178
+ mass: (_h = transitionConfig.mass) !== null && _h !== void 0 ? _h : 1,
179
+ })
180
+ : (0, react_native_reanimated_1.withTiming)(value, {
181
+ duration: (_j = transitionConfig.duration) !== null && _j !== void 0 ? _j : DEFAULT_TRANSITION.duration,
182
+ });
217
183
  }
218
184
  if (transitionConfig.delay) {
219
185
  setTimeout(() => {
@@ -229,341 +195,129 @@ function createMotionComponent(Component) {
229
195
  };
230
196
  // Get shared value by key
231
197
  const getSharedValue = (key) => {
232
- switch (key) {
233
- // Transform properties
234
- case 'opacity': return opacity;
235
- case 'x': return x;
236
- case 'y': return y;
237
- case 'z': return z;
238
- case 'translateX': return translateX;
239
- case 'translateY': return translateY;
240
- case 'scale': return scale;
241
- case 'scaleX': return scaleX;
242
- case 'scaleY': return scaleY;
243
- case 'rotate': return rotate;
244
- case 'rotateX': return rotateX;
245
- case 'rotateY': return rotateY;
246
- case 'rotateZ': return rotateZ;
247
- case 'skewX': return skewX;
248
- case 'skewY': return skewY;
249
- // Layout properties
250
- case 'width': return width;
251
- case 'height': return height;
252
- case 'minWidth': return minWidth;
253
- case 'minHeight': return minHeight;
254
- case 'maxWidth': return maxWidth;
255
- case 'maxHeight': return maxHeight;
256
- // Spacing properties
257
- case 'margin': return margin;
258
- case 'marginTop': return marginTop;
259
- case 'marginBottom': return marginBottom;
260
- case 'marginLeft': return marginLeft;
261
- case 'marginRight': return marginRight;
262
- case 'marginHorizontal': return marginHorizontal;
263
- case 'marginVertical': return marginVertical;
264
- case 'padding': return padding;
265
- case 'paddingTop': return paddingTop;
266
- case 'paddingBottom': return paddingBottom;
267
- case 'paddingLeft': return paddingLeft;
268
- case 'paddingRight': return paddingRight;
269
- case 'paddingHorizontal': return paddingHorizontal;
270
- case 'paddingVertical': return paddingVertical;
271
- // Border properties
272
- case 'borderRadius': return borderRadius;
273
- case 'borderTopLeftRadius': return borderTopLeftRadius;
274
- case 'borderTopRightRadius': return borderTopRightRadius;
275
- case 'borderBottomLeftRadius': return borderBottomLeftRadius;
276
- case 'borderBottomRightRadius': return borderBottomRightRadius;
277
- case 'borderWidth': return borderWidth;
278
- case 'borderTopWidth': return borderTopWidth;
279
- case 'borderBottomWidth': return borderBottomWidth;
280
- case 'borderLeftWidth': return borderLeftWidth;
281
- case 'borderRightWidth': return borderRightWidth;
282
- case 'borderTopColor': return borderTopColor;
283
- case 'borderBottomColor': return borderBottomColor;
284
- case 'borderLeftColor': return borderLeftColor;
285
- case 'borderRightColor': return borderRightColor;
286
- // Position properties
287
- case 'top': return top;
288
- case 'bottom': return bottom;
289
- case 'left': return left;
290
- case 'right': return right;
291
- // Shadow properties
292
- case 'shadowOpacity': return shadowOpacity;
293
- case 'shadowRadius': return shadowRadius;
294
- case 'elevation': return elevation;
295
- default: return null;
296
- }
198
+ return sharedValues[key];
297
199
  };
298
200
  // Set initial values on mount
299
201
  (0, react_1.useEffect)(() => {
300
202
  if (initial !== false) {
301
203
  Object.entries(initial).forEach(([key, value]) => {
302
- const sharedValue = getSharedValue(key);
303
- if (sharedValue && value !== undefined) {
304
- sharedValue.value = value;
204
+ const ExtractedsharedValue = sharedValues[key];
205
+ if (ExtractedsharedValue && value !== undefined) {
206
+ ExtractedsharedValue.value = value;
305
207
  }
306
208
  });
307
209
  }
308
210
  }, []);
309
211
  // Handle shouldAnimate: initial -> animate
310
212
  (0, react_1.useEffect)(() => {
311
- if (shouldAnimate) {
312
- // Reset color progress and update from/to values
313
- if (animate.backgroundColor) {
314
- backgroundColorFrom.current = backgroundColorTo.current;
315
- backgroundColorProgress.value = 0;
316
- }
317
- if (animate.color) {
318
- colorFrom.current = colorTo.current;
319
- colorProgress.value = 0;
320
- }
321
- if (animate.borderColor) {
322
- borderColorFrom.current = borderColorTo.current;
323
- borderColorProgress.value = 0;
324
- }
325
- if (animate.shadowColor) {
326
- shadowColorFrom.current = shadowColorTo.current;
327
- shadowColorProgress.value = 0;
328
- }
329
- animateToValues(animate);
330
- }
331
- }, [shouldAnimate]);
332
- // Handle shouldDeAnimate: animate -> initial
333
- (0, react_1.useEffect)(() => {
334
- if (shouldDeAnimate && initial !== false) {
335
- const initialProps = initial;
336
- // Reset color progress and update from/to values
337
- if (initialProps.backgroundColor) {
338
- backgroundColorFrom.current = backgroundColorTo.current;
339
- backgroundColorTo.current = initialProps.backgroundColor;
340
- backgroundColorProgress.value = 0;
341
- }
342
- if (initialProps.color) {
343
- colorFrom.current = colorTo.current;
344
- colorTo.current = initialProps.color;
345
- colorProgress.value = 0;
346
- }
347
- if (initialProps.borderColor) {
348
- borderColorFrom.current = borderColorTo.current;
349
- borderColorTo.current = initialProps.borderColor;
350
- borderColorProgress.value = 0;
351
- }
352
- if (initialProps.shadowColor) {
353
- shadowColorFrom.current = shadowColorTo.current;
354
- shadowColorTo.current = initialProps.shadowColor;
355
- shadowColorProgress.value = 0;
356
- }
357
- animateToValues(initialProps);
358
- }
359
- }, [shouldDeAnimate]);
360
- // Handle shouldExit: animate -> exit (no unmount)
361
- (0, react_1.useEffect)(() => {
362
- var _a;
363
- if (shouldExit && exit && Object.keys(exit).length > 0) {
364
- // Reset color progress and update from/to values
365
- if (exit.backgroundColor) {
366
- backgroundColorFrom.current = backgroundColorTo.current;
367
- backgroundColorTo.current = exit.backgroundColor;
368
- backgroundColorProgress.value = 0;
369
- }
370
- if (exit.color) {
371
- colorFrom.current = colorTo.current;
372
- colorTo.current = exit.color;
373
- colorProgress.value = 0;
374
- }
375
- if (exit.borderColor) {
376
- borderColorFrom.current = borderColorTo.current;
377
- borderColorTo.current = exit.borderColor;
378
- borderColorProgress.value = 0;
379
- }
380
- if (exit.shadowColor) {
381
- shadowColorFrom.current = shadowColorTo.current;
382
- shadowColorTo.current = exit.shadowColor;
383
- shadowColorProgress.value = 0;
384
- }
385
- animateToValues(exit, transition);
386
- if (onExitComplete) {
387
- const exitDuration = (_a = transition.duration) !== null && _a !== void 0 ? _a : 300;
388
- setTimeout(() => {
389
- onExitComplete();
390
- }, exitDuration);
391
- }
392
- }
393
- }, [shouldExit]);
213
+ animateToValues(animate, transition);
214
+ }, [animate]);
394
215
  // Animated style
395
216
  const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
396
217
  const style = {};
397
218
  const transform = [];
398
- // Transform properties
399
- style.opacity = opacity.value;
400
- if (x.value !== 0)
401
- transform.push({ translateX: x.value });
402
- if (y.value !== 0)
403
- transform.push({ translateY: y.value });
404
- if (z.value !== 0)
405
- transform.push({ translateZ: z.value });
406
- if (translateX.value !== 0)
407
- transform.push({ translateX: translateX.value });
408
- if (translateY.value !== 0)
409
- transform.push({ translateY: translateY.value });
410
- if (scale.value !== 1)
411
- transform.push({ scale: scale.value });
412
- if (scaleX.value !== 1)
413
- transform.push({ scaleX: scaleX.value });
414
- if (scaleY.value !== 1)
415
- transform.push({ scaleY: scaleY.value });
416
- if (rotate.value !== '0deg')
417
- transform.push({ rotate: rotate.value });
418
- if (rotateX.value !== '0deg')
419
- transform.push({ rotateX: rotateX.value });
420
- if (rotateY.value !== '0deg')
421
- transform.push({ rotateY: rotateY.value });
422
- if (rotateZ.value !== '0deg')
423
- transform.push({ rotateZ: rotateZ.value });
424
- if (skewX.value !== '0deg')
425
- transform.push({ skewX: skewX.value });
426
- if (skewY.value !== '0deg')
427
- transform.push({ skewY: skewY.value });
219
+ const passedProps = Object.assign(Object.assign({}, (initial !== false ? initial : {})), animate);
220
+ Object.entries(passedProps).forEach(([key, value]) => {
221
+ const sharedValue = sharedValues[key];
222
+ if ([
223
+ 'translateX',
224
+ 'translateY',
225
+ 'scale',
226
+ 'scaleX',
227
+ 'scaleY',
228
+ 'rotate',
229
+ 'rotateX',
230
+ 'rotateY',
231
+ 'rotateZ',
232
+ 'skewX',
233
+ 'skewY',
234
+ ].includes(key)) {
235
+ transform.push({ [key]: sharedValue.value });
236
+ }
237
+ else if (['borderColor', 'backgroundColor', 'color', 'shadowColor'].includes(key)) {
238
+ style[key] = (0, react_native_reanimated_1.interpolateColor)(sharedValue.value, [0, 1], [colorFrom[key], sharedValues[`${key}To`].value]);
239
+ }
240
+ else {
241
+ style[key] = sharedValue.value;
242
+ }
243
+ });
244
+ // Position properties
428
245
  if (transform.length > 0)
429
246
  style.transform = transform;
430
- // Layout properties
431
- if (width.value !== 0)
432
- style.width = width.value;
433
- if (height.value !== 0)
434
- style.height = height.value;
435
- if (minWidth.value !== 0)
436
- style.minWidth = minWidth.value;
437
- if (minHeight.value !== 0)
438
- style.minHeight = minHeight.value;
439
- if (maxWidth.value !== 0)
440
- style.maxWidth = maxWidth.value;
441
- if (maxHeight.value !== 0)
442
- style.maxHeight = maxHeight.value;
443
- // Spacing properties
444
- if (margin.value !== 0)
445
- style.margin = margin.value;
446
- if (marginTop.value !== 0)
447
- style.marginTop = marginTop.value;
448
- if (marginBottom.value !== 0)
449
- style.marginBottom = marginBottom.value;
450
- if (marginLeft.value !== 0)
451
- style.marginLeft = marginLeft.value;
452
- if (marginRight.value !== 0)
453
- style.marginRight = marginRight.value;
454
- if (marginHorizontal.value !== 0)
455
- style.marginHorizontal = marginHorizontal.value;
456
- if (marginVertical.value !== 0)
457
- style.marginVertical = marginVertical.value;
458
- if (padding.value !== 0)
459
- style.padding = padding.value;
460
- if (paddingTop.value !== 0)
461
- style.paddingTop = paddingTop.value;
462
- if (paddingBottom.value !== 0)
463
- style.paddingBottom = paddingBottom.value;
464
- if (paddingLeft.value !== 0)
465
- style.paddingLeft = paddingLeft.value;
466
- if (paddingRight.value !== 0)
467
- style.paddingRight = paddingRight.value;
468
- if (paddingHorizontal.value !== 0)
469
- style.paddingHorizontal = paddingHorizontal.value;
470
- if (paddingVertical.value !== 0)
471
- style.paddingVertical = paddingVertical.value;
472
- // Border properties
473
- if (borderRadius.value !== 0)
474
- style.borderRadius = borderRadius.value;
475
- if (borderTopLeftRadius.value !== 0)
476
- style.borderTopLeftRadius = borderTopLeftRadius.value;
477
- if (borderTopRightRadius.value !== 0)
478
- style.borderTopRightRadius = borderTopRightRadius.value;
479
- if (borderBottomLeftRadius.value !== 0)
480
- style.borderBottomLeftRadius = borderBottomLeftRadius.value;
481
- if (borderBottomRightRadius.value !== 0)
482
- style.borderBottomRightRadius = borderBottomRightRadius.value;
483
- if (borderWidth.value !== 0)
484
- style.borderWidth = borderWidth.value;
485
- if (borderTopWidth.value !== 0)
486
- style.borderTopWidth = borderTopWidth.value;
487
- if (borderBottomWidth.value !== 0)
488
- style.borderBottomWidth = borderBottomWidth.value;
489
- if (borderLeftWidth.value !== 0)
490
- style.borderLeftWidth = borderLeftWidth.value;
491
- if (borderRightWidth.value !== 0)
492
- style.borderRightWidth = borderRightWidth.value;
493
- style.borderColor = (0, react_native_reanimated_1.interpolateColor)(borderColorProgress.value, [0, 1], [borderColorFrom.current, borderColorTo.current]);
494
- if (borderTopColor.value !== 'transparent')
495
- style.borderTopColor = borderTopColor.value;
496
- if (borderBottomColor.value !== 'transparent')
497
- style.borderBottomColor = borderBottomColor.value;
498
- if (borderLeftColor.value !== 'transparent')
499
- style.borderLeftColor = borderLeftColor.value;
500
- if (borderRightColor.value !== 'transparent')
501
- style.borderRightColor = borderRightColor.value;
502
- // Color properties with interpolation
503
- style.backgroundColor = (0, react_native_reanimated_1.interpolateColor)(backgroundColorProgress.value, [0, 1], [backgroundColorFrom.current, backgroundColorTo.current]);
504
- style.color = (0, react_native_reanimated_1.interpolateColor)(colorProgress.value, [0, 1], [colorFrom.current, colorTo.current]);
505
- // Position properties
506
- if (top.value !== 0)
507
- style.top = top.value;
508
- if (bottom.value !== 0)
509
- style.bottom = bottom.value;
510
- if (left.value !== 0)
511
- style.left = left.value;
512
- if (right.value !== 0)
513
- style.right = right.value;
514
- // Shadow properties
515
- style.shadowColor = (0, react_native_reanimated_1.interpolateColor)(shadowColorProgress.value, [0, 1], [shadowColorFrom.current, shadowColorTo.current]);
516
- if (shadowOpacity.value !== 0)
517
- style.shadowOpacity = shadowOpacity.value;
518
- if (shadowRadius.value !== 0)
519
- style.shadowRadius = shadowRadius.value;
520
- if (elevation.value !== 0)
521
- style.elevation = elevation.value;
522
247
  return style;
523
248
  });
524
249
  const AnimatedComponent = react_native_reanimated_1.default.createAnimatedComponent(Component);
525
- return react_1.default.createElement(AnimatedComponent, Object.assign({ style: [style, animatedStyle] }, rest), children);
250
+ return react_1.default.createElement(AnimatedComponent, Object.assign({ style: [styles, animatedStyle] }, rest), children);
526
251
  };
527
252
  }
528
253
  function getInitialValue(key, initial) {
529
254
  if (initial === false) {
530
- return getDefaultValue(key);
255
+ const initValue = getDefaultValue(key);
256
+ return initValue;
531
257
  }
532
258
  const value = initial[key];
533
259
  return value !== undefined ? value : getDefaultValue(key);
534
260
  }
535
261
  function getDefaultValue(key) {
536
- switch (key) {
537
- case 'opacity':
538
- case 'scale':
539
- case 'scaleX':
540
- case 'scaleY':
541
- return 1;
542
- case 'x':
543
- case 'y':
544
- case 'z':
545
- case 'translateX':
546
- case 'translateY':
547
- return 0;
548
- case 'rotate':
549
- case 'rotateX':
550
- case 'rotateY':
551
- case 'rotateZ':
552
- case 'skewX':
553
- case 'skewY':
554
- return '0deg';
555
- case 'backgroundColor':
556
- case 'color':
557
- case 'borderColor':
558
- case 'borderTopColor':
559
- case 'borderBottomColor':
560
- case 'borderLeftColor':
561
- case 'borderRightColor':
562
- case 'shadowColor':
563
- return 'transparent';
564
- default:
565
- return 0;
566
- }
262
+ const defaultValues = {
263
+ opacity: 1,
264
+ scale: 1,
265
+ scaleX: 1,
266
+ scaleY: 1,
267
+ x: 0,
268
+ y: 0,
269
+ z: 0,
270
+ translateX: 0,
271
+ translateY: 0,
272
+ rotate: '0deg',
273
+ rotateX: '0deg',
274
+ rotateY: '0deg',
275
+ rotateZ: '0deg',
276
+ skewX: '0deg',
277
+ skewY: '0deg',
278
+ backgroundColor: 'transparent',
279
+ color: 'transparent',
280
+ borderColor: 'transparent',
281
+ borderTopColor: 'transparent',
282
+ borderBottomColor: 'transparent',
283
+ borderLeftColor: 'transparent',
284
+ borderRightColor: 'transparent',
285
+ shadowColor: 'transparent',
286
+ shadowOpacity: 0,
287
+ shadowRadius: 0,
288
+ elevation: 0,
289
+ width: 0,
290
+ height: 0,
291
+ margin: 0,
292
+ marginTop: 0,
293
+ marginBottom: 0,
294
+ marginLeft: 0,
295
+ marginRight: 0,
296
+ marginHorizontal: 0,
297
+ marginVertical: 0,
298
+ padding: 0,
299
+ paddingTop: 0,
300
+ paddingBottom: 0,
301
+ paddingLeft: 0,
302
+ paddingRight: 0,
303
+ paddingHorizontal: 0,
304
+ paddingVertical: 0,
305
+ borderRadius: 0,
306
+ borderTopLeftRadius: 0,
307
+ borderTopRightRadius: 0,
308
+ borderBottomLeftRadius: 0,
309
+ borderBottomRightRadius: 0,
310
+ borderWidth: 0,
311
+ borderTopWidth: 0,
312
+ borderBottomWidth: 0,
313
+ borderLeftWidth: 0,
314
+ borderRightWidth: 0,
315
+ top: 0,
316
+ bottom: 0,
317
+ left: 0,
318
+ right: 0,
319
+ };
320
+ return defaultValues[key];
567
321
  }
568
322
  exports.NativeMotion = {
569
323
  View: createMotionComponent(react_native_1.View),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "motion-on-native",
3
- "version": "1.3.0",
3
+ "version": "1.5.0",
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",