V2: Crash when using withSpring and useAnimatedStyle

[lindskogen]

Description

Hi, I'm not sure if you are accepting issues at this time, but I was messing around trying to implement an example project by wcandillon and got this crash in native code:

libc++abi.dylib: terminating with uncaught exception of type facebook::jsi::JSError: undefined is not an object (evaluating 'Object.keys(oldStyle)')
keys@[native code]
[native code]
[native code]
[native code]

Which I could trace to this location on the JS side https://github.com/software-mansion/react-native-reanimated/blob/master/src/reanimated2/Hooks.js#L139

oldStyle seems to originate from what I initially return from useAnimatedStyle, but as you can see it's not undefined in my code: https://github.com/lindskogen/reanimated-2-playground/blob/master/SnapchatDiscovery.js#L122

I am running against latest master of reanimated-2 by using yalc.

Steps To Reproduce

1. Press an image
2. Wait 2 seconds

Expected behavior

Image will close by animating away

Actual behavior

Crash in native code (if app is being debugged by xcode it will break and show a stacktrace)

Snack or minimal code example

My code example is based on the reanimated-2-playground: https://github.com/lindskogen/reanimated-2-playground/blob/master/SnapchatDiscovery.js#L122

Package versions

• React: 16.11.0
• React Native: 0.62.2
• React Native Reanimated: 9c0e3c8a6fff9283f9365d87fd205898caa6a3b9

[Kida007]

I can reproduce the same bug by running the reanimated-2-playground.

[dvjn]

I had a similar issue in my own app (using react-native-reanimated v2 alpha), it crashes after using it and interacting with it for about 10-20 seconds

I don't know if it the same error or a different one, or even an error because of a different library. I posted this here because of the render thread error at the end of the logs. Can someone check this and point me in the right direction?

Error log: https://pastebin.com/WBeExG5v

[jakub-gonet]

@lindskogen, could you please check if this error still occurs on the latest alpha?

[lindskogen]

No crash anymore!

[davidfarinha]

I'm still seeing this error in the latest alpha (2.0.0-alpha.5) using the example code shown the documentation:

function Box() {
  const offset = useSharedValue(0);

  const animatedStyles = useAnimatedStyle(() => {
    return {
      transform: [{ translateX: offset.value * 255 }],
    };
  });

  return (
    <>
      <Animated.View style={[styles.box, animatedStyles]} />
      <Button onPress={() => (offset.value = Math.random())} title="Move" />
    </>
  );
}

[davidfarinha]

After more digging, I found this error is caused only with react-native 0.63.2 onwards, and you can easily reproduce this by updating the react native version in the V2 playground repo and running the app on a simulator or device. I temporarily fixed this by reverting back react-native to version 0.63.1:

npm i react-native@0.63.1 -S && npx pod-install && react-native run-ios --device

However since this error breaks V2 alpha in the latest react-native versions, this issue should ideally be re-opened.

[jakub-gonet]

Thanks for looking into this, will try to repro it tomorrow.

[Szymon20000]

@davidfarinha I've checked and it's working fine with RN 0.63.2 However, we have recently discovered that there are some problems with reanimated when someone uses npm instead of yarn. Closing, this for now as I wasn't able to reproduce the error.

[davidfarinha]

Thanks, I've just checked and it's still broken installing with npm, but does work using yarn with all the react-native versions I tested (0.63.0 - 0.63.2).

[yonjuukyuu]

Running in the same problem here as well with npm install: "react-native-reanimated": "~1.9.0", "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",

[friedebold]

same issue with react-native-reanimated@2.0.0-alpha.6.1 react-native": "https://github.com/expo/react-native/archive/sdk-39.0.2.tar.gz"

solution: downgrade reanimated to react-native-reanimated@2.0.0-alpha.6 and it works

[joaomellogomes]

in my case an error occurred inside the useAnimatedStyle callback. I wrapped the code in a try-catch, fixed the error and the hook worked again