react-native-material-elements
Version:
React native material elements is a sophisticated UI library crafted to enhance your React Native development workflow. Designed for simplicity and elegance, nex-ui provides a rich collection of components and utilities to effortlessly create polished mob
73 lines (67 loc) • 1.83 kB
TypeScript
import { Animated, LayoutRectangle, View, ViewProps, ViewStyle } from 'react-native';
/**
* Interface defining the properties of a Ripple effect object.
*/
export interface RippleObject {
/**
* Value representing the progress of the ripple animation
*/
progress: Animated.Value;
/**
* X-coordinate of the ripple's starting position
*/
positionX: number;
/**
* Y-coordinate of the ripple's starting position
*/
positionY: number;
/**
* Radius of the ripple effect
*/
radius: number;
/**
* Unique identifier for the ripple object
*/
id: number;
}
type RipplePosition = 'center' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
/**
* Type definition for a function handling Ripple animation.
*/
export type onRippleAnimationType = (
/**
* The animation instance controlling the ripple effect
*/
animation: Animated.CompositeAnimation,
/**
* Callback function to execute when the animation ends
*/
callBack: Animated.EndCallback,
) => void;
/**
* Interface defining the properties for configuring a Ripple component.
*/
export interface RippleProps extends ViewProps {
/**
* Custom styles for the ripple effect
*/
rippleStyles?: ViewStyle;
/**
* Additional styles for the ripple animation
*/
rippleAnimationStyles?: ViewStyle;
/**
* Styles for the container of the ripple effect
*/
rippleContainerStyles?: ViewStyle;
}
/**
* Interface extending the View interface, adding functionality specific to the Ripple component.
*/
export interface RippleInterface extends View {
/**
* Method to start the ripple effect at a given position
*/
startRipple: (positionX: number, positionY: number) => void;
createRippleFromPosition: (position: RipplePosition, elementLayoutRectangle: LayoutRectangle) => void;
}