App crash if using `Carousel` component

[zxy-c]

Is this a bug report, a feature request, or a question?

Bug report

Have you followed the required steps before opening a bug report?

(Check the step you've followed - put an x character between the square brackets ([]).)

• [] I have read the guidelines regarding bug report.
• [x] I have reviewed the documentation in its entirety, including the dedicated documentations :books:.
• [] I have searched for existing issues and made sure that the problem hasn't already been reported.
• [] I am using the latest plugin version.
• [] I am following the issue template closely in order to produce a useful bug report.

Have you made sure that it wasn't a React Native bug?

Not sure

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

Android

Is the bug reproductible in a production environment (not a debug one)?

Yes

Environment

React-native:0.65.1 React:17.0.2 react-native-snap-carousel: ^3.9.1

Expected Behavior

No error

Actual Behavior

TypeError: undefined is not an object (evaluating 'this._callListeners.bind')

This error is located at:
    in Carousel

Steps to Reproduce

Copy from https://snack.expo.dev/@vitkor/carousel-simple-example

import * as React from "react"
import {Text, View, SafeAreaView} from "react-native"

import Carousel from "react-native-snap-carousel"

export default class MyCarousel extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      activeIndex: 0,
      carouselItems: [
        {
          title: "Item 1",
          text: "Text 1",
        },
        {
          title: "Item 2",
          text: "Text 2",
        },
        {
          title: "Item 3",
          text: "Text 3",
        },
        {
          title: "Item 4",
          text: "Text 4",
        },
        {
          title: "Item 5",
          text: "Text 5",
        },
      ],
    }
  }

  _renderItem({item, index}) {
    return (
      <View
        style={{
          backgroundColor: "floralwhite",
          borderRadius: 5,
          height: 250,
          padding: 50,
          marginLeft: 25,
          marginRight: 25,
        }}>
        <Text style={{fontSize: 30}}>{item.title}</Text>
        <Text>{item.text}</Text>
      </View>
    )
  }

  render() {
    return (
      <SafeAreaView
        style={{flex: 1, backgroundColor: "rebeccapurple", paddingTop: 50}}>
        <View style={{flex: 1, flexDirection: "row", justifyContent: "center"}}>
          <Carousel
            layout={"default"}
            ref={ref => (this.carousel = ref)}
            data={this.state.carouselItems}
            sliderWidth={300}
            itemWidth={300}
            renderItem={this._renderItem}
            onSnapToItem={index => this.setState({activeIndex: index})}
          />
        </View>
      </SafeAreaView>
    )
  }
}

[dohooo]

@zxy-c Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2

[Evaldo-JR]

Hey dude, hows going?

So, you solved?

I believe that a parameter was missing in renderItem. You need to specify the item in _renderItem={this._renderItem} like this: renderItem={({item}) => this._renderItem({item})}.

Because _renderItem is not receiving data so {item.title} and {item.text} are undefined.

[efec89]

same error, did you solve it?

[ferdiamg]

Hey dude, hows going?

So, you solved?

I believe that a parameter was missing in renderItem. You need to specify the item in __renderItem={this.renderItem} like this: renderItem={({item}) => this._renderItem({item})}.

Because _renderItem is not receiving data so {item.title} and {item.text} are undefined.

This should go into the docs.. I was so confused about some weird error message.. thank you!