Cannot read properties of undefined (reading 'toString') React Native Reanimated Carousel-CodePudding

I am trying to use React native reanimated carousel in an expo project knowing that I have already used it on a previous one and it worked fine. So I copied and pasted the same code but for an unknown reason I get the following error:

TypeError: Cannot read properties of undefined (reading 'toString')

So I used the bare code example from the documentation and found out I still get the same issue. Here are the version the packages I'm using :

"react-native-gesture-handler": "^2.8.0",
"react-native-reanimated": "^2.13.0",
"react-native-reanimated-carousel": "^3.1.5",

Example.js

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

function Index() {
    const width = Dimensions.get('window').width;
    return (
        <View style={{ flex: 1 }}>
            <Carousel
                loop
                width={width}
                height={width / 2}
                autoPlay={true}
                data={[...new Array(6).keys()]}
                scrollAnimationDuration={1000}
                onSnapToItem={(index) => console.log('current index:', index)}
                renderItem={({ index }) => (
                    <View
                        style={{
                            flex: 1,
                            borderWidth: 1,
                            justifyContent: 'center',
                        }}
                    >
                        <Text style={{ textAlign: 'center', fontSize: 30 }}>
                            {index}
                        </Text>
                    </View>
                )}
            />
        </View>
    );
}

export default Index;

CodePudding user response：

I think problem is in your renderItem function. You generate list of integers as data and try to pass the integer as a child to:

<Text style={{ textAlign: 'center', fontSize: 30 }}>
   {index}
</Text>

replace it with

<Text style={{ textAlign: 'center', fontSize: 30 }}>
   {`${index}`}
</Text>

CodePudding user response：

This problem occurred because of the absence of the reanimated plugin in the babel.config.js. Based off of the documentation here's what needs to be done.

Add Reanimated's Babel plugin to your babel.config.js

  module.exports = {
    presets: [
      ...
    ],
    plugins: [
      ...
      'react-native-reanimated/plugin',
    ],
  };