meliorence / meliorence/react-native-snap-carousel

App crash if using `Carousel` component

Open
#871 4 comments 0 reactions 0 assignees View on GitHub

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 ([]).)

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

image

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.