motion-on-native
Version:
Framer Motion-inspired animation library for React Native with Reanimated. Easy spring animations, gestures, and transitions for mobile apps.
103 lines (102 loc) • 4.56 kB
TypeScript
import React from 'react';
import { View, ViewStyle } from 'react-native';
export interface AnimationProps {
opacity?: number;
x?: number;
y?: number;
z?: number;
translateX?: number;
translateY?: number;
scale?: number;
scaleX?: number;
scaleY?: number;
rotate?: string;
rotateX?: string;
rotateY?: string;
rotateZ?: string;
skewX?: string;
skewY?: string;
width?: number;
height?: number;
minWidth?: number;
minHeight?: number;
maxWidth?: number;
maxHeight?: number;
margin?: number;
marginTop?: number;
marginBottom?: number;
marginLeft?: number;
marginRight?: number;
marginHorizontal?: number;
marginVertical?: number;
padding?: number;
paddingTop?: number;
paddingBottom?: number;
paddingLeft?: number;
paddingRight?: number;
paddingHorizontal?: number;
paddingVertical?: number;
borderRadius?: number;
borderTopLeftRadius?: number;
borderTopRightRadius?: number;
borderBottomLeftRadius?: number;
borderBottomRightRadius?: number;
borderWidth?: number;
borderTopWidth?: number;
borderBottomWidth?: number;
borderLeftWidth?: number;
borderRightWidth?: number;
borderColor?: string;
borderTopColor?: string;
borderBottomColor?: string;
borderLeftColor?: string;
borderRightColor?: string;
backgroundColor?: string;
color?: string;
top?: number;
bottom?: number;
left?: number;
right?: number;
shadowColor?: string;
shadowOpacity?: number;
shadowRadius?: number;
elevation?: number;
}
export interface TransitionProps {
type?: 'spring' | 'timing';
duration?: number;
damping?: number;
stiffness?: number;
mass?: number;
delay?: number;
ease?: string;
repeat?: number | 'infinity';
repeatType?: 'loop' | 'reverse';
}
export interface MotionComponentProps {
initial?: AnimationProps | false;
animate?: AnimationProps;
exit?: AnimationProps;
transition?: TransitionProps;
shouldExit?: boolean;
onExitComplete?: () => void;
whileHover?: AnimationProps;
whileTap?: AnimationProps;
whileFocus?: AnimationProps;
layout?: boolean;
layoutId?: string;
style?: ViewStyle;
children?: React.ReactNode;
}
export declare const NativeMotion: {
View: (props: MotionComponentProps & import("react-native").ViewProps) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>> | null;
Text: (props: MotionComponentProps & import("react-native").TextProps) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>> | null;
Image: (props: MotionComponentProps & import("react-native").ImageProps) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>> | null;
ImageBackground: (props: MotionComponentProps & import("react-native").ImageBackgroundProps) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>> | null;
TextInput: (props: MotionComponentProps & import("react-native").TextInputProps) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>> | null;
TouchableOpacity: (props: MotionComponentProps & import("react-native").TouchableOpacityProps & React.RefAttributes<View>) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>> | null;
ScrollView: (props: MotionComponentProps & import("react-native").ScrollViewProps) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>> | null;
FlatList: (props: MotionComponentProps & import("react-native").FlatListProps<unknown>) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>> | null;
SectionList: (props: MotionComponentProps & import("react-native").SectionListProps<unknown, unknown>) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>> | null;
Pressable: (props: MotionComponentProps & import("react-native").PressableProps & React.RefAttributes<View>) => React.ReactElement<import("react-native-reanimated").AnimateProps<any>, string | React.JSXElementConstructor<any>> | null;
};