React native Android ScrollView pagingenabled not working

Question

I am trying to use a horizontal ScrollView in React Native, and i set pagingEnabled={true}. It works well for iOS, but doesn't work for android

<ScrollView style={{marginTop: 10}}
            horizontal={true}
            pagingEnabled={true}
            ref={(scrollView) => { _scrollView = scrollView; }}
            onScroll={this._handleScroll}
            scrollEventThrottle={16}>
  <View style={styles.starView}>
    <Text>1</Text>
  </View>
  <View style={styles.videoView}>
    <Text>2</Text>
  </View>
  <View style={styles.techView}>
    <Text>3</Text>
  </View>
</ScrollView>

Answer 1

Use ViewPager for Android

render() {
  if (Platform.OS === 'ios') {
    //Scroll View 
    return this.renderIOS();
  } else {
    return this.renderAndroid();
  }
}


renderIOS(){
 <ScrollView style={{marginTop: 10}}
        horizontal={true}
        pagingEnabled={true}
        ref={(scrollView) => { _scrollView = scrollView; }}
        onScroll={this._handleScroll}
        scrollEventThrottle={16}>
         /*your content go here*/
        </ScrollView>
}


renderAndroid() {
return (
  <ViewPagerAndroid
    ref="scrollview"
    initialPage={this.state.initialSelectedIndex}
    onPageSelected={this.handleHorizontalScroll}
    style={styles.container}>
    /* your pages go here */
  </ViewPagerAndroid>
 );
}

Answer 2

For anyone that came across this issue regardless of their React Native version, pagingEnabled and horizontal={false} together aren't supported on Android.

https://github.com/facebook/react-native/issues/7780