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;
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',
],
};