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

  • Animated Dashed Border in Android
  • Android Contact Picker with only Phone Numbers
  • Android Webkit: Absolutely positioned elements don't respect z-index
  • Send push to Android by C# using FCM (Firebase Cloud Messaging)
  • Default selector background in Clickable Views
  • How to filter out only relevant Media files in 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

  • Lazy load of images in ListView
  • Example: Android bi-directional network socket using AsyncTask
  • Secure HTTP Post in Android
  • How do I get IP_ADDRESS in IPV4 format
  • “Observer … was not registered” error
  • Android/SQLite: Insert-Update table columns to keep the identifier
  • 2 Solutions collect form web for “ViewPagerAndroid is not rendered under ScrollView using React-Native”

    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>
    

    Hope this will work for you.

    <ScrollView style={{flex: 1}}>
          <View 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>
         </View>
    </ScrollView>
    
    Android Babe is a Google Android Fan, All about Android Phones, Android Wear, Android Dev and Android Games Apps and so on.