About <ViewPagerAndroid> nested

react-native v0.27.2 : ViewPagerAndroid nested , the inner ViewPagerAndroid content couldn’t show 。 E.g :

<ViewPagerAndroid
    style={{flex:1,backgroundColor:'#FF0000'}}
    onPageSelected={(e)=>{}}
    keyboardDismissMode="on-drag">
    //===========outer View 1===========
    <View>
        <Text>Page 1</Text>
        <ViewPagerAndroid
            style={{flex:1,backgroundColor:'#FFFFFF'}}
            onPageSelected={(e)=>{}}
            keyboardDismissMode="on-drag">
            //===========inner View 1===========
            <View>
                <Text style={{color:'#000000'}}>Sub Page 1</Text>
            </View>
            //===========inner View 2===========
            <View>
                <Text style={{color:'#000000'}}>Sub Page 1</Text>
            </View>
        </ViewPagerAndroid>
    </View>
    //===========outer View 2===========
    <View>
        <Text>Page 2</Text>
    </View>
</ViewPagerAndroid>

The inner view couldn’t show , but can be slide !

Thx!

[maxs15]

Why did you close the issue ? It looks like there is still an issue with the ViewPagerAndroid component…

[chrisciszak]

I think there is some kind of defect which causes the inner ViewPagerAndroid not being shown on the initial render. However I noticed when I change the height of the element in my script editor, it re-renders the inner view correctly and is visible without problem. This is a nasty workaround but it’s the only way I have managed to work around this issue.

In the inner ViewPagerAndroid add the following: componentDidMount() { setInterval(() => this.setState({height: height, width: width}), 0); }

width and height is your desired dimension, however it must be different than what you pass to this component initially as obviously if you set it to the same values React will not re-render as the state would be already the same.