Problems when used inside a ListView about react-native-viewpager

[zbtang]

Have you apply style={{flex:1}} to your ListView or it's parent view ? Refer to this

[KinanKazmi]

Yes. I used flex:1 on it, as in the code above. Also used flex:1 in the listView style. No difference. Just as i move the indicator out of the listView, it works perfectly. But not in its renderHeader.

[zbtang]

I just try it on my project used in ListView header, it works well. Which version of RN do you use?

[KinanKazmi]

React Native 0.31
Try adding more components to the header, before the indicatorviewpager. And my list view items load data from the server, so they are rendered after 3,4 sec.

[KinanKazmi]

Hey i tried it with the basic facebook movies tutorial also. Same problem. Below is the example code.
The IndicatorViewPager outsisde the listVIew works perfect. The one inside doesnt.

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

import {IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator} from 'rn-viewpager';

var MOCKED_MOVIES_DATA = [
    {
        title:  'Title',
        year:   '2015',
        posters: {
            thumbnail: 'http://i.imgur.com/UePbdph.jpg',
        }
    },
]; 
const {height, width} = Dimensions.get('window');
var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';

class testApp extends Component {

    constructor(props) {
        super(props);
        this.state = {
            dataSource: new ListView.DataSource({
                    rowHasChanged: (row1, row2) => row1 !== row2,
            }),
            loaded: false,
        };
    }

    componentDidMount() {
        this.fetchData();
    }

    fetchData() {
    fetch(REQUEST_URL)
        .then((response) => response.json())
        .then((responseData) => {
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
                    loaded: true,
                });

        })
        .done();
    }

    starter()
    {
        return (
            <View style = {{flex: 1}}>
                <Image style = {{flex:1}} source = {{uri: 'http://i.imgur.com/UePbdph.jpg'}}/>
                <View style = {{flex: 1}}>
                    <IndicatorViewPager
                        style={{height: height/2.78, backgroundColor: 'crimson'}}
                    >
                        <View>
                            <Image style = {{flex:1}} source = {{uri: 'http://i.imgur.com/UePbdph.jpg'}}/>
                        </View>

                        <View>
                            <Image style = {{flex:1}} source = {{uri: 'http://i.imgur.com/UePbdph.jpg'}}/>
                        </View>

                        <View>
                            <Image style = {{flex:1}} source = {{uri: 'http://i.imgur.com/UePbdph.jpg'}}/>
                        </View>

                        <View>
                            <Image style = {{flex:1}} source = {{uri: 'http://i.imgur.com/UePbdph.jpg'}}/>
                        </View>
                    </IndicatorViewPager>
                </View>
            </View>
        );
    }

    render() {
        if(!this.state.loaded) {
            return this.renderLoadingView();
        }

        return (
            <View style = {{flex:1}}>
            <IndicatorViewPager
                        style={{height: height/2.78, backgroundColor: 'crimson'}}
                    >
                        <View>
                            <Image style = {{flex:1}} source = {{uri: 'http://i.imgur.com/UePbdph.jpg'}}/>
                        </View>

                        <View>
                            <Image style = {{flex:1}} source = {{uri: 'http://i.imgur.com/UePbdph.jpg'}}/>
                        </View>

                        <View>
                            <Image style = {{flex:1}} source = {{uri: 'http://i.imgur.com/UePbdph.jpg'}}/>
                        </View>

                        <View>
                            <Image style = {{flex:1}} source = {{uri: 'http://i.imgur.com/UePbdph.jpg'}}/>
                        </View>
                    </IndicatorViewPager>
            <ListView
                renderHeader = {this.starter}
                dataSource={this.state.dataSource}
                renderRow={this.renderMovie} 
                style={styles.listView}
            />
            </View>
        );   
    }

    renderLoadingView() {
        return (
            <View style={styles.container} >
                    <Text>Loading Images...</Text>
            </View>
        );
    }

    renderMovie(movie) {
        return (
            <View style={styles.container}>

                <Image
                    source={{uri: movie.posters.thumbnail}}
                    style={styles.thumbnail}
                />

                <View style={styles.rightContainer}>
                    <Text style={styles.title}>{movie.title}</Text>
                    <Text style={styles.year}>{movie.year}</Text>
                </View>

            </View>
        );
    }


} // End of class 'MyFirstRNProject'

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    rightContainer: {
        flex: 1,
    },
    thumbnail: {
        marginLeft: 5,
        width: 53,
        height: 81,
    },
    title: {
        fontSize: 28,
        marginBottom: 8,
        textAlign: 'center',
    },
    year: {
        textAlign: 'center',
    },
    listView: {
        paddingTop: 20,
        backgroundColor: '#F5FCFF',
        flex: 1,
    },
});
AppRegistry.registerComponent('testApp', () => testApp);

[zbtang]

I change some your layout code, and it works. You can't use flex:1 everywhere.
The code is here:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, {Component} from 'react';
import {
    AppRegistry,
    Image,
    ListView,
    StyleSheet,
    Text,
    View,
    Dimensions,
} from 'react-native';

import {IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator} from 'rn-viewpager';

var MOCKED_MOVIES_DATA = [
    {
        title: 'Title',
        year: '2015',
        posters: {
            thumbnail: 'http://i.imgur.com/UePbdph.jpg',
        }
    },
];
const {height, width} = Dimensions.get('window');
var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';

class TestViewPager extends Component {

    constructor(props) {
        super(props);
        this.state = {
            dataSource: new ListView.DataSource({
                rowHasChanged: (row1, row2) => row1 !== row2,
            }),
            loaded: false,
        };
    }

    componentDidMount() {
        this.fetchData();
    }

    fetchData() {
        fetch(REQUEST_URL)
            .then((response) => response.json())
            .then((responseData) => {
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
                    loaded: true,
                });

            })
            .done();
    }

    starter() {
        return (
            <View >
                <Image style={{height: 100}} source={{uri: 'http://i.imgur.com/UePbdph.jpg'}}/>
                <IndicatorViewPager
                    style={{height: height / 2.78, width: width}}
                    indicator={<PagerDotIndicator pageCount={3}/>}
                >
                    <View style={{backgroundColor: 'red'}}/>
                    <View style={{backgroundColor: 'green'}}/>
                    <View style={{backgroundColor: 'yellow'}}/>
                </IndicatorViewPager>
            </View>
        );
    }

    render() {
        if (!this.state.loaded) {
            return this.renderLoadingView();
        }

        return (
            <View style={{flex: 1}}>
                <IndicatorViewPager
                    style={{height: height / 2.78}}
                    indicator={<PagerDotIndicator pageCount={3}/>}
                >
                    <View style={{backgroundColor: 'red'}}/>
                    <View style={{backgroundColor: 'green'}}/>
                    <View style={{backgroundColor: 'yellow'}}/>
                </IndicatorViewPager>
                <ListView
                    renderHeader={this.starter}
                    dataSource={this.state.dataSource}
                    renderRow={this.renderMovie}
                    style={styles.listView}
                />
            </View>
        );
    }

    renderLoadingView() {
        return (
            <View style={styles.container}>
                <Text>Loading Images...</Text>
            </View>
        );
    }

    renderMovie(movie) {
        return (
            <View style={styles.container}>

                <Image
                    source={{uri: movie.posters.thumbnail}}
                    style={styles.thumbnail}
                />

                <View style={styles.rightContainer}>
                    <Text style={styles.title}>{movie.title}</Text>
                    <Text style={styles.year}>{movie.year}</Text>
                </View>

            </View>
        );
    }


} // End of class 'MyFirstRNProject'

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    rightContainer: {
        flex: 1,
    },
    thumbnail: {
        marginLeft: 5,
        width: 53,
        height: 81,
    },
    title: {
        fontSize: 28,
        marginBottom: 8,
        textAlign: 'center',
    },
    year: {
        textAlign: 'center',
    },
    listView: {
        paddingTop: 20,
        backgroundColor: '#F5FCFF',
        flex: 1,
    },
});

AppRegistry.registerComponent('TestViewPager', () => TestViewPager);

[KinanKazmi]

It still has problem#2.
Scroll down in the list until list's end and then scroll back up..
ViewPager scrolls like a normal scroll view, instead of snapping to borders.

[zbtang]

I release a Test Video just now, and it did not give a recurrence. Did you try my code in the test project?

[KinanKazmi]

Oh you're using iOS. I'm having this issue on Android.

Yes, i tried the code. Still problem#2 on Android.

[zbtang]

On android platform, this lib is just a wrapper of ViewPagerAndroid. And I tried ViewPagerAndroid component , and still have the problem#2. So it's a problem of ViewPagerAndroid.
And then I search this problem on Google, and find this issue. And then I add this prop removeClippedSubviews={false} to ListView , and it works!
So you just need to add removeClippedSubviews={false} to your ListView.

[KinanKazmi]

Hey yes! Its working! Thanks a lot!
Add this to documentation also 💃

"Use 'removeClippedSubviews={false}' when using inside a ListView. "