Can't find variable: performance on React Native (Expo)

[nksaraf]

🐛 Bug Report

When using v9 rc on react native with @react-spring/native, an error is being thrown in the following simple piece of code. the exception mentions Unhandled promise rejection: Can't find variable: performance

function SearchButton() {
  const navigation = useDrawer();
  const [state, setState] = React.useState("left");

  const styles = useSpring({
    paddingRight: state === "left" ? 20 : 100,
  });

  return (
    <AnimatedView
      // initial={"left"}
      // animate={state}
      style={styles}
    >
      <TouchableWithoutFeedback
        style={{ padding: 16 }}
        onPress={() => setState((s) => (s === "left" ? "right" : "left"))}
      >
        <MaterialIcons name="search" size={28} color={colors.blueGrey[800]} />
      </TouchableWithoutFeedback>
    </AnimatedView>
  );
}

This works with react-spring v8, but throws exception on the latest version on 9 rc.

Expected behavior

The padding value should animate when the search button is clicked

Link to repro (highly encouraged)

(Please provide either a CodeSandbox demo or an example GitHub repo.)

Environment

• react-spring v9.0.0-rc.3
• react-native v0.62 with expo SDK 38

[aleclarson]

Have you tried using an older version of react-native?

facebook/react-native#27885 seems to fix the issue. You could fork react-native and pull those changes in, or wait until they're released.

[nksaraf]

I was using the version that comes with expo SDK 38. I think they have their own patched changes on the react-native version, so I will have to work on their patched version. Not very comfortable working around those things yet. We reverted to using react-spring v8 for now.