React-native-reanimated: undefined is not an object (evaluating '_toConsumableArray(Array(length)).map')

[mrousavy]

Description

I've been receiving the error undefined is not an object (evaluating '_toConsumableArray(Array(length)).map') and I have no idea where it comes from. I've tried to not render anything but the error still persists. It must be one of the worklets (useDerivedValue, useAnimatedStyle) because it's being thrown async (after the render func returns)

Screenshots

Steps To Reproduce

Working on a repro.

Expected behavior

Actual behavior

Snack or minimal code example

Package versions

• React: 16.13.1
• React Native: 0.63.2
• React Native Reanimated: 2.0.0-alpha.6

[mrousavy]

My bad, I've noticed I've used the spread operator (...) in a custom hook. For anyone else wondering; spread operators aren't supported in worklets (yet?).

[jakub-gonet]

I've got the impression that some work was dedicated to fix spread operators. Could you please provide some reproduction example so we can test that?

[mrousavy]

@jakub-gonet It's still listed under Known problems and limitations 🤔

Here's the code that was causing issues:

import Reanimated, { Extrapolate, interpolate, useDerivedValue } from 'react-native-reanimated';

export function useOpacitiesForIndices(
    length: number,
    width: number,
    translateX: Reanimated.SharedValue<number>,
    onlyUseExactEdge = false,
): Reanimated.SharedValue<number[]> {
    return useDerivedValue(() =>
        [...Array(length)].map((_, index) => {
            const thisTranslateX = -(width * index);
            return interpolate(
                translateX.value,
                [thisTranslateX - width - width, thisTranslateX - width, thisTranslateX, thisTranslateX + width],
                [0, onlyUseExactEdge ? 0 : 1, 1, 0],
                Extrapolate.CLAMP,
            );
        }),
    );
}

[jakub-gonet]

I talked with @karol-bisztyga and seems like this may be a limitation of Hermes (or we use it in a strange way) on Android. One way to fix it would be to replace Hermes with JSC but we don't plan to support this for now (we may do that in the future though).

I'll close this for now - docs mention it and keeping this open only clutters issues list. Doing some debugging on this or providing simpler repro would be helpful for us if you want to help.

[mrousavy]

I'll finish my implementation, then I'll help debug this. Would be good to support this on hermes since RN 0.64 will ship with hermes opt-in on iOS.

[jakub-gonet]

For the future reference: work-arounding this can be achieved by changing [...Array(N)] to Array(N).fill()

[terrysahaidak]

For some reason spread and rest operators works for me with latest releases of both Reanimated and React Native. I'll double check