diff --git a/packages/moti/src/motify/index.tsx b/packages/moti/src/motify/index.tsx index 8e92288..a3f6512 100644 --- a/packages/moti/src/motify/index.tsx +++ b/packages/moti/src/motify/index.tsx @@ -1,6 +1,6 @@ import React, { ComponentType, forwardRef } from 'react' import type { ImageStyle, TextStyle, ViewStyle } from 'react-native' -import type { DripsifyProps } from './types' +import type { MotiProps } from './types' import useMapAnimateToStyle from './use-map-animate-to-style' import Animated from 'react-native-reanimated' @@ -24,7 +24,7 @@ export default function redripify< const withStyles = forwardRef< Ref, Props & - DripsifyProps & + MotiProps & ExtraProps & { children?: React.ReactNode } diff --git a/packages/moti/src/motify/types.ts b/packages/moti/src/motify/types.ts index bd42e7a..d80f04e 100644 --- a/packages/moti/src/motify/types.ts +++ b/packages/moti/src/motify/types.ts @@ -14,6 +14,9 @@ import type { TranslateYTransform, SkewXTransform, SkewYTransform, + ImageStyle, + TextStyle, + ViewStyle, } from 'react-native' export type Transforms = PerpectiveTransform & @@ -94,7 +97,10 @@ type StyleValueWithArrays = { )[] } -type OnDidAnimate = ( +export type OnDidAnimate< + Animate = ImageStyle & TextStyle & ViewStyle, + Key extends keyof Animate = keyof Animate +> = ( /** * Key of the style that just finished animating */ @@ -106,11 +112,24 @@ type OnDidAnimate = ( value?: Animate[Key] ) => void -export interface DripsifyProps< +type StyleValueWithReplacedTransforms = Omit< + StyleProp, + 'transform' +> & + Partial + +export type MotiAnimationProp = MotiProps['animate'] +export type MotiFromProp = MotiProps['from'] +export type MotiExitProp = MotiProps['exit'] + +export interface MotiProps< // Style props of the component - AnimateType, + // defaults to any styles, so that generics aren't Required + // in component usage, it will extract these from the style prop ideally + AnimateType = ImageStyle & TextStyle & ViewStyle, // edit the style props to remove transform array, flattening it - AnimateWithTransitions = Omit & Partial, + // AnimateWithTransitions = Omit & Partial, + AnimateWithTransitions = StyleValueWithReplacedTransforms, // allow the style values to be arrays for sequences, where values are primitives or objects with configs Animate = StyleValueWithArrays > { @@ -174,22 +193,23 @@ export interface DripsifyProps< * To get more granular delay controls, use the `transition` prop. */ delay?: number - state?: UseAnimator /** - * If set to `animator`, then styles passed from the `animator` prop will take precedent. + * Pass a static set of animation variants, returned by the `useAnimationState` hook. * - * Otherwise, if set to `animate`, then that prop will take precedent for matching styles. + * This allows for more performant animations that don't cross the bridge. * - * Default: `animator`. + * If you know your styles in advance, and will be changing them throughout a component's lifecycle, then this is the preferred method to animate with. */ - stylePriority?: 'state' | 'animate' + state?: UseAnimator /** - * @deprecated + * This is not a prop you will likely find yourself using. * - * This is only here for testing, but I'm not sure if it'll ever be usable. + * If set to `animate`, then styles passed from the `animate` prop will take precedent. + * + * Otherwise, if set to `state`, then the `state` prop will take precedent for matching styles. + * + * Default: `animate`. * - * I added it with hopes of creating something like `framer-motion`'s exit prop. */ - // exit?: Animate - // visible?: boolean + stylePriority?: 'state' | 'animate' } diff --git a/packages/moti/src/motify/use-map-animate-to-style.ts b/packages/moti/src/motify/use-map-animate-to-style.ts index 80d6560..b65e698 100644 --- a/packages/moti/src/motify/use-map-animate-to-style.ts +++ b/packages/moti/src/motify/use-map-animate-to-style.ts @@ -13,7 +13,7 @@ import Animated, { runOnJS, } from 'react-native-reanimated' import { PackageName } from '../constants/package-name' -import type { DripsifyProps, Transforms, TransitionConfig } from './types' +import type { MotiProps, Transforms, TransitionConfig } from './types' const isColor = (styleKey: string) => { 'worklet' @@ -51,7 +51,7 @@ const isTransform = (styleKey: string) => { function animationDelay( key: string, - transition: DripsifyProps['transition'], + transition: MotiProps['transition'], defaultDelay?: number ) { 'worklet' @@ -70,7 +70,7 @@ function animationDelay( function animationConfig( styleProp: string, - transition: DripsifyProps['transition'] + transition: MotiProps['transition'] ) { 'worklet' @@ -204,7 +204,7 @@ export default function useMapAnimateToStyle({ stylePriority = 'state', onDidAnimate, exit, -}: DripsifyProps) { +}: MotiProps) { const isMounted = useSharedValue(false, false) const [isPresent, safeToUnmount] = usePresence()