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

mikeyamato commented 5 years ago

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 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 (
      <View>
        <Carousel
      sliderWidth={width}
      itemWidth={width}
      inactiveSlideScale={1}
      slideStyle={{ width }}
    >
        <View style={{ flex: 1 }} />
        <View style={{ flex: 1 }} />
    </Carousel>
    </View>
    );
  }
}

export default HomeScreen;

And implementing the following from [here](Implementing the following from here 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 (
        <View style={{ flex: 1 }} /> // or { flex: 1 } for responsive height
    );
  }

  render () {
    return (
      <View>
        <Carousel
          // data={this.state.entries}   // left this out as I have no entries to apply at the moment
          renderItem={this._renderItem}
          sliderWidth={viewportWidth}
          itemWidth={viewportWidth}
          slideStyle={{ width: viewportWidth }}
          inactiveSlideOpacity={1}
          inactiveSlideScale={1}
        />
      </View>
    );
  }
}

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.
[x] I have reviewed the documentation in its entirety, including the dedicated documentations :books:.
[x] I have searched for existing issues and made sure that the problem hasn't already been reported.
[x] I am using the latest plugin version.
[x] 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?

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 in which the issue can be reproduced. Please follow the guidelines 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)

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.)

Just hit the 'Tap to play' button

bd-arc commented 5 years ago

Hi @mikeyamato,

Well, the main issue seems to be the fact that you did not provide the carousel with any data.

As you can see here, the data prop is mandatory.

samandaryaei commented 5 years ago

I got the "data" ,However, I still have the same problem. "Type Error: can not read property 'lenght' of undefined.

bd-arc commented 5 years ago

@samandaryaei Please share an updated Snack example.

samandaryaei commented 5 years ago

@samandaryaei Please share an updated Snack example.

import React, { Component } from 'react'; import { Image } from 'react-native'; import { Container, Header, View, DeckSwiper, Card, CardItem, Thumbnail, Text, Left, Body, Icon,Button} from 'native-base'; import * as OHApi from '../../OHApi'; import { showMessage, hideMessage } from "react-native-flash-message"; import Carousel from 'react-native-snap-carousel'; import Video from './../Video/Video';

export default class CourseVideoList extends Component {

constructor(props) { super(props);

 this.state = {
  videoes: [],
  courseId: props.CourseId === undefined ? null : props.CourseId,
  userToken: '',
}

}

async componentDidMount() { const { CourseId, userToken } = this.props; try { console.log(CourseVideoList Component componentDidMount CourseId : ${CourseId} userToken:${userToken}); const videoes = await this.getCourseVideoList(userToken, CourseId); console.log('courseVideoList : '); console.log(videoes); this.setState({ videoes }); } catch (error) { console.log('CourseVideoList form componentDidMount : '); console.log(error); showMessage({ description: 'بروز مشکل ، لطفا مجدد سعی نمایید', message: "بروز مشکل", type: "danger", }); return; } }

async getCourseVideoList(userToken, courseId) { try { const list = await OHApi.getCourseVideoList(userToken, courseId); console.log('CourseVideoList : '); console.log(list); return list; } catch (error) { console.log('getCourseVideoList method : '); console.log(error); showMessage({ description: 'بروز مشکل ، لطفا مجدد سعی نمایید', message: "بروز مشکل", type: "danger", }); return; } }

  render () {
    return (
        <Carousel
          ref={(c) => { this._carousel = c; }}
          data={this.state.videoes.LessonVideoPagedItems}
          renderItem={()=>{
                console.log('Carousel renderItem :');
                console.log(item);
                const { CourseId, userToken } = this.props;
                return ( <Video video={ item } userToken={ userToken } /> );
          }}
          sliderWidth={300}
          itemWidth={250} 
          itemHeight={250}
          sliderHeight={300}
          removeClippedSubviews
          layout='stack'
        />  
    );
}

// render() { // return ( // //

// // <DeckSwiper // ref={(c) => this._deckSwiper = c} // dataSource={this.state.videoes.LessonVideoPagedItems} // renderEmpty={() => // <View style={{ alignSelf: "center" }}> // محتوایی یافت نشد // // } // renderItem={ item => { // console.log('DeckSwiper renderItem :'); // console.log(item); // const { CourseId, userToken } = this.props; // return <Video video={ item } userToken={ userToken } /> // }} // /> //

// <View style={{ flexDirection: "row", // flex: 1, // position: "absolute", // bottom: 50, // left: 0, // right: 0, // justifyContent: 'space-between', // padding: 15 }}>

// <Button iconLeft onPress={() => this._deckSwiper._root.swipeLeft()}> // // {/ Swipe Left /} // // <Button iconRight onPress={() => this._deckSwiper._root.swipeRight()}> // // {/ Swipe Right /} // //

// // ); // }

}

// import styles from './../Video/VideoList.css'; // import { // Container, // Header, // Right, // Left, // Content, // Button, // Text, // Form, // Icon, // Spinner, // } from 'native-base'; // import { Actions } from 'react-native-router-flux'; // import { AsyncStorage, FlatList, View } from 'react-native'; // import Video from '../Video/Video'; // import as Common from './../../Common'; // import { showMessage, hideMessage } from "react-native-flash-message"; // import as OHApi from '../../OHApi';

// export default class CourseVideoList extends Component { // constructor(props) { // super(props);

// this.state = { // videoes: [], // courseId: props.CourseId === undefined ? null : props.CourseId, // userToken: '', // } // } // //------------------------ // async componentDidMount() { // const { CourseId, userToken } = this.props; // try { // console.log(CourseVideoList Component componentDidMount CourseId : ${CourseId} userToken:${userToken}); // const videoes = await this.getCourseVideoList(userToken, CourseId); // console.log('courseVideoList : '); // console.log(videoes); // this.setState({ videoes }); // } catch (error) { // console.log('CourseVideoList form componentDidMount : '); // console.log(error); // showMessage({ // description: 'بروز مشکل ، لطفا مجدد سعی نمایید', // message: "بروز مشکل", // type: "danger", // }); // return; // } // } // //---------------------------- // async getCourseVideoList(userToken, courseId) { // try { // const list = await OHApi.getCourseVideoList(userToken, courseId); // console.log('CourseVideoList : '); // console.log(list); // return list; // } catch (error) { // console.log('getCourseVideoList method : '); // console.log(error); // showMessage({ // description: 'بروز مشکل ، لطفا مجدد سعی نمایید', // message: "بروز مشکل", // type: "danger", // }); // return; // } // } // //-----------------------------

// render() { // return ( // // <Header // style={styles.header} // androidStatusBarColor={Common.BRAND_COLOR_3} // iosBarStyle="light-content" // > // // // // ویدیوها // // //

// <FlatList // data={this.state.videoes.LessonVideoPagedItems} // renderItem={({ item, index }) => ( // <Video video={item} userToken={ this.props.userToken} />)} // keyExtractor={item => item.MediaId} // ListEmptyComponent={() => } // //onEndReached={this.handleLoadMore.bind(this)} // //onEndReachedThreshold={0.8} // //ListFooterComponent={this.handleFooter.bind(this)} // //refreshing={this.state.refreshing} // //onRefresh={this.handleRefresh.bind(this)} // // initialNumToRender={1} // /> // // ); // } // }

samandaryaei commented 5 years ago

@samandaryaei Please share an updated Snack example.

import React, { Component } from 'react'; import { Image } from 'react-native'; import { Container, Header, View, DeckSwiper, Card, CardItem, Thumbnail, Text, Left, Body, Icon,Button} from 'native-base'; import * as OHApi from '../../OHApi'; import { showMessage, hideMessage } from "react-native-flash-message"; import Carousel from 'react-native-snap-carousel'; import Video from './../Video/Video';

export default class CourseVideoList extends Component {

constructor(props) { super(props);
 this.state = {
  videoes: [],
  courseId: props.CourseId === undefined ? null : props.CourseId,
  userToken: '',
}
}

async componentDidMount() { const { CourseId, userToken } = this.props; try { console.log(CourseVideoList Component componentDidMount CourseId : ${CourseId} userToken:${userToken}); const videoes = await this.getCourseVideoList(userToken, CourseId); console.log('courseVideoList : '); console.log(videoes); this.setState({ videoes }); } catch (error) { console.log('CourseVideoList form componentDidMount : '); console.log(error); showMessage({ description: 'بروز مشکل ، لطفا مجدد سعی نمایید', message: "بروز مشکل", type: "danger", }); return; } }

async getCourseVideoList(userToken, courseId) { try { const list = await OHApi.getCourseVideoList(userToken, courseId); console.log('CourseVideoList : '); console.log(list); return list; } catch (error) { console.log('getCourseVideoList method : '); console.log(error); showMessage({ description: 'بروز مشکل ، لطفا مجدد سعی نمایید', message: "بروز مشکل", type: "danger", }); return; } }
  render () {
    return (
        <Carousel
          ref={(c) => { this._carousel = c; }}
          data={this.state.videoes.LessonVideoPagedItems}
          renderItem={()=>{
                console.log('Carousel renderItem :');
                console.log(item);
                const { CourseId, userToken } = this.props;
                return ( <Video video={ item } userToken={ userToken } /> );
          }}
          sliderWidth={300}
          itemWidth={250} 
          itemHeight={250}
          sliderHeight={300}
          removeClippedSubviews
          layout='stack'
        />  
    );
}
// render() { // return ( // //

// // <DeckSwiper // ref={(c) => this._deckSwiper = c} // dataSource={this.state.videoes.LessonVideoPagedItems} // renderEmpty={() => // <View style={{ alignSelf: "center" }}> // محتوایی یافت نشد // // } // renderItem={ item => { // console.log('DeckSwiper renderItem :'); // console.log(item); // const { CourseId, userToken } = this.props; // return <Video video={ item } userToken={ userToken } /> // }} // /> // // <View style={{ flexDirection: "row", // flex: 1, // position: "absolute", // bottom: 50, // left: 0, // right: 0, // justifyContent: 'space-between', // padding: 15 }}>

// <Button iconLeft onPress={() => this._deckSwiper.root.swipeLeft()}> // // {/* Swipe Left /} // // <Button iconRight onPress={() => this._deckSwiper.root.swipeRight()}> // // {/ Swipe Right */} // //

// // ); // }

}

// import styles from './../Video/VideoList.css'; // import { // Container, // Header, // Right, // Left, // Content, // Button, // Text, // Form, // Icon, // Spinner, // } from 'native-base'; // import { Actions } from 'react-native-router-flux'; // import { AsyncStorage, FlatList, View } from 'react-native'; // import Video from '../Video/Video'; // import as Common from './../../Common'; // import { showMessage, hideMessage } from "react-native-flash-message"; // import as OHApi from '../../OHApi';

// export default class CourseVideoList extends Component { // constructor(props) { // super(props);

// this.state = { // videoes: [], // courseId: props.CourseId === undefined ? null : props.CourseId, // userToken: '', // } // } // //------------------------ // async componentDidMount() { // const { CourseId, userToken } = this.props; // try { // console.log(CourseVideoList Component componentDidMount CourseId : ${CourseId} userToken:${userToken}); // const videoes = await this.getCourseVideoList(userToken, CourseId); // console.log('courseVideoList : '); // console.log(videoes); // this.setState({ videoes }); // } catch (error) { // console.log('CourseVideoList form componentDidMount : '); // console.log(error); // showMessage({ // description: 'بروز مشکل ، لطفا مجدد سعی نمایید', // message: "بروز مشکل", // type: "danger", // }); // return; // } // } // //---------------------------- // async getCourseVideoList(userToken, courseId) { // try { // const list = await OHApi.getCourseVideoList(userToken, courseId); // console.log('CourseVideoList : '); // console.log(list); // return list; // } catch (error) { // console.log('getCourseVideoList method : '); // console.log(error); // showMessage({ // description: 'بروز مشکل ، لطفا مجدد سعی نمایید', // message: "بروز مشکل", // type: "danger", // }); // return; // } // } // //-----------------------------

// render() { // return ( // // <Header // style={styles.header} // androidStatusBarColor={Common.BRAND_COLOR_3} // iosBarStyle="light-content" // > // // // // ویدیوها // // //

// <FlatList // data={this.state.videoes.LessonVideoPagedItems} // renderItem={({ item, index }) => ( // <Video video={item} userToken={ this.props.userToken} />)} // keyExtractor={item => item.MediaId} // ListEmptyComponent={() => } // //onEndReached={this.handleLoadMore.bind(this)} // //onEndReachedThreshold={0.8} // //ListFooterComponent={this.handleFooter.bind(this)} // //refreshing={this.state.refreshing} // //onRefresh={this.handleRefresh.bind(this)} // // initialNumToRender={1} // /> // // ); // } // }

note that "Video" component is ok and used in another components

dwilt commented 5 years ago

I'm using this swiper fullscreen without any problems. This sounds like a code issue with the supplied code above.

dohooo commented 3 years ago

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

meliorence / react-native-snap-carousel