useMotiPressable not able to return TextStyle

[joaofleao]

Is there an existing issue for this?

• I have searched the existing issues

Do you want this issue prioritized?

• Yes, I have sponsored
• Not urgent

Current Behavior

When using the useMotiPressable, I tried changing the color value of a MotiText based on the pressed state like this:

import React from "react";
import { MotiText, MotiView } from "moti";
import { MotiPressable, useMotiPressable } from "moti/interactions";

const Item = () => {
  const state = useMotiPressable(({ pressed }) => {
    "worklet";

    return {
      color: pressed ? "red" : "blue",
    };
  });

  return (
    <MotiView>
      <MotiText state={state}>Click me!</MotiText>
    </MotiView>
  );
};

export const Button = () => {
  return (
    <MotiPressable>
      <Item />
    </MotiPressable>
  );
};

and I face the following TS error

No overload matches this call.
  Overload 1 of 2, '(factory: MotiPressableInteractionProp, maybeDeps?: unknown[]): Pick<UseAnimationState<any>, "__state">', gave the following error.
    Argument of type '({ pressed }: MotiPressableInteractionState) => { color: string; }' is not assignable to parameter of type 'MotiPressableInteractionProp'.
      Type '{ color: string; }' is not assignable to type 'NonNullable<AnimateProp>'.
  Overload 2 of 2, '(id: string, factory: MotiPressableInteractionProp, maybeDeps?: unknown[]): Pick<UseAnimationState<any>, "__state">', gave the following **error.**
    Argument of type '({ pressed }: MotiPressableInteractionState) => { color: string; }' is not assignable to parameter of type 'string'.ts(2769)

The code works, the color is changed when it is pressed, but the TS error still persists. So the question here is:

Is there a reason for AnimateProp to be MotiAnimationProp<ViewStyle> instead of MotiAnimationProp<ViewStyle & TextStyle>?

For now I will be patching the package to get rid f the TS error, but I do not know the full repercussions os changing this (and if it is even intended)

Expected Behavior

The type should be changed to allow TextStyles to be updated as well

Steps To Reproduce

1. Try this

import React from "react";
import { MotiText, MotiView } from "moti";
import { MotiPressable, useMotiPressable } from "moti/interactions";

const Item = () => {
  const state = useMotiPressable(({ pressed }) => {
    "worklet";

    return {
      color: pressed ? "red" : "blue",
    };
  });

  return (
    <MotiView>
      <MotiText state={state}>Click me!</MotiText>
    </MotiView>
  );
};

export const Button = () => {
  return (
    <MotiPressable>
      <Item />
    </MotiPressable>
  );
};

2. See the TS error

Versions

- Moti: 0.29.0
- Reanimated: 3.10.1
- React Native: 0.74.5

Screenshots

No response

Reproduction

import React from "react";
import { MotiText, MotiView } from "moti";
import { MotiPressable, useMotiPressable } from "moti/interactions";

const Item = () => {
  const state = useMotiPressable(({ pressed }) => {
    "worklet";

    return {
      color: pressed ? "red" : "blue",
    };
  });

  return (
    <MotiView>
      <MotiText state={state}>Click me!</MotiText>
    </MotiView>
  );
};

export const Button = () => {
  return (
    <MotiPressable>
      <Item />
    </MotiPressable>
  );
};

[nandorojo]

Interesting...will take a look