react-native-reanimated: [3.0.0-rc.0] Cannot read property 'CLAMP' of undefined

There may be a namespacing or typing issue with Animated.Extrapolate. Typescript thinks it’s an enum but it’s actually defined as an object. Meanwhile, Extrapolation from the interpolation module is an enum.

Put this at the top of index.js

import Animated, { Extrapolation } from "react-native-reanimated";
try {
  console.log(Animated.Extrapolate.CLAMP);
} catch (error) {
  console.warn(error); //  [TypeError: Cannot read property 'CLAMP' of undefined]
}
Animated.Extrapolate = Extrapolation;
console.log(Animated.Extrapolate.CLAMP); // 'clamp'

Same here, but in tests with jest

for react-native-redash, a PR fixes the issue : https://github.com/wcandillon/react-native-redash/pull/493

More than using Extrapolate, it was using Animated.Extrapolate the cause of the issue

Upgrade to react-native-redash 17.0.0 has fixed this issue in my case (forcing this version in resolutions for bottom-sheet)

I’m not sure either, but enums are more complicated than just being compiled to JS objects.

interpolation.ts exports an enum called Extrapolation, which is rarely if ever used by libraries or end users. Most of us prefer to import { Extrapolate } from "react-native-reanimated"

interpolateColor.ts exports an object called Extrapolate with the same properties and values as the enum Extrapolation.

Both of these are exported (https://github.com/software-mansion/react-native-reanimated/blob/main/src/reanimated2/index.ts)

Meanwhile react-native-reanimated.d.ts exports an enum called Extrapolate.

I don’t understand how (or even if) this is causing the error, or the best way to fix it, but adding Animated.Extrapolate = Extrapolation at the top of my index.js seems to be a temporary workaround.