ScrollView vertical pagination not working

[julesmoretti]

Description

Added ScrollView to my component in this manner which works with pagination on android. But this I mean that as you swipe left or right the card gets centered to the screen on release.

<ScrollView
	style={styles.container}
	automaticallyAdjustInsets={false}
	horizontal={true}
	decelerationRate={0}
	snapToInterval={CARD_WIDTH}
	snapToAlignment="start"
	contentContainerStyle={styles.content}
	pagingEnabled={true}
>
	<View style={styles.card}>
		<Text>Card 1</Text>
	</View>
	<View style={styles.card}>
		<Text>Card 2</Text>
	</View>
	<View style={styles.card}>
		<Text>Card 3</Text>
	</View>
	<View style={styles.card}>
		<Text>Card 4</Text>
	</View>
</ScrollView>

let styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#F5FCFF',
	},
	content: {
		alignItems: 'center',
	},
	card: {
		flex: 1,
		backgroundColor: '#ccc',
		width: CARD_WIDTH,
		height: CARD_WIDTH,
		alignItems: 'center',
		justifyContent: 'center',
	}
}

Reproduction

But when changing horizontal={false} in the ScrollView component, the view scroll up and down but the pagination no longer works.

Solution

Identify how to retain the pagination experience on vertical scroll.

Additional Information

• React Native version: 0.36.1
• Platform: android
• Operating System: MacOSX 10.10

[oblador]

The snapTo* props are iOS only, but you can try this PR which adds them for android too: #10242

[mkonicek]

Yes, this is not supported as the Android native components don't support it.

[julesmoretti]

@mkonicek - It seems to now be supported... #10999

Could someone please merge this pull request and add docs to how to use it?

Thank you.

[julesmoretti]

@oblador - do you know who can help with this?

[Palisand]

@julesmoretti Following the first option of the accepted answer to this StackOverflow question allowed me to introduce vertical paging.

For iOS I just use ScrollView with snapping and for Android I'm doing something along the lines of

<ViewPagerAndroid style={{transform: [{rotate: "90deg"}]}}>
  <View style={{transform: [{rotate: "-90deg"}]}}>...</View>
  ...
</ViewPagerAndroid>

If you are trying to use the vertical pager as an overlay (i.e. absolute positioning) you will have to supply a width and height to the pager's children. Im my case, the overlay extends to the devices dimensions in portrait orientation:

const {width, height} = Dimensions.get("window");

<ViewPagerAndroid style={
  {
    top: 0, 
    bottom: 0, 
    left: 0, 
    right: width - height,  // important, otherwise your views will be cut!
    transform: [{rotate: "90deg"}]
  }
}>
  <View style={{width, height, transform: [{rotate: "-90deg"}]}}>...</View>
  ...
</ViewPagerAndroid>

Hope this helps.

[PimDeWitte]

Fixed this in #18679