Horizonal={false} doesn't work

antonioaltamura commented 6 years ago

Which OS

Win 7 x64

Version

Which versions are you using:

react-native-swiper v1.5.12
react-native v0.54.0

Expected behaviour

Vertical swiper

Actual behaviour

Horizonal default swiper, with vertical buttons

Steps to reproduce

I've just installed RN and react-native-swiper. This is the code of the component


import React from 'react'
import {
    Text,
    View,
    ImageBackground
} from 'react-native'
import Swiper from 'react-native-swiper'

var styles = {
    wrapper: {
    },
    slide1: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    slide2: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#97CAE5'
    },
    slide3: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#92BBD9'
    },
    text: {
        color: '#fff',
        fontSize: 30,
        fontWeight: 'bold'
    }
}

export default () => <Swiper style={styles.wrapper} 
 horizontal={false} nextButton={<Text> next </Text>} prevButton={<Text> prev </Text>}>
    <View style={styles.slide1}>
        <ImageBackground
            source={require('./../img/slide-home1.jpg')}
            style={{ flex: 1,width: '100%', height: '100%'}}>
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Your Contents</Text>
            </View>

        </ImageBackground >
    </View>
    <View style={styles.slide2}>
        <Text style={styles.text}>Beautiful</Text>
    </View>
    <View style={styles.slide3}>
        <Text style={styles.text}>And simple</Text>
    </View>
</Swiper>

video

FullstackJack commented 6 years ago

Why is this package using ViewPagerAndroid? Seems ScrollView is perfectly cross-platform. I believe ViewPagerAndroid does not have vertical scrolling which prevents this option. Maybe just unwrap this conditional render and remove ViewPagerAndroid?

renderScrollView = pages => {
    if (Platform.OS === 'ios') {
      return (
        <ScrollView ref={this.refScrollView}
          {...this.props}
          {...this.scrollViewPropOverrides()}
          contentContainerStyle={[styles.wrapperIOS, this.props.style]}
          contentOffset={this.state.offset}
          onScrollBeginDrag={this.onScrollBegin}
          onMomentumScrollEnd={this.onScrollEnd}
          onScrollEndDrag={this.onScrollEndDrag}
          style={this.props.scrollViewStyle}>
          {pages}
        </ScrollView>
       )
    }
    return (
      <ViewPagerAndroid ref={this.refScrollView}
        {...this.props}
        initialPage={this.props.loop ? this.state.index + 1 : this.state.index}
        onPageSelected={this.onScrollEnd}
        key={pages.length}
        style={[styles.wrapperAndroid, this.props.style]}>
        {pages}
      </ViewPagerAndroid>
    )
  }

You could still conditionally render the styles.

Maybe it's changed a lot since you first built this, but it looks fine to use for Android. https://facebook.github.io/react-native/docs/scrollview.html

FullstackJack commented 6 years ago

I've now come to realize that both components do not allow vertical paging on Android. Could we perhaps live with a JavaScript implementation of page snapping for Android until the native vertical paging is supported on ScrollView?

antonioaltamura commented 6 years ago

I'm not sure where you see ViewPagerAndroid in my code..anyway I solved using https://www.npmjs.com/package/@nart/react-native-swiper

FullstackJack commented 6 years ago

@antonioaltamura It's in the source for react-native-swiper. I would like to know how @nart solved it given that neither ScrollView nor ViewPagerAndroid support native vertical paging for Android... I can't find the source repo for @nart/react-native-swiper.

antonioaltamura commented 6 years ago

Sorry, I read again your posts and understood your doubt. it seems this package is not greatly supported..I will take a look to the souce of @nart then..