type error when using transition prop with expo 51 and reanimated 3.10

[dannyhw]

Is there an existing issue for this?

• [X] I have searched the existing issues

Do you want this issue prioritized?

• [ ] Yes, I have sponsored
• [X] Not urgent

Current Behavior

Type '{ duration: number; }' is not assignable to type 'MotiTransitionProp<StyleValueWithReplacedTransforms<ViewStyle | TextStyle | ImageStyle>> | ((custom?: any) => MotiTransition<...>) | undefined'.

Type '{ type: "timing"; duration: number; }' is not assignable to type 'MotiTransitionProp<StyleValueWithReplacedTransforms<ViewStyle | TextStyle | ImageStyle>> | undefined'.

Type '{ type: "timing"; duration: number; delay: number; }' is not assignable to type 'MotiTransitionProp<StyleValueWithReplacedTransforms<ViewStyle | TextStyle | ImageStyle>> | undefined'.

Expected Behavior

No response

Steps To Reproduce

Heres some examples that give me a type error

   <MotiView
                from={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                // @ts-ignore TODO moti fix me
                transition={{
                  type: "timing",
                  duration: 1000,
                  delay: index * 1000,
                }}
              >
     <MotiView
          tw="w-full items-center"
          from={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          // @ts-ignore TODO moti fix me
          transition={{
            type: "timing",
            duration: 1000,
          }}
        >
         <View
            from={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{
              opacity: 0,
            }}
            // @ts-ignore TODO moti fix me
            exitTransition={{ duration: 300 }}
          >
          <View
            from={{ translateY: 128 + 64 + 8, opacity: 0 }}
            animate={{ translateY: 0, opacity: 1 }}
            exit={{
              translateY: 128 + 64 + 8,
              opacity: 0,
            }}
            // @ts-ignore TODO moti fix me
            exitTransition={{ duration: 300 }}
          >

Versions

- Moti: ^0.28.1
- Reanimated: ~3.10.1
- React Native: 0.74.1
- typescript: ^5.3.3

Screenshots

Reproduction

https://github.com/dannyhw/moti-types-repro

Run

bun install
bun check

[ThatGuySam]

Getting the same issue when trying to get ahead of migration to Expo 51

"moti": "^0.28.1", "react-native-reanimated": "~3.10.1",

[dannyhw]

I'm able to get around the issue by changing to

transition={{
    opacity: {
      type: "timing",
      duration: 1000,
   }
}}

But its a bit tedious with multiple properties

[nandorojo]

Fixed https://github.com/nandorojo/moti/pull/345

[nandorojo]

Releasing shortly

[agallio]

I'm using version 0.29.0 with Expo SDK 51 and still get the issue. (TypeScript 5.3.3)

[nandorojo]

@alantoa looks like some people are still getting this on SDK 51, interesting

[alantoa]

Hey @agallio, actually it works for me. What if you run yarn why moti and yarn why react-native-reanimated in your project? Curious about the version you are actually using.

[alantoa]

Also, Can you please show me the type error in your code? (Hover over the error and take a screenshot of the error text.) @agallio

[agallio]

Hi @alantoa, thank you for the response. It's working now, I think it was because of my faulty node_modules, when I tried to wipe all the node_modules and yarn.lock and then reinstall, it worked properly.

[alantoa]

Got it, that's great!

[RazaShehryar]

Facing this issue with expo SDK 50.

moti version 0.29 react-native-reanimated version 3.6.2

[nandorojo]

You'll need to upgrade RN. The type issue is due to a typo in a react native type. The typo was fixed in RN 0.74