react-native-infinite-scroll-grid
    Overview
    Versions
    Jobs
    Chat
    Dependencies
    Contributors
    Documentation
    Alternatives
    Discussions

react-native-infinite-scroll-grid

React Native infinite scroll grid component

0.1.0  •  Updated 2 years ago  •  by Shintaro Morikawa  •  MIT License

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)
2 column 3 column

Usage

Similar to FlatList.

example

<Grid
  numColumns={3}
  data={this.state.data}
  keyExtractor={item => 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 directory.

Development

How to run demo application

git clone git@github.com: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.

Popularity

Weekly Downloads
13
Stars
8

Maintenance

Development

Last ver 2 years ago
Created 2 years ago
Last commit 2 years ago
17 minutes between commits

Technology

Node version: null
14.6K unpacked

Compliance

MIT License
OSI Approved
0 vulnerabilities

Contributors

1 contributors
shintaro-morikawa
Maintainer, 2 commits
Works at cookpad

Tags

react-native
flatlist
grid
list
infinite
scroll
Ready for the next level?
Join Openbase's founding team to help us build the ultimate open-source app store, work with the latest technologies, and enjoy great culture, impact and autonomy
Openbase helps developers choose among and use millions of open-source packages, so they can build amazing products faster.
FacebookLinkedIn
© 2020 Devstore, Inc.