Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ViewPagerAndroid is not rendered under ScrollView using React-Native

I can use ViewPagerAndroid, but when I put it under a ScrollView component nothing gets rendered. Did anyone encounter this before?

React-Native: version 0.22 Platform: Android

This works as expected:

<ViewPagerAndroid style={{flex: 1}} initialPage={0}>
     <View><Text>View 1</Text></View>
     <View><Text>View 2</Text></View>
     <View><Text>View 3</Text></View>
</ViewPagerAndroid>;

The following renders nothing:

<ScrollView style={{flex: 1}}>
<ViewPagerAndroid style={{flex: 1}} initialPage={0}>
     <View><Text>View 1</Text></View>
     <View><Text>View 2</Text></View>
     <View><Text>View 3</Text></View>
</ViewPagerAndroid>
</ScrollView>

I created an issue on github too: #6469

like image 587
cubbuk Avatar asked Mar 15 '16 14:03

cubbuk


1 Answers

It is an old question but I also faced simmilar issue and solved it by adding contentContainerStyle={{ flex: 1 }} to scrollview tag. E.g.

<View style={{ flex: 1 }}>
    <ScrollView style={{ flex: 1 }} contentContainerStyle={{ flex: 1 }}>
        <ViewPagerAndroid style={{ flex: 1 }} initialPage={0}>
            <View><Text>View 1</Text></View>
            <View><Text>View 2</Text></View>
            <View><Text>View 3</Text></View>
        </ViewPagerAndroid>
    </ScrollView>
    {/*some other views*/}
    <View style={{ height: 20, width: null, flex: 1 }}/>
</View>
like image 95
Ankit Aggarwal Avatar answered Nov 01 '22 18:11

Ankit Aggarwal