react-native-sectionlist-contact is common sectionlist. it provide scrollToIndex with scrolling sidebar. and text will show you when you using scrollToIndex.
npm install react-native-sectionlist-contactreact-navtive-textIndicator-sectionList-sidebar is a simple sectionList With sidebar and textIndicator for iOS and Android.
you can scroll to touch sidebar index. it supports react version >= 0.60 and <= 0.59.
- Installation
- How to use
- Properties
- Demo
- Example code
execute the command to install react-native-textIndicator-sectionList-sidebar
``bash`
npm install react-native-textIndicator-sectionList-sidebar
`js`
import SectionListSidebar from 'react-native-textindicator-sectionlist-sidebar';
Add the source code below to where you want to use it.
`js`
return (
data={sections}
renderItem={renderContactList}
itemHeight={30}
sectionHeaderHeight={20}
sectionHeaderStyle={styles.sectionHeader}
locale="en"
/>
);
You can use All props of React Native Image for the original image(not full size modal image).
Below are react-native-image-modal specific properties.
| Prop | required | Type | Description |
| ------------------------------ | -------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| rtl | X | boolean| it is for sidebar position. Default is false. If you don't want Sidebar to be on the right side of the sectionlist, set true. |en
| locale | X | "kor" \| "en" | it is for sidebar item locale. Default is . if you want place alphabet to sidebar item. set en or default | 30
| sectionHeaderHeight | X | number | set the height of sectionlist. it is work for getItemLayout. if you put wrong height. it will Hundreds of items cause bugs such as slowing down and shaking the screen when scrolling. If you want to know more, see this post. default is which is the same height as defaultSectionHeader. | 30
| itemHeight | X | number | Section's item height. Default is . | 0
| footerHeaderHeight | X | number | Section's footer HeaderHeight. Default is .| 0
| separatorHeight | X | number | Section's list item separatorHeight. Default is .| 0`.|
| listHeaderHeight | X | number |SectionList top header height. Default is
| renderSectionHeader | X | object | Returns section header component.|
| data | O | object {key:string;title:string; data :Array
| sectionHeaderStyle | X | object | Section's header style. |
| renderSidebarItem | X | object |Returns sidebar's item component. |
| sidebarContainerStyle | X | object |sidebar container style.|
| sidebarItemStyle | X | object |sidebar's item style. |
| sidebarItemTextStyle | X | object |sidebar's item text style. |
| selectedText | X | object | it is print text when scrolling. if you want use custom renderSidebar with text indicator. you need put text. i will make some example. |
| isSelectedShow | X | object | if it false. print text not show when scrolling. |
| ref | O | object |sectionlist's ref. for working sidebar's scrollToIndex. if you not set ref. then not working scrollToIndex.|