Unable to make a working Snack with Expo >= 45

[jb-5murf]

Describe the bug
After updating from 3.1.0 to 3.1.1 I get error 'Attempting to define property on object that is not extensible'. I tried to make a Snack to reproduce and investigate this error, but I'm not able to run even a minimal example - I get error 'a.g.__reanimatedWorkletInit is not a function. (In 'a.g.__reanimatedWorkletInit(n)', 'a.g.__reanimatedWorkletInit' is undefined)'. After switching Expo from 46 to 44 this Snack works.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://snack.expo.dev/@jb5/9c5aee
2. Run on Android or iOS
3. See error
4. Switch Expo to 44
5. Snack works

Expected behavior
No 'a.g.__reanimatedWorkletInit is not a function. (In 'a.g.__reanimatedWorkletInit(n)', 'a.g.__reanimatedWorkletInit' is undefined)' error in Expo >= 45

Versions (please complete the following information):

• expo: 46.0.0
• react: 18.0.0
• react-native: 0.69.5
• react-native-reanimated: ~2.9.1
• react-native-reanimated-carousel: ^3.1.1
• react-native-gesture-handler: ~2.5.0

[unixvb]

The same with react native CLI, after updating from 3.1.0 to 3.1.1 getting same error

[mym0404]

I suffer the same issue after bumping 3.0.3 -> 3.1.3

With a revert, the issue has been resolved.

This is the reanimated issue but not a bug.

It seems the usage of reanimated in this library is implemented in a slightly wrong way.

related issue

[dohooo]

How can I reproduce this problem locally?

[mym0404]

@dohooo I can't sure except it happens only 3.1.3 not 3.0.3

This is my code about that

I can't expect what is problem but I used these props.

<Carousel
                style={{ flex: 1 }}
                data={groups}
                renderItem={/* not related, crash even return null */}
                width={screenWidth}
                windowSize={3}
                onSnapToItem={index => setSelectedGroup(groups[index])}
                mode={'parallax'}
                modeConfig={{
                  parallaxScrollingScale: 1,
                  parallaxScrollingOffset: 23,
                }}
                loop={false}
              />

[dohooo]

Sorry, I've been working all day. I am really busy. It's a little tiring for me to maintain this project right now. 😞
Released in 3.1.2, and tell me the result, please. thx

[jb-5murf]

Hi, I'm still getting the same errors in 3.1.3. I think it's the same problem described in #298

[dohooo]

Hi, I'm still getting the same errors in 3.1.3. I think it's the same problem described in #298

Can you provide a repo that can reproduce this problem?

[jb-5murf]

// THIS WORKS IN ALL VERSIONS

import React from 'react';
import { View, Dimensions } from 'react-native';
import Carousel from 'react-native-reanimated-carousel';

const colors = ['red', 'orange', 'yellow', 'lime', 'cyan', 'blue', 'purple'];

export default function App() {
    return (
        <Carousel
            data={colors}
            renderItem={({ item }) => <View style={{ flex: 1, backgroundColor: item }} />}
            width={Dimensions.get('window').width}
        />
    );
}

// THIS WORKS ONLY IN react-native-reanimated-carousel <= 3.1.0

import React from 'react';
import { View, Dimensions } from 'react-native';
import Carousel from 'react-native-reanimated-carousel';

const colors = [
  <View style={{ flex: 1, backgroundColor: 'red' }} />,
  <View style={{ flex: 1, backgroundColor: 'orange' }} />,
  <View style={{ flex: 1, backgroundColor: 'yellow' }} />,
  <View style={{ flex: 1, backgroundColor: 'lime' }} />,
  <View style={{ flex: 1, backgroundColor: 'cyan' }} />,
  <View style={{ flex: 1, backgroundColor: 'blue' }} />,
  <View style={{ flex: 1, backgroundColor: 'purple' }} />,
];

export default function App() {
  return (
      <Carousel
          data={colors}
          renderItem={({ item }) => item}
          width={Dimensions.get('window').width}
      />
  );
}

[dohooo]

3.1.5

[jb-5murf]

It works 👍