chore: fix types

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<Animate> &
+          MotiProps<Animate> &
           ExtraProps & {
             children?: React.ReactNode
           }

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<T> = {
       )[]
 }
 
-type OnDidAnimate<Animate, Key extends keyof Animate = keyof Animate> = (
+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<Animate, Key extends keyof Animate = keyof Animate> = (
   value?: Animate[Key]
 ) => void
 
-export interface DripsifyProps<
+type StyleValueWithReplacedTransforms<StyleProp> = Omit<
+  StyleProp,
+  'transform'
+> &
+  Partial<Transforms>
+
+export type MotiAnimationProp<Animate> = MotiProps<Animate>['animate']
+export type MotiFromProp<Animate> = MotiProps<Animate>['from']
+export type MotiExitProp<Animate> = MotiProps<Animate>['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<AnimateType, 'transform'> & Partial<Transforms>,
+  // AnimateWithTransitions = Omit<AnimateType, 'transform'> & Partial<Transforms>,
+  AnimateWithTransitions = StyleValueWithReplacedTransforms<AnimateType>,
   // allow the style values to be arrays for sequences, where values are primitives or objects with configs
   Animate = StyleValueWithArrays<AnimateWithTransitions>
 > {
@@ -174,22 +193,23 @@ export interface DripsifyProps<
    * To get more granular delay controls, use the `transition` prop.
    */
   delay?: number
-  state?: UseAnimator<any>
   /**
-   * 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<unknown>
   /**
-   * @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'
 }

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<Animate>(
   key: string,
-  transition: DripsifyProps<Animate>['transition'],
+  transition: MotiProps<Animate>['transition'],
   defaultDelay?: number
 ) {
   'worklet'
@@ -70,7 +70,7 @@ function animationDelay<Animate>(
 
 function animationConfig<Animate>(
   styleProp: string,
-  transition: DripsifyProps<Animate>['transition']
+  transition: MotiProps<Animate>['transition']
 ) {
   'worklet'
 
@@ -204,7 +204,7 @@ export default function useMapAnimateToStyle<Animate>({
   stylePriority = 'state',
   onDidAnimate,
   exit,
-}: DripsifyProps<Animate>) {
+}: MotiProps<Animate>) {
   const isMounted = useSharedValue(false, false)
   const [isPresent, safeToUnmount] = usePresence()