How to implement a horizontal scrollview like an a

Question

How to implement a scrollview like an appstore? I'm going to scroll to the next content, when the scroll is done halfway

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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>
);