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

[dannyhw]

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

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 #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

[thoth-seshat]

@nandorojo I'm using RN 0.74.3 and still see this issue

[nandorojo]

please make sure you don't have types/react-native installed

[thoth-seshat]

@nandorojo I've uninstalled types/react-native, restarted TS and still see the issue. Deleted node_modules etc

[MarcHbb]

I have the same issue.

"expo": "~51.0.22",
"react-native": "0.74.3",
"react-native-reanimated": "~3.10.1",
"moti": "0.28"

[markmccoid]

You need moti v0.29.

Try

npm install moti@latest

[MarcHbb]

@markmccoid Still have the error after updating to 0.29, event with restarting ts server

[dav1rm]

Same issue here, even it's showing autocomplete options.

"react-native": "0.73.6",
"moti": "^0.29.0",
"react-native-reanimated": "^3.12.1"

[nandorojo]

Will check on a fix soon, thanks for reporting

[nandorojo]

I think it’s actually due to how newer TS versions resolve declaration file import() statements. I fixed something similar in Zeego which wrapped radix.

[Geeknerd1337]

Also getting this issue

"moti": "^0.29.0",
"react-native": "0.72.10",
"expo": "^49.0.5",
"react-native-reanimated": "~3.3.0",

[bryanmylee]

This issue occurs due to the type intersection that's being created over multiple definitions of the transition prop.

I'm getting this issue when using motify on a Tamagui View component as well, since it exposes a transition: "allow-discrete" prop.

I'm sure this will be an issue with other libraries as well. My suggestion would be to explicitly specify the prop type as MotiProps & Omit<OriginalProps, keyof MotiProps> to indicate that Moti will take over these props.

[bryanmylee]

A patch to this function might work:

const Motified = forwardRef<
      Ref,
//      Props &
      Omit<Props, keyof MotiProps> &
        AnimatedProps<Props> &
        MotiProps<Animate> & {
          children?: React.ReactNode
        }
    >(