20
20
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
21
// SOFTWARE.
22
22
import * as React from 'react' ;
23
+ import type { StyleProp , ViewStyle } from 'react-native' ;
23
24
import Animated , { cubicBezier } from 'react-native-reanimated' ;
24
- import type { CSSStyleDeclaration } from 'react-native-reanimated/lib/typescript/css/types' ;
25
+ import type {
26
+ AnimatedStyle ,
27
+ CSSAnimationProperties ,
28
+ } from 'react-native-reanimated' ;
25
29
26
30
interface CSSAnimationProps {
27
- style ?: CSSStyleDeclaration ;
31
+ style ?: StyleProp < AnimatedStyle < StyleProp < ViewStyle > > > ;
28
32
}
29
33
30
34
/**
31
35
* A `spin` style object to an `Animated` component add a linear spinning animation. Great for loaders.
32
36
*/
33
- export const spin : CSSStyleDeclaration = {
37
+ export const spin : CSSAnimationProperties = {
34
38
animationName : {
35
39
to : {
36
40
transform : [ { rotate : '360deg' } ] ,
@@ -56,7 +60,7 @@ export function Spin({
56
60
/**
57
61
* Add `ping` style object to an `Animated` component to make the element scale and fade. Great for attention grabbing elements like notifications.
58
62
*/
59
- export const ping : CSSStyleDeclaration = {
63
+ export const ping : CSSAnimationProperties = {
60
64
animationName : {
61
65
'75%, 100%' : {
62
66
transform : [ { scale : 2 } ] ,
@@ -83,7 +87,7 @@ export function Ping({
83
87
/**
84
88
* Add `pulse` style object to an `Animated` component to make it fade in and out. Great for skeleton loaders.
85
89
*/
86
- export const pulse : CSSStyleDeclaration = {
90
+ export const pulse : CSSAnimationProperties = {
87
91
animationName : {
88
92
'50%' : {
89
93
opacity : 0.5 ,
@@ -109,7 +113,7 @@ export function Pulse({
109
113
/**
110
114
* Add `bounce` style object to an `Animated` component to make it bounce up and down. Great for scroll down indicators.
111
115
*/
112
- export const bounce : CSSStyleDeclaration = {
116
+ export const bounce : CSSAnimationProperties = {
113
117
animationName : {
114
118
'0%, 100%' : {
115
119
transform : [ { translateY : '-25%' } ] ,
@@ -139,7 +143,7 @@ export function Bounce({
139
143
/**
140
144
* Add `shimmer` style object to an `Animated` component to make it animate from left to right indefinitely. Great for shimmer loading effect.
141
145
*/
142
- export const shimmer : CSSStyleDeclaration = {
146
+ export const shimmer : CSSAnimationProperties = {
143
147
animationName : {
144
148
from : {
145
149
transform : [ { translateX : '-25%' } ] ,
0 commit comments