React-native-swiper: Horizonal={false} doesn't work

Created on 9 Apr 2018 · 12Comments · Source: leecade/react-native-swiper

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

Source

antonioaltamura

👍1

Most helpful comment

可以说中文吗

pinuofeng on 19 Apr 2018

😄9

All 12 comments

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 on 18 Apr 2018

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?

FullstackJack on 18 Apr 2018

👍1

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

antonioaltamura on 18 Apr 2018

👎1

@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.

FullstackJack on 19 Apr 2018

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..

antonioaltamura on 19 Apr 2018

可以说中文吗

pinuofeng on 19 Apr 2018

😄9

@antonioaltamura the command npm i @nart/react-native-swiperseems not work well, but fighting！