https://github.com/morishin/react-native-infinite-scroll-grid

Infine scroll grid component for React Native
https://github.com/morishin/react-native-infinite-scroll-grid

Last synced: 23 days ago
JSON representation

Infine scroll grid component for React Native

• Host: GitHub
• URL: https://github.com/morishin/react-native-infinite-scroll-grid
• Owner: morishin
• License: mit
• Created: 2018-06-06T11:56:48.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-06-06T12:46:37.000Z (over 6 years ago)
• Last Synced: 2024-10-12T02:59:55.397Z (about 1 month ago)
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-native-infinite-scroll-grid
• Size: 80.1 KB
• Stars: 10
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-infinite-scroll-grid

## Features

- Pull to refresh

- Scroll to load more

- Multi-column

    - Easy to set internal/external margins of grid

    - Avoid FlatList's layout bug that sets wrong width to the last row item (cf. [stackoverflow](https://stackoverflow.com/questions/43502954/react-native-flatlist-with-columns-last-item-width?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa))



2 column | 3 column

--- | ---

 | 

## Usage

Similar to FlatList.

### Example

```js

 item.id.toString()}

  renderItem={info => this.renderItem(info)}

  onRefresh={() => this.onRefresh()}

  refreshing={this.state.refreshing}

  onEndReached={() => this.onEndReached()}

  loadingMore={this.state.loadingMore}

  marginExternal={4}

  marginInternal={4}

/>

```

For details, see [demo](https://github.com/morishin/react-native-infinite-scroll-grid/tree/master/demo) directory.

## Development

### How to run demo application

```sh

git clone [email protected]:morishin/react-native-infinite-scroll-grid.git

cd react-native-infinite-scroll-grid

yarn install

yarn run build-for-demo:watch

cd demo

yarn install

yarn run start

```

After the above steps, you can launch demo app on your device via expo. The app reloads automatically when the source code has changed.