Swiping behavior

[alexkuttig]

I experienced a different behavior when swiping to the next or to the previous slide.

When I want to swipe to the next slide, I only have to move the swipe only one pixel and the next slide gets centered. But when I want to swipe to the previous slide, I have to move the Carousel until the center of the previous slide is right of the center of the screen. I would expect that the "most centered slide" gets centered on release after swiping, either way I want to go to the next or the previous slide.

You could achieve this behavior by changing line 99 in your index.js to: let currentPage = ~~((currentPosition - 0.5 * pageOffset) / pageOffset);

[machadogj]

Hey @alexkuttig, thanks for reporting this. I can't seem to reproduce this. I did a small video, but maybe I'm missing something: http://recordit.co/0HLtM2Oo7v

The change you are asking me to do, would cancel the previous line: https://github.com/machadogj/react-native-carousel-control/blob/master/index.js#L100

Do you have any other info to reproduce? Maybe it has to do with some particular case. Here's my testing code:

  render() {
    const pages  = this.state.words.map(w => <Text style={{alignSelf:'center'}} key={w}>{w}</Text>);
    return (
      <View style={styles.container}>
        <Carousel
          initialPage={ 1 }
          pageStyle={ {backgroundColor: 'white', borderRadius: 5} }
          onPageChange={ this.handleOnPageChange.bind(this) }
        >
          { pages }
        </Carousel>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingVertical: 30,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#a5aCaF',
  },

[alexkuttig]

Hi,

you're right. In your video it seems to work like I would expect it to. But it didn't in my implementation, before changing the line of code I mentioned above.

Here is my Implementation:

render() {
        return (<View style={ styles.carouselContainer }>
                    <Carousel pageStyle={ {backgroundColor: 'rgba(0,0,0,0)', borderRadius: 5} } pageWidth={ 40 * vw } initialPage={ 2 } sneak={ 80 }>
                        <Image source={ require('../../../../assets/img/trikots/trikot-m-1.png') } style={ styles.carouselImage } resizeMode={ Image.resizeMode.contain }></Image>
                        <Image source={ require('../../../../assets/img/trikots/trikot-m-2.png') } style={ styles.carouselImage } resizeMode={ Image.resizeMode.contain }></Image>
                        <Image source={ require('../../../../assets/img/trikots/trikot-m-3.png') } style={ styles.carouselImage } resizeMode={ Image.resizeMode.contain }></Image>
                        <Image source={ require('../../../../assets/img/trikots/trikot-m-4.png') } style={ styles.carouselImage } resizeMode={ Image.resizeMode.contain }></Image>
                        <Image source={ require('../../../../assets/img/trikots/trikot-m-5.png') } style={ styles.carouselImage } resizeMode={ Image.resizeMode.contain }></Image>
                        <Image source={ require('../../../../assets/img/trikots/trikot-m-6.png') } style={ styles.carouselImage } resizeMode={ Image.resizeMode.contain }></Image>
                        <Image source={ require('../../../../assets/img/trikots/trikot-m-7.png') } style={ styles.carouselImage } resizeMode={ Image.resizeMode.contain }></Image>
                    </Carousel>
                </View>)
};

var styles = StyleSheet.create({
carouselContainer: {
        marginTop: 6 * vh,
        width: 100 * vw,
        height: 35 * vh,
    },
    carouselImage: {
        height: 35 * vh,
        width: 40 * vw,
        opacity: 0.4
    },
})

[machadogj]

@alexkuttig how much is vw?

[alexkuttig]

Oh sorry:

const vw = Dimensions.get('window').width / 100;
const vh = Dimensions.get('window').height / 100;

[machadogj]

Seems to be working for me with that config. Are you testing in iOS?

[alexkuttig]

I am testing an iOS and Android devices and on iOS Simulator. Without the changed line of code I wrote above it's not working for me (see video: http://www.screencast.com/t/LM5Uy4b6)

[machadogj]

Really nice app btw! Which version of RN are you using, and which version of react-native-carousel-control?

[alexkuttig]

Thanks :-)

RN: 0.32.0 react-native-carousel-control: 1.0.4

[machadogj]

I can't seem to reproduce it. Could you please try with the code from github directly:

https://raw.githubusercontent.com/machadogj/react-native-carousel-control/master/index.js

Looks like the line 99 you mention is different from what it's currently in github, so maybe we have different versions. If that's the case, I'll publish what's in github right away.

[alexkuttig]

Hi,

yes you were right. The code from github did differ from the one I got with npm install. The code from github works well! Thanks for your support! I think you can close this Issue now.

[machadogj]

Thanks, I'll re-publish and close!

[machadogj]

Just published 1.0.5, hopefully that one will straight from npm. Thanks for reporting!