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

  • Volley requests not working with Django Sessions
  • The right way to make cross-platform RTMP streaming/playing app. Phonegap livu plugin?
  • How to embed i-jetty server into android application?
  • Android: Do the random SALT bytes passed to AESObfuscator need to stay the same?
  • Strange exception in application
  • How to implement leaf/intermediate certificate pinning 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

    Related posts:

    Programmatically Translate View Pre-Honeycomb
    How to get Android Studio to recognize file as source (test)
    Android Offline Request with Volley
    OpenCV image comparison in Android
    Android: Manage multiple push notification in device of an app
    Limitations of Cordova PhoneGap
  • How to add a footer in ListView?
  • How to transfer “data” between two device (android,iphone)?
  • How to develop custom status bar in android JellyBean 4.2.2
  • ByteArrayOutputStream to a FileBody
  • How can I switch to the graphic editor in Android Studio?
  • How to remove the “ .0” in a whole number when using double in java?
  • 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.