Question 33647 in React native Question posted in
The official React Native documentation can be found here.

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

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;
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

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

  2. 0

    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>
    Login or Signup to reply.
  3. 0

    Solution for me;

    babel.config.js

    plugins: ['react-native-reanimated/plugin']

    and "expo start -c"

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search