meliorence / meliorence/react-native-snap-carousel

Fullscreen Slides Examples Result In `TypeError: Cannot read property 'length' of undefined`

Open
#445 7 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?

Question

I'm trying to execute the examples of having a full screen carousel but keep receiving a TypeError of not being able to read property of 'length' of undefined. What is considered 'undefined' and why length? Am I missing any additional step just to see a bare bones example?

Implementing the following from [here](https://github.com/archriss/react-native-snap-carousel/issues/60#issuecomment-298817274) results in `TypeError: Cannot read property 'length' of undefined`:

```
import React, { Component } from 'react';
import {
View,
Dimensions,
} from 'react-native';
import Carousel from 'react-native-snap-carousel';

const width = Dimensions.get('window').width;

class HomeScreen extends Component {

render () {
return (






);
}
}

export default HomeScreen;
```
screen shot 2018-12-26 at 11 49 57 am

And implementing the following from [here](Implementing the following from [here](https://github.com/archriss/react-native-snap-carousel/blob/master/doc/TIPS_AND_TRICKS.md#fullscreen-slides) also results in the same error:

```
import React, { Component } from 'react';
import {
View,
Dimensions,
} from 'react-native';
import Carousel from 'react-native-snap-carousel';

const { width: viewportWidth, height: viewportHeight } = Dimensions.get('window');

class HomeScreen extends Component {

_renderItem ({item, index}) {
return (
// or { flex: 1 } for responsive height
);
}

render () {
return (



);
}
}

export default HomeScreen;
```

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

(Check the step you've followed - replace the space character between the square brackets (`[]`) by an `x`.)

- [x] I have read [the guidelines regarding bug report](https://github.com/archriss/react-native-snap-carousel/blob/master/CONTRIBUTING.md).
- [x] I have reviewed [the documentation](https://github.com/archriss/react-native-snap-carousel/blob/master/README.md) in its entirety, including the dedicated documentations :books:.
- [x] I have searched for [existing issues](https://github.com/archriss/react-native-snap-carousel/issues) and made sure that the problem hasn't already been reported.
- [x] I am using [the latest plugin version](https://github.com/archriss/react-native-snap-carousel/releases).
- [x] I am following [the issue template](https://raw.githubusercontent.com/archriss/react-native-snap-carousel/master/ISSUE_TEMPLATE.md) closely in order to produce a useful bug report.

### Have you made sure that it wasn't a [React Native bug](https://github.com/archriss/react-native-snap-carousel/issues?utf8=%E2%9C%93&q=is%3Aissue+label%3A%22react-native+bug%22+)?

Yes

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

I've been building towards iOS only.

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

Yes

### Environment

Environment:
React: 16.6.3
React native: 0.57.8
react-native-snap-carousel: ^3.7.5

Target Platform:
iOS (12.1)

### Expected Behavior

I should be able to execute the examples without any issue. The output should be a full screen carousel example.

### Actual Behavior

Red screen (see screenshots above)

### Reproducible Demo

(Paste the link to a [Snack example](https://snack.expo.io/) in which the issue can be reproduced. Please follow [the guidelines](https://stackoverflow.com/help/mcve) for providing a Minimal, Complete, and Verifiable example.)

I've included two links, one for each version of the issue described above.
https://snack.expo.io/@mikeyamato/react-native-snap-carousel-(official)
https://snack.expo.io/@mikeyamato/react-native-snap-carousel-(unofficial)

screen shot 2018-12-26 at 12 33 55 pm

### Steps to Reproduce

I copied the code line for line.

(Write your steps so that anyone can reproduce the issue in the Snack demo you provided.)

1. Just hit the 'Tap to play' button
2.
3.

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 two linked Snack demos and the Carousel usage shown in the issue, especially the data and renderItem props. Reproduce the error, then inspect the component's handling of those inputs; done means the fullscreen example runs without the reported TypeError and the required usage is documented or corrected.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.