fix: children for MotiPressable & Skeleton

nandorojo · Mar 28, 2022 · 1a99002 · 1a99002
1 parent 1bbedf0
commit 1a99002
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/packages/moti/src/interactions/pressable/pressable.tsx b/packages/moti/src/interactions/pressable/pressable.tsx
@@ -119,10 +119,23 @@ export const MotiPressable = forwardRef<View, MotiPressableProps>(
         transition={transition}
         exitTransition={exitTransition}
         state={state}
+        // TODO change API to this
+        // animate={useMemo(() => {
+        //   'worklet'
+
+        //   if (typeof animate === 'function') {
+        //     return animate(interaction.value)
+        //   }
+
+        //   return animate
+        // }, [])}
         style={style}
         onLayout={onLayout}
       >
-        {typeof children == 'function' ? children(interaction) : children}
+        {typeof children == 'function'
+          ? // @ts-expect-error it thinks ReactNode can be a function, but it's fine.
+            children(interaction)
+          : children}
       </MotiView>
     )
 

diff --git a/packages/moti/src/interactions/pressable/types.ts b/packages/moti/src/interactions/pressable/types.ts
@@ -103,7 +103,7 @@ export type MotiPressableProps = {
   onContainerLayout?: PressableProps['onLayout']
   href?: string
   children?:
-    | React.ReactElement
+    | React.ReactNode
     | ((
         interaction: DerivedValue<MotiPressableInteractionState>
       ) => React.ReactNode)

diff --git a/packages/moti/src/skeleton/skeleton.tsx b/packages/moti/src/skeleton/skeleton.tsx
@@ -16,7 +16,7 @@ type Props = {
    * Optional height of the skeleton. Defauls to a `minHeight` of `32`
    */
   height?: number | string
-  children?: React.ReactChild
+  children?: React.ReactChild | null
   /**
    * `boolean` specifying whether the skeleton should be visible. By default, it shows if there are no children. This way, you can conditionally display children, and automatically hide the skeleton when they exist.
    *
@@ -204,10 +204,9 @@ const AnimatedGradient = React.memo(
   }: {
     measuredWidth: number
     colors: string[]
-    backgroundSize: number,
+    backgroundSize: number
     transition?: MotiTransitionProp
   }) {
-
     return (
       <MotiView
         style={StyleSheet.absoluteFillObject}