motion-on-native 1.2.8 → 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 +87 -26
  2. package/lib/index.d.ts +11 -24
  3. package/lib/index.js +199 -380
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -23,25 +23,13 @@ This package requires:
23
23
  ```tsx
24
24
  import { NativeMotion } from 'motion-on-native';
25
25
 
26
- // Basic animation
27
26
  <NativeMotion.View
28
- initial={{ opacity: 0, x: -100 }}
29
- animate={{ opacity: 1, x: 0 }}
30
- transition={{ type: 'spring', damping: 15 }}
27
+ initial={{ opacity: 0, translateX: -100 }}
28
+ animate={{ opacity: 1, translateX: 0 }}
29
+ transition={{ type: 'spring', damping: 15, stiffness: 100 }}
31
30
  >
32
31
  <Text>Animated content</Text>
33
- </NativeMotion.View>
34
-
35
- // Exit animation
36
- <NativeMotion.View
37
- initial={{ opacity: 0, scale: 0.5 }}
38
- animate={{ opacity: 1, scale: 1 }}
39
- exit={{ opacity: 0, scale: 0 }}
40
- shouldExit={shouldHide}
41
- onExitComplete={() => console.log('Animation complete')}
42
- >
43
- <Text>Content with exit animation</Text>
44
- </NativeMotion.View>
32
+ </NativeMotion.View>;
45
33
  ```
46
34
 
47
35
  ## Components
@@ -49,32 +37,105 @@ import { NativeMotion } from 'motion-on-native';
49
37
  - `NativeMotion.View`
50
38
  - `NativeMotion.Text`
51
39
  - `NativeMotion.Image`
40
+ - `NativeMotion.ImageBackground`
52
41
  - `NativeMotion.TextInput`
53
42
  - `NativeMotion.TouchableOpacity`
43
+ - `NativeMotion.ScrollView`
44
+ - `NativeMotion.FlatList`
45
+ - `NativeMotion.SectionList`
46
+ - `NativeMotion.Pressable`
47
+
48
+ ## Props
49
+
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
54
55
 
55
56
  ## Animation Properties
56
57
 
58
+ ### Transform
59
+
57
60
  - `opacity`: 0-1
58
- - `x`, `y`: translation in pixels
59
- - `scale`: size multiplier
60
- - `rotate`: rotation (e.g., '45deg')
61
- - `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
+
62
72
  - `margin`, `marginTop`, `marginBottom`, `marginLeft`, `marginRight`
73
+ - `marginHorizontal`, `marginVertical`
63
74
  - `padding`, `paddingTop`, `paddingBottom`, `paddingLeft`, `paddingRight`
64
- - `borderRadius`, `borderWidth`, `borderColor`
65
- - `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
+
66
90
  - `top`, `bottom`, `left`, `right`: positioning
67
91
 
68
- ## Transition Types
92
+ ### Shadow (iOS)
93
+
94
+ - `shadowColor`, `shadowOpacity`, `shadowRadius`
95
+
96
+ ### Elevation (Android)
97
+
98
+ - `elevation`: shadow depth
99
+
100
+ ## Transition Configuration
69
101
 
70
102
  ```tsx
71
- // Spring animation
72
- 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
+ }}
73
110
 
74
111
  // Timing animation
75
- 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
+ }}
76
125
  ```
77
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
+
78
139
  ## License
79
140
 
80
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,25 +67,23 @@ export interface MotionComponentProps {
78
67
  animate?: AnimationProps;
79
68
  exit?: AnimationProps;
80
69
  transition?: TransitionProps;
81
- shouldExit?: boolean;
82
- onExitComplete?: () => void;
83
70
  whileHover?: AnimationProps;
84
71
  whileTap?: AnimationProps;
85
72
  whileFocus?: AnimationProps;
86
73
  layout?: boolean;
87
74
  layoutId?: string;
88
- style?: ViewStyle;
75
+ styles?: ViewStyle;
89
76
  children?: React.ReactNode;
90
77
  }
91
78
  export declare const NativeMotion: {
92
- View: (props: MotionComponentProps & import("react-native").ViewProps) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>> | null;
93
- Text: (props: MotionComponentProps & import("react-native").TextProps) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>> | null;
94
- Image: (props: MotionComponentProps & import("react-native").ImageProps) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>> | null;
95
- ImageBackground: (props: MotionComponentProps & import("react-native").ImageBackgroundProps) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>> | null;
96
- TextInput: (props: MotionComponentProps & import("react-native").TextInputProps) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>> | null;
97
- TouchableOpacity: (props: MotionComponentProps & import("react-native").TouchableOpacityProps & React.RefAttributes<View>) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>> | null;
98
- ScrollView: (props: MotionComponentProps & import("react-native").ScrollViewProps) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>> | null;
99
- FlatList: (props: MotionComponentProps & import("react-native").FlatListProps<unknown>) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>> | null;
100
- SectionList: (props: MotionComponentProps & import("react-native").SectionListProps<unknown, unknown>) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>> | null;
101
- Pressable: (props: MotionComponentProps & import("react-native").PressableProps & React.RefAttributes<View>) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>> | null;
79
+ View: (props: MotionComponentProps & import("react-native").ViewProps) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>>;
80
+ Text: (props: MotionComponentProps & import("react-native").TextProps) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>>;
81
+ Image: (props: MotionComponentProps & import("react-native").ImageProps) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>>;
82
+ ImageBackground: (props: MotionComponentProps & import("react-native").ImageBackgroundProps) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>>;
83
+ TextInput: (props: MotionComponentProps & import("react-native").TextInputProps) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>>;
84
+ TouchableOpacity: (props: MotionComponentProps & import("react-native").TouchableOpacityProps & React.RefAttributes<View>) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>>;
85
+ ScrollView: (props: MotionComponentProps & import("react-native").ScrollViewProps) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>>;
86
+ FlatList: (props: MotionComponentProps & import("react-native").FlatListProps<unknown>) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>>;
87
+ SectionList: (props: MotionComponentProps & import("react-native").SectionListProps<unknown, unknown>) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>>;
88
+ Pressable: (props: MotionComponentProps & import("react-native").PressableProps & React.RefAttributes<View>) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>>;
102
89
  };
package/lib/index.js CHANGED
@@ -58,95 +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, shouldExit = false, onExitComplete, whileHover, whileTap, whileFocus, layout, layoutId, style = {}, children } = props, rest = __rest(props, ["initial", "animate", "exit", "transition", "shouldExit", "onExitComplete", "whileHover", "whileTap", "whileFocus", "layout", "layoutId", "style", "children"]);
62
- const [isPresent, setIsPresent] = (0, react_1.useState)(true);
63
- const [hasAnimated, setHasAnimated] = (0, react_1.useState)(false);
64
- const isExitingRef = (0, react_1.useRef)(false);
65
- // Create shared values
66
- const opacity = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('opacity', initial));
67
- const x = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('x', initial));
68
- const y = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('y', initial));
69
- const z = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('z', initial));
70
- const translateX = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('translateX', initial));
71
- const translateY = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('translateY', initial));
72
- const scale = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('scale', initial));
73
- const scaleX = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('scaleX', initial));
74
- const scaleY = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('scaleY', initial));
75
- const rotate = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('rotate', initial));
76
- const rotateX = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('rotateX', initial));
77
- const rotateY = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('rotateY', initial));
78
- const rotateZ = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('rotateZ', initial));
79
- const skewX = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('skewX', initial));
80
- const skewY = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('skewY', initial));
81
- // Layout properties
82
- const width = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('width', initial));
83
- const height = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('height', initial));
84
- const minWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('minWidth', initial));
85
- const minHeight = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('minHeight', initial));
86
- const maxWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('maxWidth', initial));
87
- const maxHeight = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('maxHeight', initial));
88
- // Spacing properties
89
- const margin = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('margin', initial));
90
- const marginTop = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('marginTop', initial));
91
- const marginBottom = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('marginBottom', initial));
92
- const marginLeft = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('marginLeft', initial));
93
- const marginRight = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('marginRight', initial));
94
- const marginHorizontal = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('marginHorizontal', initial));
95
- const marginVertical = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('marginVertical', initial));
96
- const padding = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('padding', initial));
97
- const paddingTop = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('paddingTop', initial));
98
- const paddingBottom = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('paddingBottom', initial));
99
- const paddingLeft = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('paddingLeft', initial));
100
- const paddingRight = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('paddingRight', initial));
101
- const paddingHorizontal = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('paddingHorizontal', initial));
102
- const paddingVertical = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('paddingVertical', initial));
103
- // Border properties
104
- const borderRadius = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderRadius', initial));
105
- const borderTopLeftRadius = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderTopLeftRadius', initial));
106
- const borderTopRightRadius = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderTopRightRadius', initial));
107
- const borderBottomLeftRadius = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderBottomLeftRadius', initial));
108
- const borderBottomRightRadius = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderBottomRightRadius', initial));
109
- const borderWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderWidth', initial));
110
- const borderTopWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderTopWidth', initial));
111
- const borderBottomWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderBottomWidth', initial));
112
- const borderLeftWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderLeftWidth', initial));
113
- const borderRightWidth = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderRightWidth', initial));
114
- const borderColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderColor', initial));
115
- const borderTopColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderTopColor', initial));
116
- const borderBottomColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderBottomColor', initial));
117
- const borderLeftColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderLeftColor', initial));
118
- const borderRightColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('borderRightColor', initial));
119
- // Color properties
120
- const backgroundColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('backgroundColor', initial));
121
- const color = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('color', initial));
122
- // Position properties
123
- const top = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('top', initial));
124
- const bottom = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('bottom', initial));
125
- const left = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('left', initial));
126
- const right = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('right', initial));
127
- // Shadow properties
128
- const shadowColor = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('shadowColor', initial));
129
- const shadowOpacity = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('shadowOpacity', initial));
130
- const shadowRadius = (0, react_native_reanimated_1.useSharedValue)(getInitialValue('shadowRadius', initial));
131
- 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
+ };
132
134
  // Animation helper
133
135
  const animateToValues = (targetValues, transitionConfig = transition) => {
134
136
  Object.entries(targetValues).forEach(([key, value]) => {
135
- var _a, _b, _c, _d, _e, _f, _g, _h;
137
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
136
138
  if (value !== undefined) {
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
+ });
150
+ return;
151
+ }
152
+ // Handle non-color properties
137
153
  const sharedValue = getSharedValue(key);
138
154
  if (sharedValue) {
139
155
  let config;
140
- if (transitionConfig.repeat && (transitionConfig.repeat > 0 || transitionConfig.repeat === 'infinity')) {
141
- // Use withRepeat for repeated animations
156
+ if (transitionConfig.repeat &&
157
+ (transitionConfig.repeat > 0 || transitionConfig.repeat === 'infinity')) {
142
158
  const baseAnimation = transitionConfig.type === 'spring'
143
159
  ? (0, react_native_reanimated_1.withSpring)(value, {
144
- damping: (_a = transitionConfig.damping) !== null && _a !== void 0 ? _a : DEFAULT_TRANSITION.damping,
145
- stiffness: (_b = transitionConfig.stiffness) !== null && _b !== void 0 ? _b : DEFAULT_TRANSITION.stiffness,
146
- mass: (_c = transitionConfig.mass) !== null && _c !== void 0 ? _c : 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,
147
163
  })
148
164
  : (0, react_native_reanimated_1.withTiming)(value, {
149
- duration: (_d = transitionConfig.duration) !== null && _d !== void 0 ? _d : DEFAULT_TRANSITION.duration,
165
+ duration: (_e = transitionConfig.duration) !== null && _e !== void 0 ? _e : DEFAULT_TRANSITION.duration,
150
166
  easing: react_native_reanimated_1.Easing.linear,
151
167
  });
152
168
  const repeatCount = transitionConfig.repeat === 'infinity' ? -1 : transitionConfig.repeat;
@@ -154,16 +170,16 @@ function createMotionComponent(Component) {
154
170
  config = (0, react_native_reanimated_1.withRepeat)(baseAnimation, repeatCount, reverse);
155
171
  }
156
172
  else {
157
- // Single animation
158
- config = transitionConfig.type === 'spring'
159
- ? (0, react_native_reanimated_1.withSpring)(value, {
160
- damping: (_e = transitionConfig.damping) !== null && _e !== void 0 ? _e : DEFAULT_TRANSITION.damping,
161
- stiffness: (_f = transitionConfig.stiffness) !== null && _f !== void 0 ? _f : DEFAULT_TRANSITION.stiffness,
162
- mass: (_g = transitionConfig.mass) !== null && _g !== void 0 ? _g : 1,
163
- })
164
- : (0, react_native_reanimated_1.withTiming)(value, {
165
- duration: (_h = transitionConfig.duration) !== null && _h !== void 0 ? _h : DEFAULT_TRANSITION.duration,
166
- });
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
+ });
167
183
  }
168
184
  if (transitionConfig.delay) {
169
185
  setTimeout(() => {
@@ -179,326 +195,129 @@ function createMotionComponent(Component) {
179
195
  };
180
196
  // Get shared value by key
181
197
  const getSharedValue = (key) => {
182
- switch (key) {
183
- // Transform properties
184
- case 'opacity': return opacity;
185
- case 'x': return x;
186
- case 'y': return y;
187
- case 'z': return z;
188
- case 'translateX': return translateX;
189
- case 'translateY': return translateY;
190
- case 'scale': return scale;
191
- case 'scaleX': return scaleX;
192
- case 'scaleY': return scaleY;
193
- case 'rotate': return rotate;
194
- case 'rotateX': return rotateX;
195
- case 'rotateY': return rotateY;
196
- case 'rotateZ': return rotateZ;
197
- case 'skewX': return skewX;
198
- case 'skewY': return skewY;
199
- // Layout properties
200
- case 'width': return width;
201
- case 'height': return height;
202
- case 'minWidth': return minWidth;
203
- case 'minHeight': return minHeight;
204
- case 'maxWidth': return maxWidth;
205
- case 'maxHeight': return maxHeight;
206
- // Spacing properties
207
- case 'margin': return margin;
208
- case 'marginTop': return marginTop;
209
- case 'marginBottom': return marginBottom;
210
- case 'marginLeft': return marginLeft;
211
- case 'marginRight': return marginRight;
212
- case 'marginHorizontal': return marginHorizontal;
213
- case 'marginVertical': return marginVertical;
214
- case 'padding': return padding;
215
- case 'paddingTop': return paddingTop;
216
- case 'paddingBottom': return paddingBottom;
217
- case 'paddingLeft': return paddingLeft;
218
- case 'paddingRight': return paddingRight;
219
- case 'paddingHorizontal': return paddingHorizontal;
220
- case 'paddingVertical': return paddingVertical;
221
- // Border properties
222
- case 'borderRadius': return borderRadius;
223
- case 'borderTopLeftRadius': return borderTopLeftRadius;
224
- case 'borderTopRightRadius': return borderTopRightRadius;
225
- case 'borderBottomLeftRadius': return borderBottomLeftRadius;
226
- case 'borderBottomRightRadius': return borderBottomRightRadius;
227
- case 'borderWidth': return borderWidth;
228
- case 'borderTopWidth': return borderTopWidth;
229
- case 'borderBottomWidth': return borderBottomWidth;
230
- case 'borderLeftWidth': return borderLeftWidth;
231
- case 'borderRightWidth': return borderRightWidth;
232
- case 'borderColor': return borderColor;
233
- case 'borderTopColor': return borderTopColor;
234
- case 'borderBottomColor': return borderBottomColor;
235
- case 'borderLeftColor': return borderLeftColor;
236
- case 'borderRightColor': return borderRightColor;
237
- // Color properties
238
- case 'backgroundColor': return backgroundColor;
239
- case 'color': return color;
240
- // Position properties
241
- case 'top': return top;
242
- case 'bottom': return bottom;
243
- case 'left': return left;
244
- case 'right': return right;
245
- // Shadow properties
246
- case 'shadowColor': return shadowColor;
247
- case 'shadowOpacity': return shadowOpacity;
248
- case 'shadowRadius': return shadowRadius;
249
- case 'elevation': return elevation;
250
- default: return null;
251
- }
198
+ return sharedValues[key];
252
199
  };
253
- // Memoize animate prop to prevent unnecessary re-animations
254
- const animateString = JSON.stringify(animate);
255
- const memoizedAnimate = (0, react_1.useMemo)(() => animate, [animateString]);
256
200
  // Set initial values on mount
257
201
  (0, react_1.useEffect)(() => {
258
202
  if (initial !== false) {
259
203
  Object.entries(initial).forEach(([key, value]) => {
260
- const sharedValue = getSharedValue(key);
261
- if (sharedValue && value !== undefined) {
262
- sharedValue.value = value;
204
+ const ExtractedsharedValue = sharedValues[key];
205
+ if (ExtractedsharedValue && value !== undefined) {
206
+ ExtractedsharedValue.value = value;
263
207
  }
264
208
  });
265
209
  }
266
210
  }, []);
267
- // Mount animation: initial -> animate
268
- (0, react_1.useEffect)(() => {
269
- if (!hasAnimated && !isExitingRef.current) {
270
- // Animate to target values
271
- const timer = setTimeout(() => {
272
- if (!isExitingRef.current) {
273
- animateToValues(memoizedAnimate);
274
- setHasAnimated(true);
275
- }
276
- }, 16);
277
- return () => clearTimeout(timer);
278
- }
279
- return undefined;
280
- }, [memoizedAnimate]);
281
- // Handle animate prop changes (only animate if values actually changed)
282
- const prevAnimateRef = (0, react_1.useRef)(memoizedAnimate);
283
- (0, react_1.useEffect)(() => {
284
- if (hasAnimated && !isExitingRef.current) {
285
- // Only animate if animate prop actually changed
286
- const hasChanged = JSON.stringify(prevAnimateRef.current) !== JSON.stringify(memoizedAnimate);
287
- if (hasChanged) {
288
- animateToValues(memoizedAnimate);
289
- prevAnimateRef.current = memoizedAnimate;
290
- }
291
- }
292
- }, [memoizedAnimate]);
293
- // Handle shouldExit
211
+ // Handle shouldAnimate: initial -> animate
294
212
  (0, react_1.useEffect)(() => {
295
- var _a;
296
- if (shouldExit && !isExitingRef.current && exit && Object.keys(exit).length > 0) {
297
- isExitingRef.current = true;
298
- animateToValues(exit, transition);
299
- const exitDuration = (_a = transition.duration) !== null && _a !== void 0 ? _a : 300;
300
- setTimeout(() => {
301
- setIsPresent(false);
302
- if (onExitComplete) {
303
- onExitComplete();
304
- }
305
- }, exitDuration);
306
- }
307
- else if (!shouldExit && isExitingRef.current) {
308
- // Re-entering: reset everything
309
- isExitingRef.current = false;
310
- setIsPresent(true);
311
- setHasAnimated(false);
312
- // Reset to initial values and animate
313
- setTimeout(() => {
314
- if (initial !== false) {
315
- Object.entries(initial).forEach(([key, value]) => {
316
- const sharedValue = getSharedValue(key);
317
- if (sharedValue && value !== undefined) {
318
- sharedValue.value = value;
319
- }
320
- });
321
- }
322
- // Animate to target after a frame
323
- setTimeout(() => {
324
- if (!isExitingRef.current) {
325
- animateToValues(memoizedAnimate);
326
- setHasAnimated(true);
327
- }
328
- }, 16);
329
- }, 0);
330
- }
331
- }, [shouldExit]);
213
+ animateToValues(animate, transition);
214
+ }, [animate]);
332
215
  // Animated style
333
216
  const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
334
217
  const style = {};
335
218
  const transform = [];
336
- // Transform properties
337
- style.opacity = opacity.value;
338
- if (x.value !== 0)
339
- transform.push({ translateX: x.value });
340
- if (y.value !== 0)
341
- transform.push({ translateY: y.value });
342
- if (z.value !== 0)
343
- transform.push({ translateZ: z.value });
344
- if (translateX.value !== 0)
345
- transform.push({ translateX: translateX.value });
346
- if (translateY.value !== 0)
347
- transform.push({ translateY: translateY.value });
348
- if (scale.value !== 1)
349
- transform.push({ scale: scale.value });
350
- if (scaleX.value !== 1)
351
- transform.push({ scaleX: scaleX.value });
352
- if (scaleY.value !== 1)
353
- transform.push({ scaleY: scaleY.value });
354
- if (rotate.value !== '0deg')
355
- transform.push({ rotate: rotate.value });
356
- if (rotateX.value !== '0deg')
357
- transform.push({ rotateX: rotateX.value });
358
- if (rotateY.value !== '0deg')
359
- transform.push({ rotateY: rotateY.value });
360
- if (rotateZ.value !== '0deg')
361
- transform.push({ rotateZ: rotateZ.value });
362
- if (skewX.value !== '0deg')
363
- transform.push({ skewX: skewX.value });
364
- if (skewY.value !== '0deg')
365
- 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
366
245
  if (transform.length > 0)
367
246
  style.transform = transform;
368
- // Layout properties
369
- if (width.value !== 0)
370
- style.width = width.value;
371
- if (height.value !== 0)
372
- style.height = height.value;
373
- if (minWidth.value !== 0)
374
- style.minWidth = minWidth.value;
375
- if (minHeight.value !== 0)
376
- style.minHeight = minHeight.value;
377
- if (maxWidth.value !== 0)
378
- style.maxWidth = maxWidth.value;
379
- if (maxHeight.value !== 0)
380
- style.maxHeight = maxHeight.value;
381
- // Spacing properties
382
- if (margin.value !== 0)
383
- style.margin = margin.value;
384
- if (marginTop.value !== 0)
385
- style.marginTop = marginTop.value;
386
- if (marginBottom.value !== 0)
387
- style.marginBottom = marginBottom.value;
388
- if (marginLeft.value !== 0)
389
- style.marginLeft = marginLeft.value;
390
- if (marginRight.value !== 0)
391
- style.marginRight = marginRight.value;
392
- if (marginHorizontal.value !== 0)
393
- style.marginHorizontal = marginHorizontal.value;
394
- if (marginVertical.value !== 0)
395
- style.marginVertical = marginVertical.value;
396
- if (padding.value !== 0)
397
- style.padding = padding.value;
398
- if (paddingTop.value !== 0)
399
- style.paddingTop = paddingTop.value;
400
- if (paddingBottom.value !== 0)
401
- style.paddingBottom = paddingBottom.value;
402
- if (paddingLeft.value !== 0)
403
- style.paddingLeft = paddingLeft.value;
404
- if (paddingRight.value !== 0)
405
- style.paddingRight = paddingRight.value;
406
- if (paddingHorizontal.value !== 0)
407
- style.paddingHorizontal = paddingHorizontal.value;
408
- if (paddingVertical.value !== 0)
409
- style.paddingVertical = paddingVertical.value;
410
- // Border properties
411
- if (borderRadius.value !== 0)
412
- style.borderRadius = borderRadius.value;
413
- if (borderTopLeftRadius.value !== 0)
414
- style.borderTopLeftRadius = borderTopLeftRadius.value;
415
- if (borderTopRightRadius.value !== 0)
416
- style.borderTopRightRadius = borderTopRightRadius.value;
417
- if (borderBottomLeftRadius.value !== 0)
418
- style.borderBottomLeftRadius = borderBottomLeftRadius.value;
419
- if (borderBottomRightRadius.value !== 0)
420
- style.borderBottomRightRadius = borderBottomRightRadius.value;
421
- if (borderWidth.value !== 0)
422
- style.borderWidth = borderWidth.value;
423
- if (borderTopWidth.value !== 0)
424
- style.borderTopWidth = borderTopWidth.value;
425
- if (borderBottomWidth.value !== 0)
426
- style.borderBottomWidth = borderBottomWidth.value;
427
- if (borderLeftWidth.value !== 0)
428
- style.borderLeftWidth = borderLeftWidth.value;
429
- if (borderRightWidth.value !== 0)
430
- style.borderRightWidth = borderRightWidth.value;
431
- if (borderColor.value !== 0)
432
- style.borderColor = borderColor.value;
433
- if (borderTopColor.value !== 0)
434
- style.borderTopColor = borderTopColor.value;
435
- if (borderBottomColor.value !== 0)
436
- style.borderBottomColor = borderBottomColor.value;
437
- if (borderLeftColor.value !== 0)
438
- style.borderLeftColor = borderLeftColor.value;
439
- if (borderRightColor.value !== 0)
440
- style.borderRightColor = borderRightColor.value;
441
- // Color properties
442
- if (backgroundColor.value !== 0)
443
- style.backgroundColor = backgroundColor.value;
444
- if (color.value !== 0)
445
- style.color = color.value;
446
- // Position properties
447
- if (top.value !== 0)
448
- style.top = top.value;
449
- if (bottom.value !== 0)
450
- style.bottom = bottom.value;
451
- if (left.value !== 0)
452
- style.left = left.value;
453
- if (right.value !== 0)
454
- style.right = right.value;
455
- // Shadow properties
456
- if (shadowColor.value !== 0)
457
- style.shadowColor = shadowColor.value;
458
- if (shadowOpacity.value !== 0)
459
- style.shadowOpacity = shadowOpacity.value;
460
- if (shadowRadius.value !== 0)
461
- style.shadowRadius = shadowRadius.value;
462
- if (elevation.value !== 0)
463
- style.elevation = elevation.value;
464
247
  return style;
465
248
  });
466
249
  const AnimatedComponent = react_native_reanimated_1.default.createAnimatedComponent(Component);
467
- if (!isPresent)
468
- return null;
469
- 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);
470
251
  };
471
252
  }
472
253
  function getInitialValue(key, initial) {
473
254
  if (initial === false) {
474
- return getDefaultValue(key);
255
+ const initValue = getDefaultValue(key);
256
+ return initValue;
475
257
  }
476
258
  const value = initial[key];
477
259
  return value !== undefined ? value : getDefaultValue(key);
478
260
  }
479
261
  function getDefaultValue(key) {
480
- switch (key) {
481
- case 'opacity':
482
- case 'scale':
483
- case 'scaleX':
484
- case 'scaleY':
485
- return 1;
486
- case 'x':
487
- case 'y':
488
- case 'z':
489
- case 'translateX':
490
- case 'translateY':
491
- return 0;
492
- case 'rotate':
493
- case 'rotateX':
494
- case 'rotateY':
495
- case 'rotateZ':
496
- case 'skewX':
497
- case 'skewY':
498
- return '0deg';
499
- default:
500
- return 0;
501
- }
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];
502
321
  }
503
322
  exports.NativeMotion = {
504
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.2.8",
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",