React-native: [Android] ViewPagerAndroid in ListView , can not show any children

[jinzhaoyu]

When i used ViewPagerAndroid as the ListView header, the ViewPagerAndroid can not present anything。

When android.support.v4.view.ViewPager#onMeasure() called , blow call stack has the problem:
android.support.v4.view.ViewPager#populate(int newCurrentItem)
View.getWindowToken() NOTE!! There returns null , so ViewPage#populate break !

I don't known why WindowToken is null ,please help me 。

This is test code :

/**
 * @author jinzhaoyu
 */
'use strict'

var React = require('react-native');
var {
    AppRegistry,
    View,
    Text,
    ListView,
    ViewPagerAndroid,
    } = React;

class Home extends React.Component{
    constructor(props){
        super(props);

        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => {
                r1 !== r2
            },
        });

        var data = [];
        for(var i =0;i<10;i++){
            data.push("Row "+i);
        }

        this.state = {
            list: this.dataSource.cloneWithRows(data),
        };
    }

    _renderHeader(){
        return (
            <ViewPagerAndroid
                style={{flex: 1,height:300}}
                initialPage={0}>
                <View style={{alignItems: 'center',justifyContent:'center',backgroundColor:'yellow'}}>
                    <Text style={{color:'red',fontSize:20}}>First page</Text>
                </View>
                <View style={{alignItems: 'center',justifyContent:'center',backgroundColor:'blue'}}>
                    <Text style={{color:'red',fontSize:20}}>Second page</Text>
                </View>
                <View style={{alignItems: 'center',justifyContent:'center',backgroundColor:'black'}}>
                    <Text style={{color:'red',fontSize:20}}>Third page</Text>
                </View>
            </ViewPagerAndroid>
        );
    }

    _renderRow(rowData: string, sectionID: number, rowID: number){
        return(
            <View style={{backgroundColor:'gray',flex:1,height: 40}}>
                <Text>{rowData}</Text>
            </View>
        );
    }

    render(){
        //return this._renderHeader();  //this worked !!
        //Flow code not work!
        return (
            <ListView dataSource={this.state.list}
                      renderHeader={this._renderHeader}
                      renderRow={this._renderRow}/>
        );
    }
}

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

[facebook-github-bot]

Hey jinzhaoyu, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If this is a feature request or a bug that you would like to be fixed by the team, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• If you don't know how to do something or not sure whether some behavior is expected or a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• We welcome clear issues and PRs that are ready for in-depth discussion; thank you for your contributions!

[haywoodfu]

+1 have the same problem on RN0.17...
So i used 'react-native-viewpager' https://github.com/race604/react-native-viewpager

[coyer]

+1 I have the same problem on RN0.19
ViewPagerAndroid cannot be used in ListView

[coyer]

I have resolved this problem.
add list prop:
removeClippedSubviews={false}

[jinzhaoyu]

Cool ! That's works for me , Thanks a lot !

[Aspsine]

@coyer
Thanks, this works.

[madevlb]

I got this problem。

[dbof10]

removeClippedSubviews={false} it works. However, in my case I use ViewPager in a ListView backed by RecyclerView for performance purpose, it doesn't work. Any solutions?

[snippet1234]

Not working in 0.50.3