Image and Indicator doesn't appear

[ghost]

I start using react-native-viewpager with the example provided in the repository, now my code works but the images are not showing but the indicator is normally.

Reference-Image:

My Code is on the next line:

import React, { Component } from 'react'
import { Image, Dimensions, StyleSheet } from 'react-native';
import ViewPager from 'react-native-viewpager';

// ----- Variables -----

var IMGS = [
  'https://images.unsplash.com/photo-1441742917377-57f78ee0e582?h=1024',
  'https://images.unsplash.com/photo-1441448770220-76743f9e6af6?h=1024',
  'https://images.unsplash.com/photo-1440964829947-ca3277bd37f8?h=1024'
];

var deviceWidth = Dimensions.get('window').width;

var styles = StyleSheet.create({
  page: {
    width: deviceWidth,
  },
});

// ----- Class definition -----

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

        this._renderPage = this._renderPage.bind(this);

        this.dataSource = new ViewPager.DataSource({
          pageHasChanged: (p1, p2) => p1 !== p2,
        });

        this.state = {
          dataSource: this.dataSource.cloneWithPages(IMGS),
        }
    }

    render() {
        return (
            <ViewPager
                dataSource={this.state.dataSource}
                renderPage={this._renderPage}
                isLoop={true}
                autoPlay={false}/>
        )
    }

    _renderPage (data, pageID) {
        return (
            <Image
                source={{uri: data}}
                style={styles.page}/>
        );
    }
}

Is there something that I missing?. Thanks in Advance.

[mateofd]

Try this as the return statement of your _renderPage function:

<View key={pageID}>
    <Image source={{ uri: data }} style={styles.page} />
</View>

I think you need to define the "key" prop for each "page". Hope it works.

[jrgajera]

try this 'use strict';

import React from 'react';

import { AppRegistry, StyleSheet, Text, View, Dimensions, Image } from 'react-native';

import ViewPager from 'react-native-viewpager'; //var ViewPager = require('./ViewPager');

var deviceWidth = Dimensions.get('window').width;

var IMGS = [ 'https://images.unsplash.com/photo-1441742917377-57f78ee0e582?h=1024', 'https://images.unsplash.com/photo-1441716844725-09cedc13a4e7?h=1024', 'https://images.unsplash.com/photo-1441448770220-76743f9e6af6?h=1024', 'https://images.unsplash.com/photo-1441260038675-7329ab4cc264?h=1024', 'https://images.unsplash.com/photo-1441126270775-739547c8680c?h=1024', 'https://images.unsplash.com/photo-1440964829947-ca3277bd37f8?h=1024', 'https://images.unsplash.com/photo-1440847899694-90043f91c7f9?h=1024' ];

var TopScreen = React.createClass({ getInitialState: function() { var dataSource = new ViewPager.DataSource({ pageHasChanged: (p1, p2) => p1 !== p2 });

return {dataSource: dataSource.cloneWithPages(IMGS)};

},

render: function() { return (); },

_renderPage: function(data : Object, pageID : number | string,) { return (<Image source={{ uri: data }} style={styles.page}/>); } });

var styles = StyleSheet.create({ page: { width: deviceWidth } });

module.exports = TopScreen;