motion-on-native 1.3.0 → 1.5.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.
- package/README.md +85 -25
- package/lib/index.d.ts +11 -26
- package/lib/index.js +197 -443
- 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,
|
|
29
|
-
animate={{ opacity: 1,
|
|
30
|
-
|
|
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
|
-
##
|
|
48
|
+
## Props
|
|
50
49
|
|
|
51
|
-
- `
|
|
52
|
-
- `
|
|
53
|
-
- `
|
|
54
|
-
- `
|
|
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
|
-
- `
|
|
60
|
-
- `scale`: size
|
|
61
|
-
- `rotate`: rotation (e.g., '45deg')
|
|
62
|
-
- `
|
|
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
|
-
- `
|
|
66
|
-
|
|
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
|
-
|
|
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={{
|
|
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={{
|
|
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,27 +67,23 @@ 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
|
-
|
|
75
|
+
styles?: ViewStyle;
|
|
91
76
|
children?: React.ReactNode;
|
|
92
77
|
}
|
|
93
78
|
export declare const NativeMotion: {
|
|
94
|
-
View:
|
|
95
|
-
Text:
|
|
96
|
-
Image:
|
|
97
|
-
ImageBackground:
|
|
98
|
-
TextInput:
|
|
99
|
-
TouchableOpacity:
|
|
100
|
-
ScrollView:
|
|
101
|
-
FlatList:
|
|
102
|
-
SectionList:
|
|
103
|
-
Pressable:
|
|
79
|
+
View: React.ForwardRefExoticComponent<MotionComponentProps & import("react-native").ViewProps & React.RefAttributes<any>>;
|
|
80
|
+
Text: React.ForwardRefExoticComponent<MotionComponentProps & import("react-native").TextProps & React.RefAttributes<any>>;
|
|
81
|
+
Image: React.ForwardRefExoticComponent<MotionComponentProps & import("react-native").ImageProps & React.RefAttributes<any>>;
|
|
82
|
+
ImageBackground: React.ForwardRefExoticComponent<MotionComponentProps & import("react-native").ImageBackgroundProps & React.RefAttributes<any>>;
|
|
83
|
+
TextInput: React.ForwardRefExoticComponent<MotionComponentProps & import("react-native").TextInputProps & React.RefAttributes<any>>;
|
|
84
|
+
TouchableOpacity: React.ForwardRefExoticComponent<Omit<MotionComponentProps & import("react-native").TouchableOpacityProps & React.RefAttributes<View>, "ref"> & React.RefAttributes<any>>;
|
|
85
|
+
ScrollView: React.ForwardRefExoticComponent<MotionComponentProps & import("react-native").ScrollViewProps & React.RefAttributes<any>>;
|
|
86
|
+
FlatList: React.ForwardRefExoticComponent<MotionComponentProps & import("react-native").FlatListProps<unknown> & React.RefAttributes<any>>;
|
|
87
|
+
SectionList: React.ForwardRefExoticComponent<MotionComponentProps & import("react-native").SectionListProps<unknown, unknown> & React.RefAttributes<any>>;
|
|
88
|
+
Pressable: React.ForwardRefExoticComponent<Omit<MotionComponentProps & import("react-native").PressableProps & React.RefAttributes<View>, "ref"> & React.RefAttributes<any>>;
|
|
104
89
|
};
|
package/lib/index.js
CHANGED
|
@@ -57,147 +57,112 @@ const DEFAULT_TRANSITION = {
|
|
|
57
57
|
repeatType: 'loop',
|
|
58
58
|
};
|
|
59
59
|
function createMotionComponent(Component) {
|
|
60
|
-
return
|
|
61
|
-
const { initial = {}, animate = {}, exit = {},
|
|
62
|
-
//
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
const
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
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));
|
|
60
|
+
return react_1.default.forwardRef((props, ref) => {
|
|
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
|
|
137
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
142
138
|
if (value !== undefined) {
|
|
143
|
-
// Handle color properties
|
|
144
|
-
if (
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
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 &&
|
|
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: (
|
|
196
|
-
stiffness: (
|
|
197
|
-
mass: (
|
|
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: (
|
|
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 =
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
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
|
-
|
|
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
|
|
303
|
-
if (
|
|
304
|
-
|
|
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
|
-
|
|
312
|
-
|
|
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
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
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: [
|
|
526
|
-
};
|
|
250
|
+
return react_1.default.createElement(AnimatedComponent, Object.assign({ ref, style: [styles, animatedStyle] }, rest), children);
|
|
251
|
+
});
|
|
527
252
|
}
|
|
528
253
|
function getInitialValue(key, initial) {
|
|
529
254
|
if (initial === false) {
|
|
530
|
-
|
|
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
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
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
|
+
"version": "1.5.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",
|