meliorence / meliorence/react-native-snap-carousel
App crash if using `Carousel` component
Open
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 10.5k
- Forks
- 2.3k
- PR merge metrics
- No merged PRs in 30d
Description
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.
- I have reviewed the documentation in its entirety, including the dedicated documentations 📚.
- [] 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>
)
}
}
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the provided Snack Expo reproduction and the Carousel component on Android with React Native 0.65.1 and react-native-snap-carousel 3.9.1. Investigate the reported this._callListeners.bind TypeError; done means the reproduction renders without the crash in production mode.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100