Skip to content

Commit 8f39ac6

Browse files
fix: fix types after beta release
1 parent c0424da commit 8f39ac6

File tree

1 file changed

+11
-7
lines changed

1 file changed

+11
-7
lines changed

src/index.tsx

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,21 @@
2020
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
2121
// SOFTWARE.
2222
import * as React from 'react';
23+
import type { StyleProp, ViewStyle } from 'react-native';
2324
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';
2529

2630
interface CSSAnimationProps {
27-
style?: CSSStyleDeclaration;
31+
style?: StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
2832
}
2933

3034
/**
3135
* A `spin` style object to an `Animated` component add a linear spinning animation. Great for loaders.
3236
*/
33-
export const spin: CSSStyleDeclaration = {
37+
export const spin: CSSAnimationProperties = {
3438
animationName: {
3539
to: {
3640
transform: [{ rotate: '360deg' }],
@@ -56,7 +60,7 @@ export function Spin({
5660
/**
5761
* Add `ping` style object to an `Animated` component to make the element scale and fade. Great for attention grabbing elements like notifications.
5862
*/
59-
export const ping: CSSStyleDeclaration = {
63+
export const ping: CSSAnimationProperties = {
6064
animationName: {
6165
'75%, 100%': {
6266
transform: [{ scale: 2 }],
@@ -83,7 +87,7 @@ export function Ping({
8387
/**
8488
* Add `pulse` style object to an `Animated` component to make it fade in and out. Great for skeleton loaders.
8589
*/
86-
export const pulse: CSSStyleDeclaration = {
90+
export const pulse: CSSAnimationProperties = {
8791
animationName: {
8892
'50%': {
8993
opacity: 0.5,
@@ -109,7 +113,7 @@ export function Pulse({
109113
/**
110114
* Add `bounce` style object to an `Animated` component to make it bounce up and down. Great for scroll down indicators.
111115
*/
112-
export const bounce: CSSStyleDeclaration = {
116+
export const bounce: CSSAnimationProperties = {
113117
animationName: {
114118
'0%, 100%': {
115119
transform: [{ translateY: '-25%' }],
@@ -139,7 +143,7 @@ export function Bounce({
139143
/**
140144
* Add `shimmer` style object to an `Animated` component to make it animate from left to right indefinitely. Great for shimmer loading effect.
141145
*/
142-
export const shimmer: CSSStyleDeclaration = {
146+
export const shimmer: CSSAnimationProperties = {
143147
animationName: {
144148
from: {
145149
transform: [{ translateX: '-25%' }],

0 commit comments

Comments
 (0)