SectionList with Sidebar

SectionList with sidebar to jump to sections

!SectionList-array-of-strings
!SectionList-array-of-objects

Installation

``sh
$ npm i react-native-sectionlist-sidebar
`

or

`sh
$ yarn add react-native-sectionlist-sidebar
`

Usage

$3

`js
import SectionListSidebar from 'react-native-sectionlist-sidebar'
`

$3

`js
class App extends React.Component {
render() {
return (
...
/>
)
}
}
`

$3

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.

Examples

$3

`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 (
data={[{ key: 'A', title: 'A', data: ['Aaron', 'Ali'] }]}
renderItem={({ item }) => {item}}
itemHeight={30}
/>
)
}
}
`

* key: section's sidebar item title, string
* title: section's title, string
* data: section's data, [{}] or string

$3

`js
renderSectionHeader = ({ section }) => (


{section.title}

);

...

renderSectionHeader={this.renderSectionHeader}
sectionHeaderHeight={30}
...
/>
`

> 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.

$3

`js
renderSidebarItem = ({ item, index }) => (
onPress={() => { this.sectionListSidebar.jumpToSection(index); }}
style={{ marginVertical: 4, backgroundColor: 'lightgray' }}>
{item}

);

...

ref={ref => { 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`.

$3

* Names example with array of strings. array-of-strings-example.js

!SectionList-array-of-strings


* Months example with array of objects. array-of-objects-example.js

!SectionList-array-of-strings

TODO

- [X] Custom sidebar component
- [X] Add RTL support
- [X] Add more examples
- [ ] Mark selected sidebar item
- [ ] Add Tests
- [ ] Your suggestion!