CODEWITHSUNDEEP
react-native
sugar
sugar

Reputation: 85

React native Android ScrollView pagingenabled not working

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>

Upvotes: 6

Views: 9024

Answers (4)

Noitidart
Noitidart

Reputation: 37328

On Android I had the issue where the children were not taking 100% width, so I ended up using Dimensions and setting width on each child:

render() {
    const { navigation:{ state:{params:{ type, petId }} } } = this.props;
    const { isSubmitting, submitError } = this.state;

    const stylePageWidth = { width:Dimensions.get('window').width };

    return (
        <View style={styles.main}>
            <ScrollView horizontal pagingEnabled>
                <View style={stylePageWidth}>

                </View>
                <View style={stylePageWidth}>

                </View>
            </ScrollView>
        </View>
     )

Upvotes: 1

Chris Dolphin
Chris Dolphin

Reputation: 1598

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

Upvotes: 3

Marco Argentieri
Marco Argentieri

Reputation: 31

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>
 );
}

Upvotes: 3

Daniel Schmidt
Daniel Schmidt

Reputation: 11921

The pagingEnabled property for android is supported since 0.28, in 0.27 it is not supported. You should check your react native version and upgrade.

Upvotes: 2

Related Questions