Question: Vertical snapping for Android

[jruddell]

When rendering a parallax swiper with vertical set to true ( <ParallaxSwiper vertical) swiping up or down is just a regular scroll instead of snapping to the active page index.

Steps to reproduce: Render the following sample. scroll half way between pages on android.

<ParallaxSwiper
    vertical
>
    <ParallaxSwiperPage
        ForegroundComponent={<View style={styles.page}><Text style={styles.title}>page 1</Text></View>}
        BackgroundComponent={<View style={[styles.background, styles.slide1]}></View>}
    />
    <ParallaxSwiperPage
        ForegroundComponent={<View style={styles.page}><Text style={styles.title}>page 2</Text></View>}
        BackgroundComponent={<View style={[styles.background, styles.slide2]}></View>}
    />
</ParallaxSwiper>

styles..

const { width, height } = Dimensions.get('window')
const styles = StyleSheet.create({
  background: { width, height },
  page: {flex: 1, justifyContent: 'center', alignItems: 'center'},
  slide1: { backgroundColor: 'green', flex: 1 },
  slide2: { backgroundColor: 'red', flex: 1 },
  title: {fontSize: 30}
})

[zachgibson]

@jruddell ScrollView component doesn’t support vertical paging on Android unfortunately.

[jruddell]

@zachgibson can we add support for this? I kinda did a work around where I pass a scroll to property to the swiper after the on momentum callback... It's delayed but kinda works... Since we know what page for that call back couldn't we just snap to that page when it's vertical and you pass a new prop (say verticalSnap)?

[zachgibson]

Let me take a look at this and see what I can come up with. If I can make a solution that doesn’t feel janky we can add this to the lib, otherwise I’d say just fork this and do what you need to until a better solution arises.

[jruddell]

@zachgibson sounds good, did you follow what i was trying to explain? i can try and help clarify or hop on a call with you or something if you'd like

[zachgibson]

@jruddell Yeah I believe so. We actually have an async function containing the content offset as we scroll. Might be able to use that to see where we are in the scroll position then on finger lift use scrollTo to try and emulate the snapping effect.

[jruddell]

@zachgibson Ah yea that would be awesome, sounds like its possible and maybe not that complicated actually.. Could also make this an optional thing, like either let them scroll freely or snap based on a new prop :) I'm fairly busy with work stuff but if i have some free time i could probably lend a hand

[zachgibson]

@jruddell Haven’t tested this idea yet, I have a feeling it won’t be ideal. The snapping should be instantaneous when you lift your finger, whereas this solution will need to measure where you are then call scrollTo which will need to pass from JS to Native land.

If this PR got merged, we’d get this functionality natively: https://github.com/facebook/react-native/pull/10999 🤞

[CodeLuca]

ahhh! I need this so badly as well. :(