https://github.com/danilichev/rn-section-grid-list
Section Grid List for React Native
https://github.com/danilichev/rn-section-grid-list
react-native sectionlist typescript
Last synced: 4 months ago
JSON representation
Section Grid List for React Native
- Host: GitHub
- URL: https://github.com/danilichev/rn-section-grid-list
- Owner: danilichev
- License: mit
- Created: 2023-12-05T21:00:29.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-25T09:27:04.000Z (almost 2 years ago)
- Last Synced: 2025-10-04T02:59:44.391Z (9 months ago)
- Topics: react-native, sectionlist, typescript
- Language: TypeScript
- Homepage:
- Size: 1.55 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# rn-section-grid-list
This package for React Native provides SectionGridList component which works the same as usual SectionList but also adds the ability to render columns in sections by providing numColumns parameter (as in FlatList).
## Installation
```sh
npm install rn-section-grid-list
```
## Usage
```js
import { SectionGridList } from 'rn-section-grid-list';
// ...
const sections = useMemo(
() => [
{ data: ['00', '11', '22'], key: 'Section #1' },
{ data: ['33', '44', '55', '66', '77'], key: 'Section #2' },
{ data: ['88'], key: 'Section #3' },
],
[]
);
// ...
}
renderSectionHeader={({ section }) => (
{section.key}
)}
numColumns={3}
renderItem={({ item }) => (
{item}
)}
sections={sections}
/>;
// ...
const styles = StyleSheet.create({
item: {
alignItems: 'center',
backgroundColor: 'pink',
height: Dimensions.get('window').width * 0.3,
justifyContent: 'center',
minWidth: '30%',
},
rowSeparator: {
height: Dimensions.get('window').width * 0.05,
},
sectionHeaderText: {
fontSize: 16,
fontWeight: 'bold',
marginVertical: 8,
textAlign: 'center',
},
});
```
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)