Can't get moti to work with Expo or native

[alizahid]

Hey,

I can't seem to get moti working. I've tried it on both Expo and bare React Native project.

I've tried react-native-reanimated RC0, RC2, RC3. I'm on moti v0.4.1.

I've added react-native-reanimated/plugin to my Babel config.

But I get different errors with different versions.

Bare React Native with RC2

    14:40:34.086    Can't find variable: _globalSetter

_f
    14:38:00.888    Tried to synchronously call function {assign} from a different thread.

Occurred in worklet location: app/node_modules/@motify/core/src/use-map-animate-to-style.ts (240:33)

Possible solutions are:
a) If you want to synchronously execute this method, mark it as a Worklet
b) If you want to execute this method on the JS thread, wrap it using runOnJS
    14:38:00.893    TypeError: undefined is not an object (evaluating 'ref.current.last')

This error is located at:
    in ForwardRef(Wrapped) (at spinner.tsx:60)
    in RCTView (at View.js:34)
    in View (at spinner.tsx:33)
    in Spinner (at loading.tsx:15)
    in RCTView (at View.js:34)
    in View (at loading.tsx:13)
    in Loading (at src/index.tsx:20)
    in Willa (at app/index.js:18)
    in QueryClientProvider (at app/index.js:16)
    in App (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
    14:38:00.899    TypeError: undefined is not an object (evaluating 'ref.current.last')

This error is located at:
    in ForwardRef(Wrapped) (at spinner.tsx:47)
    in RCTView (at View.js:34)
    in View (at spinner.tsx:33)
    in Spinner (at loading.tsx:15)
    in RCTView (at View.js:34)
    in View (at loading.tsx:13)
    in Loading (at src/index.tsx:20)
    in Willa (at app/index.js:18)
    in QueryClientProvider (at app/index.js:16)
    in App (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
    14:38:00.903    TypeError: undefined is not an object (evaluating 'ref.current.last')

This error is located at:
    in ForwardRef(Wrapped) (at spinner.tsx:34)
    in RCTView (at View.js:34)
    in View (at spinner.tsx:33)
    in Spinner (at loading.tsx:15)
    in RCTView (at View.js:34)
    in View (at loading.tsx:13)
    in Loading (at src/index.tsx:20)
    in Willa (at app/index.js:18)
    in QueryClientProvider (at app/index.js:16)
    in App (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
    14:38:00.905    TypeError: undefined is not an object (evaluating 'ref.current.last')

This error is located at:
    in ForwardRef(Wrapped) (at spinner.tsx:60)
    in RCTView (at View.js:34)
    in View (at spinner.tsx:33)
    in Spinner (at loading.tsx:15)
    in RCTView (at View.js:34)
    in View (at loading.tsx:13)
    in Loading (at src/index.tsx:20)
    in Willa (at app/index.js:18)
    in QueryClientProvider (at app/index.js:16)
    in App (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
    14:38:00.973    undefined is not an object (evaluating 'Object.keys(mergedStyles)')

keys@[native code]
_f
[native code]
styleUpdater
[native code]
_f
[native code]

Bare React Native with RC0

    14:41:18.856    
Tried to synchronously call function {assign} from a different thread.
Solution is:
a) If you want to synchronously execute this method, mark it as a Worklet
b) If you want to execute this method on the JS thread, wrap it using runOnJS
    14:41:19.010    undefined is not an object (evaluating 'Object.keys(mergedStyles)')

keys@[native code]
_f
[native code]
styleUpdater
[native code]
_f
[native code]
    14:41:19.097    
Tried to synchronously call function {assign} from a different thread.
Solution is:
a) If you want to synchronously execute this method, mark it as a Worklet
b) If you want to execute this method on the JS thread, wrap it using runOnJS
    14:41:19.185    undefined is not an object (evaluating 'Object.keys(mergedStyles)')

keys@[native code]
_f
[native code]
styleUpdater
[native code]
_f
[native code]
    14:41:19.242    
Tried to synchronously call function {assign} from a different thread.
Solution is:
a) If you want to synchronously execute this method, mark it as a Worklet
b) If you want to execute this method on the JS thread, wrap it using runOnJS
    14:41:19.349    undefined is not an object (evaluating 'Object.keys(mergedStyles)')

keys@[native code]
_f
[native code]
styleUpdater
[native code]
_f
[native code]
    14:41:19.413    
Tried to synchronously call function {assign} from a different thread.
Solution is:
a) If you want to synchronously execute this method, mark it as a Worklet
b) If you want to execute this method on the JS thread, wrap it using runOnJS
    14:41:19.503    undefined is not an object (evaluating 'Object.keys(mergedStyles)')

keys@[native code]
_f
[native code]
styleUpdater
[native code]
_f
[native code]

What am I missing? I'm using 16.13.1 for React and 0.63.4 for React Native.

[nandorojo]

First bug looks like this reanimated error: https://github.com/software-mansion/react-native-reanimated/issues/1546

Second one looks like something someone else brought up to me, but they only experienced it with RN 0.64...I’ll see if I can find anything.

Are you using bare expo or vanilla RN? I've had no problems with Expo managed/bare, so I think it's related to Reanimated. Reanimated still has many quirks and bugs like this for installation it seems.

Could you create a reproduction repo?

[nandorojo]

Feel free to try the starter app from the docs to create a repro.

npx create-react-native-app -t with-moti

[nandorojo]

This might also be a caching issue. That's often it. Make sure you hard reset npm packages, clear all watchmen, reinstall, and expo start -c etc

[wibb36]

Did all the cleaning ... Same error "Tried to synchronously call function {assign} from a different thread...etc" using Bare RN 0.64.0-rc.3 and Renimated 2.0.0-rc.3

[nandorojo]

Can you use the starter and try to recreate it?

[antoinefotso]

i have same problem. react native 0.63.4

[nandorojo]

With vanilla RN?

[adeb6600]

Yes with Vanilla RN. 0.63.4 and 0.64.rc-3 i could only get it to work when i created a new project using the starter

[nandorojo]

That makes me think there's some sort of issue with Reanimated. Could you try all forms of clearing cache, deleting Reanimated, re-installing it, etc.?

[pontusab]

I got this issue too, I tracked it down to the object speard in the use-map-animate-to-style.ts file and changed that to Object.assign instead, it works for me but please try it out and see if it resolves your issue!

[nandorojo]

This should be fixed in the latest version of moti (anything above 0.5.8)!

Please try yarn add moti and let me know if it works.

[alizahid]

moti 0.6.0 works out of the box with react-native-reanimated 2.0.0 without a hitch!

[Pcummings]

I'm using moti 0.14.2 and react-native-reanimated 2.1.0 and I'm getting the same error.

[nandorojo]

Could you give more info? Try reanimated 2.2? Does it work without moti but with just reanimated?

[MudasserHassan21]

I am using reanimated 2.2 and it is working fine but when I use Moti, it gives me error of (evaluating '_$$_REQUIRE(_dependencyMap[4], "moti").MotiView')

[nandorojo]

are you on the latest moti? make sure you don’t have any dependencies that start with @motify/

I recommend upgrading reanimated to 2.3

[srvkmr130]

I am using reanimated 2.2 and it is working fine but when I use Moti, it gives me error of (evaluating '_$$_REQUIRE(_dependencyMap[4], "moti").MotiView')

getting same error