diff --git a/packages/moti/src/interactions/pressable/pressable.tsx b/packages/moti/src/interactions/pressable/pressable.tsx index b1ba7ef..d199f95 100644 --- a/packages/moti/src/interactions/pressable/pressable.tsx +++ b/packages/moti/src/interactions/pressable/pressable.tsx @@ -119,10 +119,23 @@ export const MotiPressable = forwardRef( 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} ) diff --git a/packages/moti/src/interactions/pressable/types.ts b/packages/moti/src/interactions/pressable/types.ts index dc246cc..65b28ae 100644 --- 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 ) => React.ReactNode) diff --git a/packages/moti/src/skeleton/skeleton.tsx b/packages/moti/src/skeleton/skeleton.tsx index 1a10898..a78e4ff 100644 --- 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 (