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

[jonnypage]

Trying the default example from the readme:

<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>

is erroring out with:

TypeError: Cannot read properties of undefined (reading 'toString')
This error is located at:
    in IScrollViewGesture (at Carousel.tsx:200)

Using:
"react-native-gesture-handler": "^2.4.2",
"react-native-reanimated": "^2.8.0"
"react-native-reanimated-carousel": "^3.1.3",
"react-native": "0.68.1"

[jonnypage]

[1974892005]

I also encountered this problem

[dohooo]

3.1.5

[asgu]

problem still exists on 3.1.5 when trying the default example, and tried to copy code from mentioned commit - also doesnt work

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

[dohooo]

problem still exists on 3.1.5 when trying the default example, and tried to copy code from mentioned commit - also doesnt work

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

It doesn't seem to have any relation with this library. Please check whether the config is correct.

[jonnypage]

The problem still exists, seeing the same error using 3.1.5 using the exact code above

• cleared node_modules and reinstalled with 3.1.5 in package

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

[dohooo]

The problem still exists, seeing the same error using 3.1.5 using the exact code above

• cleared node_modules and reinstalled with 3.1.5 in package

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

Could you provide a repository that can reproducing this problem? It seems this problem has a few people encountered. So I can fix it quickly if you provide more information to me.

[gzh1612]

The problem still exists, seeing the same error using 3.1.5 using the exact code above

• cleared node_modules and reinstalled with 3.1.5 in package

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

I also had this problem when using
Please refer to the documentation to configure react-native-reanimated
https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation
module.exports = {
presets: [
...
],
plugins: [
...
'react-native-reanimated/plugin',
],
};

[ugurcanalyuz]

Solution for me.

babel.config.js
plugins: ['react-native-reanimated/plugin']

and "expo start -c"

[JevonJ]

What worked for me:

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

and then

yarn start --reset-cache

[leozhang007]

When I add plugins, I get the following error

using:
"react-native-gesture-handler": "^2.14.0",
"react-native-reanimated": "^3.6.1",
"react-native-reanimated-carousel": "^3.5.1",

demo:
import {Dimensions, Text, View} from 'react-native'
import Carousel from 'react-native-reanimated-carousel'

function App() {
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}

)}
/>

)
}

export default App