React Native: ReanimatedError: stepAnimation is not a function (it is undefined), js engine: reanimated

[FluffyDiscord]

Is there an existing issue for this?

• [X] I have searched the existing issues

Current Behavior

Cannot animate using sequences

Expected Behavior

Animates as described in docs

Steps To Reproduce

<MotiView
            animate={{
                transform: [
                    {
                        translateX: [20, 0, -12, 14],
                    },
                    {
                        translateY: [-15, 10, -2, 9],
                    },
                ],
            }}
            transition={{
                loop: true,
                type: "timing",
                duration: 20,
            }}
/>

Versions

- Moti: 0.25.3
- Reanimated: 3.3.0
- React Native: 0.72.1

Screenshots

No response

Reproduction

ss

[nandorojo]

can you put the values inline instead of in the transform array?

[FluffyDiscord]

can you put the values inline instead of in the transform array?

Same error when doing this:

        <MotiView
           animate={{
                translateX: [20, 0, -12, 14],
                translateY: [-15, 10, -2, 9],
            }}
            transition={{
                loop: true,
                type: "timing",
                duration: 20,
            }}/>

[comontes]

I get

• Moti: 0.25.3
• Reanimated: 3.3.0
• React Native: 0.71.8

[nandorojo]

maybe a reanimated 3-specific error, should ideally have an easy fix

[cowlabs-xyz]

Experiencing same error with Reanimated 3 and expo 49, stepAnimation is not a function

[nandorojo]

if someone can spin up an example app i’m sure it’s somewhat of an easy fix, i’d review a PR

[cowlabs-xyz]

Great, In "submission to app store mode" right now but will try to get one done after!

[grgmgd]

I think this is related to #282 tried the following patch and got the issue resolved. There is also an open PR with this fix

diff --git a/node_modules/moti/src/core/use-motify.ts b/node_modules/moti/src/core/use-motify.ts
index 0b0680c..a95c5ae 100644
--- a/node_modules/moti/src/core/use-motify.ts
+++ b/node_modules/moti/src/core/use-motify.ts
@@ -244,7 +244,7 @@ const getSequenceArray = (

   const sequence: any[] = []

-  sequenceArray.forEach((step) => {
+  for (const step of sequenceArray) {
     const shouldPush =
       typeof step === 'object'
         ? step && step?.value != null && step?.value !== false
@@ -302,7 +302,7 @@ const getSequenceArray = (
         sequence.push(sequenceValue)
       }
     }
-  })
+  }

   return sequence
 }

[nandorojo]

is this on hermes or JSC?

[nandorojo]

fixed in 0.25.4

[grgmgd]

@nandorojo Hermes

[dattm97]

I got same error in:

• "react-native": "^0.73.7",
• "moti": "^0.28.1",
• "react-native-reanimated": "^3.8.1"

When i turn off hermes, error was gone. Please kindly check it, thanks @nandorojo.