How to implement a scrollview like an appstore? I'm going to scroll to the next content, when the scroll is done halfway
Add a comment
|
4 Answers
You can implement it simple with FlatList, using horizontal and pagingEnabled boolean props and deviceWidth;
import React from 'react';
import { StyleSheet, Dimensions, ScrollView, View, Text } from 'react-native';
const deviceWidth = Dimensions.get('window').width;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
page: {
width: deviceWidth
},
});
const Slider = () => (
<View style={styles.container}>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
pagingEnabled>
<View style={styles.page}>
<Text> This is View 1 </Text>
</View>
<View style={styles.page}>
<Text> This is View 2 </Text>
</View>
</ScrollView>
</View>
);
2 Comments
codex
Thanks, Like the image How can I display some of the next scroll content in the current scroll?
gazdagergo
I was playing with it: just set the style of the very first page only to
width: deviceWidth * 0.9, and all the others to width: deviceWidth and you get the same result.The feature or functionality you are looking for is a simple horizontal slider. Use could use this npm library to get what you are looking for: https://www.npmjs.com/package/react-native-snap-carousel
Comments
I recommend using Flatlist which is React-Native's own component.
If you want to swipe the data Horizontally the use the prop horizontal={true} in the Flatlist.
1 Comment
Nino9612
Im not sure if this is the correct way to do it. The op asked for a "snapping" behaviour i'm not sure if flat list supports that already
Something like this is what you want?
Source code: https://snack.expo.io/@gusgard/react-native-swiper-flatlist-2
Library: https://www.npmjs.com/package/react-native-swiper-flatlist
