prateek3255 / react-native-infinite-looping-scroll Goto Github PK

View Code? Open in Web Editor NEW

38.0 5.0 16.0 3.72 MB

A react native component that lets you scroll infinitely in both directions by repeating the same items. 📱

License: MIT License

JavaScript 100.00%

npm-package react-native react-native-list react-native-infinite-scroll hacktoberfest hacktoberfest2018

react-native-infinite-looping-scroll's Introduction

react-native-infinite-looping-scroll

A react native component that lets you scroll infinitely in both directions by repeating the same items.

Installation

Run npm install react-native-infinite-looping-scroll in your project directory.

Usage

This snippet would produce the output shown in the above gif

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, FlatList, } from 'react-native';
import InfiniteScroll from 'react-native-infinite-looping-scroll';


export default class App extends Component {
  constructor(props) {
    super(props)
  }
 
  render() {
    return (
      <View style={styles.container}>
        <InfiniteScroll
        data={[{ key: '1' }, { key: '2' }, { key: '3' }, { key: '4' }, { key: '5' }, { key: '6' }, { key: '7' }]}
        renderItem={({ item }) => <View style={styles.listItem}><Text style={styles.text}>{item.key}</Text></View>}
        />
        
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  listItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 50,
    margin: 2,
    borderColor: '#0099A8',
    borderWidth: 10,
    backgroundColor: '#FEFEFE'
  },
  text: {
    color: '#0099A8',
    fontSize: 32,
    fontWeight: 'bold'
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Props

It accepts all the FlatList props out of which renderItem and data are the compulsory ones and has one more extra prop called offset which lets you set the offset at which new data should be added. The default value is 20 and you can change it according to your item.

Pending Tasks

Make upward and downward scroll more smooth.
The scroll view should work even when the content size is less than the layout measurement.

Contributing

This is project is still in beta at the moment, but is still very basic, so if you want to work on the above mention tasks, or you find a bug just open a PR or an issue and ping me!

react-native-infinite-looping-scroll's People

Contributors

Stargazers

Watchers

Forkers

matthiasleitner stevenanthonyrevo tamaliudk webinspectinc mmaxiw serv2000 mnasiatka ahwelgemoed nataraj3 nachourpi solonifer a-troncoso tungtranhcmus har2008preet sinhnguyen9 abhismc01

react-native-infinite-looping-scroll's Issues

Upload better quality GIFs

The GIF used for demonstrating the infinite scroll effect in the readme are not so good, so use this component to create some better GIFs, either replace the existing ones or add new ones with some different kind of list components or some different component style. So think of the best ways that demonstrate what this component does.

Add and test the implementation for horizontal scroll

The component for now only works for vertical scrolling, so add the implementation for horizontal scroll and test it.

The readme example throws "data is not defined"

React Native v0.64.3 on Expo using this code:

import { Modal, StyleSheet, Text, View } from 'react-native';
import { CustomButton } from 'src/components/Buttons/CustomButton';
import InfiniteScroll from 'react-native-infinite-looping-scroll';

interface Params {
  visible: boolean;
  setTimePickerVisible: any;
}

export const TimePicker = ({ visible, setTimePickerVisible }: Params) => {
  return (
    <Modal
      animationType="slide"
      transparent={true}
      visible={visible}
      onRequestClose={() => setTimePickerVisible(!visible)}
    >
      <View>
        <Text>Select time</Text>
        <View>
          <InfiniteScroll
            data={[{ key: '1' }, { key: '2' }, { key: '3' }, { key: '4' }, { key: '5' }, { key: '6' }, { key: '7' }]}
            renderItem={({ item }: any) => (
              <View>
                <Text>{item.key}</Text>
              </View>
            )}
          />
        </View>
        <CustomButton title={'Set time'} onPressFunction={() => setTimePickerVisible(!visible)} />
      </View>
    </Modal>
  );
};

Throws

Uncaught ReferenceError: data is not defined
at new InfiniteScroll (index.js:13)
at constructClassInstance (react-dom.development.js:12716)
at updateClassComponent (react-dom.development.js:17425)
at beginWork (react-dom.development.js:19073)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at beginWork$1 (react-dom.development.js:23964)
at performUnitOfWork (react-dom.development.js:22779)
at workLoopSync (react-dom.development.js:22707)
at renderRootSync (react-dom.development.js:22670)
at performSyncWorkOnRoot (react-dom.development.js:22293)
at react-dom.development.js:11327
at unstable_runWithPriority (scheduler.development.js:468)
at runWithPriority$1 (react-dom.development.js:11276)
at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
at flushSyncCallbackQueue (react-dom.development.js:11309)
at discreteUpdates$1 (react-dom.development.js:22420)
at discreteUpdates (react-dom.development.js:3756)
at dispatchDiscreteEvent (react-dom.development.js:5889)

Adding Horizontal prop to InfiniteScroll not working

Not able to scroll horizontally when horizontal is set to true.
<InfiniteScroll data={[ { key: "a1" }, { key: "a2" }, { key: "a3" }, { key: "a4" }, { key: "a5" }, { key: "a6" }, { key: "a7" }, ]} renderItem={({ item, index }) => ( <View style={{ width: 50 }}> <Text>{item.key}</Text> </View> )} keyExtractor={(item, index) => item.key + index} horizontal showsHorizontalScrollIndicator={false} legacyImplementation={false} />

Make the infinite scroll work even when the content size is less than the layout measurement

The infinite scroll doesn't work when the content is less than the screen size, i.e. when the scroll bar doesn't appear. So make it work even when the content is less than or equal to the screen size. The implementation of this effect is pretty basic, you can just take a look at the code to understand how it works. Ping me if you need any help in understanding.

Modify the documentation

Improve the documentation for better readability.

滑动到头的时候会卡断一下

Does this Support Auto Scrolling?

Like If I want the list to loop and scroll by itself?

React js

I'm looking for something similar for react js (gatsby), do you know of anything?

Modify the implementation a little bit to make the scrolling effect smoother

I have tried creating my own implementation for producing an infinite looping scroll effect using FlatList, but it is not too smooth yet, so if anyone has an idea for making the scroll effect a bit more smooth, or a completely new implementation for this effect, then they can create a pull request for the same.