https://github.com/hasanalyazidi/react-native-sectionlist-sidebar
SectionList with sidebar to jump to sections
https://github.com/hasanalyazidi/react-native-sectionlist-sidebar
android ios react-native sectionlist
Last synced: about 1 year ago
JSON representation
SectionList with sidebar to jump to sections
- Host: GitHub
- URL: https://github.com/hasanalyazidi/react-native-sectionlist-sidebar
- Owner: HasanAlyazidi
- License: mit
- Created: 2019-01-15T05:43:46.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-01-30T09:08:21.000Z (over 6 years ago)
- Last Synced: 2025-06-23T06:09:09.080Z (about 1 year ago)
- Topics: android, ios, react-native, sectionlist
- Language: JavaScript
- Homepage:
- Size: 8.79 KB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SectionList with Sidebar
SectionList with sidebar to jump to sections
## Installation
```sh
$ npm i react-native-sectionlist-sidebar
```
or
```sh
$ yarn add react-native-sectionlist-sidebar
```
## Usage
### 1. Import the component
```js
import SectionListSidebar from 'react-native-sectionlist-sidebar'
```
### 2. Embed the component
```js
class App extends React.Component {
render() {
return (
)
}
}
```
### 3. Pass properties to the component
## Properties
| Property | Type | Description | Required | Default |
|---------------------------|------------------|---------------------------------------|----------|----------------|
| data | array < object > | Sections data | Yes | |
| renderItem | function | Returns section list item component | Yes | |
| itemHeight | number | Section's list item height | Yes | |
| sectionHeaderHeight | number | Section's header height | No | 22 |
| sectionFooterHeight | number | Section's footer height | No | 0 |
| separatorHeight | number | Section's list item serparator height | No | 0 |
| listHeaderHeight | number | SectionList top header height | No | 0 |
| sectionHeaderTextStyle | object | Section's list item text style | No | { height: 22 } |
| renderSidebarItem | function | Returns sidebar's item component | No | |
| sidebarContainerStyle | object | Sidebar's container style | No | { width: 30 } |
| sidebarItemContainerStyle | object | Sidebar's item container style | No | |
| sidebarItemTextStyle | object | Sidebar's item text style | No | |
| containerStyle | object | SectionListSidebar component's style | No | |
| rtl | boolean | Reverse layout if set to true | No | false |
And all the optional props of ``. You can find them [here](https://facebook.github.io/react-native/docs/sectionlist#props).
## Examples
### Minimal example
```js
import React from 'react'
import { Text } from 'react-native'
import SectionListSidebar from 'react-native-sectionlist-sidebar'
export default class MinimalExampleScreen extends React.Component {
render() {
return (
{item}}
itemHeight={30}
/>
)
}
}
```
* **`key`**: section's sidebar item title, `string`
* **`title`**: section's title, `string`
* **`data`**: section's data, `[{}]` or `string`
### Custom section header component
```js
renderSectionHeader = ({ section }) => (
{section.title}
);
...
```
> Use `renderSectionHeader` only if you need to add components to the section headers. For simple headers use `sectionHeaderTextStyle`.
> `sectionHeaderHeight` must be equal to section header's height with top and bottom margins, paddings, and borders.
### Custom sidebar item component
```js
renderSidebarItem = ({ item, index }) => (
{ this.sectionListSidebar.jumpToSection(index); }}
style={{ marginVertical: 4, backgroundColor: 'lightgray' }}>
{item}
);
...
{ this.sectionListSidebar = ref; }}
renderSidebarItem={this.renderSidebarItem}
...
/>
```
> Use `renderSidebarItem` only if you need to fire a function before/after humping to section and/or add components to sidebar items. You may try accomplishing what you want using `sidebarItemContainerStyle` and `sidebarItemTextStyle` props first, and if you failed, use `renderSidebarItem`.
### More examples
* Names example with array of strings. [array-of-strings-example.js](https://github.com/HasanAlyazidi/react-native-sectionlist-sidebar/blob/master/examples/array-of-strings-example.js)
* Months example with array of objects. [array-of-objects-example.js](https://github.com/HasanAlyazidi/react-native-sectionlist-sidebar/blob/master/examples/array-of-objects-example.js)
## TODO
- [X] Custom sidebar component
- [X] Add RTL support
- [X] Add more examples
- [ ] Mark selected sidebar item
- [ ] Add Tests
- [ ] Your suggestion!