CODEWITHSUNDEEP
react-native
SatelBill
SatelBill

Reputation: 731

undefined is not an object (evaluating 'data.length')

I am very new to react-native. I just made a small app. And I wanted to add some images as introduction of app. So I added 'react-native-app-intro-slider' module. Then I got the following error.

undefined is not an object (evaluating 'data.length')

That is my app.js. I am not sure what the problem is.

import React, { Component } from 'react';
import { StyleSheet, View, Text, Image } from 'react-native';
import AppIntroSlider from 'react-native-app-intro-slider';

const slides = [
  {
    key: 's1',
    text: 'Best Recharge offers',
    title: 'Mobile Recharge',
    image: require('./intro/(1).jpg'),
    backgroundColor: '#20d2bb',
  },
  {
    key: 's2',
    title: 'Flight Booking',
    text: 'Upto 25% off on Domestic Flights',
    image: require('./intro/(2).jpg'),
    backgroundColor: '#febe29',
  },
  {
    key: 's3',
    title: 'Great Offers',
    text: 'Enjoy Great offers on our all services',
    image: require('./intro/(3).jpg'),
    backgroundColor: '#22bcb5',
  },
];

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showRealApp: false,
    };
  }
  _renderNextButton = () => {
  };
  _renderDoneButton = () => {
  };
  _onDone = () => {
    this.setState({ showRealApp: true });
  };
  _onSkip = () => {
    this.setState({ showRealApp: true });
  };
  _renderItem = ({ item }) => {
  };

  render() {
    if (this.state.showRealApp) {
      return (
        <View>
          <Text>aaaaa</Text>
        </View>
      );
    } else {
      return (
        <AppIntroSlider
          slides={slides}
          renderItem={this._renderItem}
          onDone={this._onDone}
          showSkipButton={true}
          onSkip={this._onSkip}
          renderDoneButton={this._renderDoneButton}
          renderNextButton={this._renderNextButton}
        />
      );
    }
  }
}

How to fix this error? Please help me.

Upvotes: 3

Views: 6329

Answers (2)

Pramod
Pramod

Reputation: 1940

You are not providing data to slides. So this error appears. Instead of "slides={slides}" it will be "data={slides}"
Working example: https://snack.expo.io/@msbot01/intrigued-graham-crackers 

<AppIntroSlider
          data={slides}
          renderItem={this._renderItem}
          onDone={this._onDone}
          showSkipButton={true}
          onSkip={this._onSkip}
          renderDoneButton={this._renderDoneButton}
          renderNextButton={this._renderNextButton}
        />

Upvotes: 1

Maycon Mesquita
Maycon Mesquita

Reputation: 4600

The mistake was: slides={slides} must be data={slides}.

Fixed code:

import React, { Component } from 'react';
import { StyleSheet, View, Text, Image } from 'react-native';
import AppIntroSlider from 'react-native-app-intro-slider';

const slides = [
  {
    key: 's1',
    text: 'Best Recharge offers',
    title: 'Mobile Recharge',
    image: require('./intro/(1).jpg'),
    backgroundColor: '#20d2bb',
  },
  {
    key: 's2',
    title: 'Flight Booking',
    text: 'Upto 25% off on Domestic Flights',
    image: require('./intro/(2).jpg'),
    backgroundColor: '#febe29',
  },
  {
    key: 's3',
    title: 'Great Offers',
    text: 'Enjoy Great offers on our all services',
    image: require('./intro/(3).jpg'),
    backgroundColor: '#22bcb5',
  },
];

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showRealApp: false,
    };
  }
  _renderNextButton = () => {
  };
  _renderDoneButton = () => {
  };
  _onDone = () => {
    this.setState({ showRealApp: true });
  };
  _onSkip = () => {
    this.setState({ showRealApp: true });
  };
  _renderItem = ({ item }) => {
  };

  render() {
    if (this.state.showRealApp) {
      return (
        <View>
          <Text>aaaaa</Text>
        </View>
      );
    } else {
      return (
        <AppIntroSlider
          data={slides}
          renderItem={this._renderItem}
          onDone={this._onDone}
          showSkipButton={true}
          onSkip={this._onSkip}
          renderDoneButton={this._renderDoneButton}
          renderNextButton={this._renderNextButton}
        />
      );
    }
  }
}

Upvotes: 6

Related Questions