feat: factory function for animate prop & MotiPressable child

nandorojo · Mar 24, 2022 · 1bbedf0 · 1bbedf0
1 parent e26a527
commit 1bbedf0
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 16 deletions.
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
@@ -13,7 +13,7 @@
   --ifm-color-text: white;
   --ifm-color-background: black;
   --ifm-color-primary: #50e3c2;
-  /* 
+  /*
   --ifm-color-primary-dark: #e60073;
   --ifm-color-primary-darker: #d9006d;
   --ifm-color-primary-darkest: #b3005a;
@@ -28,6 +28,12 @@
   --ifm-color-primary-lighter: rgb(102, 212, 189);
   --ifm-color-primary-lightest: rgb(146, 224, 208);
   --ifm-code-font-size: 95%;
+
+  --ifm-container-width-xl: 1140px;
+}
+
+.padding-top--md {
+  padding-top: 2rem !important;
 }
 
 .docusaurus-highlight-code-line {

diff --git a/examples/with-expo/src/Moti.Pressable.tsx b/examples/with-expo/src/Moti.Pressable.tsx
@@ -29,9 +29,27 @@ function Logo() {
 
 function App() {
   return (
-    <MotiPressable id="logo" style={styles.shape}>
-      <Logo />
-    </MotiPressable>
+    <>
+      <MotiPressable id="logo" style={styles.shape}>
+        <Logo />
+      </MotiPressable>
+      <MotiPressable>
+        {(interaction) => {
+          return (
+            <MotiView
+              style={styles.shape}
+              animate={() => {
+                'worklet'
+
+                const { pressed, hovered } = interaction.value
+
+                return {}
+              }}
+            />
+          )
+        }}
+      </MotiPressable>
+    </>
   )
 }
 

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -214,8 +214,10 @@ export interface MotiProps<
    * If you want to use transforms, such as `translateY` or `scale`, pass the keys directly to this prop, rather than using a `transform` array.
    *
    * To set an initial value, see the `from` prop.
+   *
+   * @worklet
    */
-  animate?: OrSharedValue<Animate>
+  animate?: OrSharedValue<Animate> | (() => Animate)
   /**
    * (Optional) specify styles which the component should animate from.
    *

diff --git a/packages/core/src/use-map-animate-to-style.ts b/packages/core/src/use-map-animate-to-style.ts
@@ -267,6 +267,9 @@ export function useMotify<Animate>({
     if (animateProp && 'value' in animateProp) {
       animateStyle = (animateProp.value || {}) as Animate
     } else {
+      if (typeof animateProp == 'function') {
+        animateStyle = animateProp() as Animate
+      }
       animateStyle = (animateProp || {}) as Animate
     }
 

diff --git a/packages/moti/src/interactions/pressable/pressable.tsx b/packages/moti/src/interactions/pressable/pressable.tsx
@@ -3,7 +3,7 @@ import React, { useMemo, ReactNode, forwardRef } from 'react'
 import { Platform, Pressable } from 'react-native'
 import type { View } from 'react-native'
 import { TouchableWithoutFeedback } from 'react-native-gesture-handler'
-import Animated, {
+import {
   useSharedValue,
   runOnJS,
   useDerivedValue,
@@ -17,10 +17,6 @@ import {
 import { Hoverable } from './hoverable'
 import type { MotiPressableInteractionState, MotiPressableProps } from './types'
 
-const AnimatedTouchable = Animated.createAnimatedComponent(
-  TouchableWithoutFeedback
-)
-
 export const MotiPressable = forwardRef<View, MotiPressableProps>(
   function MotiPressable(props, ref) {
     const {
@@ -126,7 +122,7 @@ export const MotiPressable = forwardRef<View, MotiPressableProps>(
         style={style}
         onLayout={onLayout}
       >
-        {children}
+        {typeof children == 'function' ? children(interaction) : children}
       </MotiView>
     )
 
@@ -175,7 +171,7 @@ export const MotiPressable = forwardRef<View, MotiPressableProps>(
       )
     } else {
       node = (
-        <AnimatedTouchable
+        <TouchableWithoutFeedback
           onPressIn={updateInteraction('pressed', true, onPressIn)}
           onPressOut={updateInteraction('pressed', false, onPressOut)}
           onLongPress={onLongPress}
@@ -206,7 +202,7 @@ export const MotiPressable = forwardRef<View, MotiPressableProps>(
           onBlur={onBlur}
         >
           {child}
-        </AnimatedTouchable>
+        </TouchableWithoutFeedback>
       )
     }
 

diff --git a/packages/moti/src/interactions/pressable/types.ts b/packages/moti/src/interactions/pressable/types.ts
@@ -1,8 +1,9 @@
-import type { ComponentProps } from 'react'
 import type { MotiView } from '@motify/components'
-import type { ViewStyle, Insets, PressableProps } from 'react-native'
 import type { MotiAnimationProp, MotiTransition } from '@motify/core'
+import type { ComponentProps } from 'react'
+import type { ViewStyle, Insets, PressableProps } from 'react-native'
 import type Animated from 'react-native-reanimated'
+import { DerivedValue } from 'react-native-reanimated'
 
 export type MotiPressableInteractionState = {
   hovered: boolean
@@ -101,9 +102,14 @@ export type MotiPressableProps = {
    */
   onContainerLayout?: PressableProps['onLayout']
   href?: string
+  children?:
+    | React.ReactElement
+    | ((
+        interaction: DerivedValue<MotiPressableInteractionState>
+      ) => React.ReactNode)
 } & Pick<
   ComponentProps<typeof MotiView>,
-  'children' | 'exit' | 'from' | 'exitTransition' | 'style' | 'onLayout'
+  'exit' | 'from' | 'exitTransition' | 'style' | 'onLayout'
 > &
   Pick<
     PressableProps,