[3.0.0-rc.0] Cannot read property 'CLAMP' of undefined

[talaikis]

Description

Cannot read property 'CLAMP' of undefined when using Extrapolate.CLAMP

Actual behavior & steps to reproduce

Upgrade to v3 rc0

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or minimal code example, Package versions and Affected platforms sections.

[piaskowyk]

I have already checked it on two different applications and I am not able to reproduce your issue :/ Could you provide more information about your case or prepare a repo with reproduction?

[mitchellmcm27]

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'

[huduarte]

Same here, but in tests with jest

[jzxchiang1]

I got this same issue with @gorhom/bottom-sheet@4.1.5

[jzxchiang1]

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'

Aren't enums and objects accessed the same way in TS? Using the dot notation.

[jzxchiang1]

I don't understand why this error exists, but it currently breaks multiple libraries.

Namely, @gohom/bottom-sheet and react-native-redash. Anyone know what's going on?

[mitchellmcm27]

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.

[HuuNguyen312]

Before that, I used version 2.8.0. But after upgrading to 3.0.0, I got the same error
I am using this library: https://github.com/PedroBern/react-native-collapsible-tab-view