SectionList with Sidebar
SectionList with sidebar to jump to sections
Installation
$ npm i react-native-sectionlist-sidebar
or
$ yarn add react-native-sectionlist-sidebar
Usage
1. Import the component
2. Embed the component
Component { return <SectionListSidebar ... /> }
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 <SectionList />
. You can find them here.
Examples
Minimal example
Component { return <SectionListSidebar data= key: 'A' title: 'A' data: 'Aaron' 'Ali' renderItem= <Text key=itemkey>item</Text> itemHeight=30 /> }
key
: section's sidebar item title,string
title
: section's title,string
data
: section's data,[{}]
orstring
Custom section header component
<View style= height: 30 backgroundColor: 'lightgray' > <Image /> <Text>sectiontitle</Text> </View> ; ... <SectionListSidebar renderSectionHeader=thisrenderSectionHeader sectionHeaderHeight=30 ... />
Use
renderSectionHeader
only if you need to add components to the section headers. For simple headers usesectionHeaderTextStyle
.
sectionHeaderHeight
must be equal to section header's height with top and bottom margins, paddings, and borders.
Custom sidebar item component
<TouchableOpacity onPress= { thissectionListSidebar; } style= marginVertical: 4 backgroundColor: 'lightgray' > <Text style= padding: 10 color: 'black' textAlign: 'center' >item</Text> </TouchableOpacity> ; ... <SectionListSidebar ref= { thissectionListSidebar = ref; } renderSidebarItem=thisrenderSidebarItem ... />
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 usingsidebarItemContainerStyle
andsidebarItemTextStyle
props first, and if you failed, userenderSidebarItem
.
More examples
- Names example with array of strings. array-of-strings-example.js
- Months example with array of objects. array-of-objects-example.js
TODO
- Custom sidebar component
- Add RTL support
- Add more examples
- Mark selected sidebar item
- Add Tests
- Your suggestion!