[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[bot]]

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/[email protected]

[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

[thespacemanatee]

Just wanted to chime in that we are also seeing the same issue and the workaround by @mitchellmcm27 above works as well.

[mlecoq]

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

[jayfeldman12]

My unit tests were failing for components that used snapPoint, even on the latest version of redash that fixes the problem with the app running. I was able to get around this by mocking snapPoint along with the other dependencies used in my project

jest.mock('react-native-redash', () => {
  return {
    snapPoint: jest.fn().mockImplementation((_value, _velocity, points) => points[0]),
    ReText: jest.requireActual('react-native').Text,
    withPause: jest.fn().mockImplementation((callback) => callback()),
  };
});

Normally I'd use a jest.requireActual inside that mock to not need to specify the others manually, but in this case requiring the redash library by itself was triggering the same CLAMP of undefined error, because just requiring it made the engine try to process that line.

[mlecoq]

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)

[RichardLindhout]

I still have this problem and all the above solutions won't work I'm on "react-native-reanimated": "^3.0.2", +

"resolutions": { "react-native-reanimated": "3.0.2" },

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[Latropos]

Closing since @mitchellmcm27 has provided snack fixing this problem. You can also replace Extrapolate.CLAMP with string literal "clamp" or define your own enum with extrapolation keywords.