react-native-textindicator-sectionlist-sidebar

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

Document

• Installation
• How to use
• Properties
• Demo
• Example code

Installation

execute the command to install react-native-textIndicator-sectionList-sidebar

npm install react-native-textIndicator-sectionList-sidebar

How to use

Import react-native-textindicator-sectionlist-sidebar

import SectionListSidebar from 'react-native-textindicator-sectionlist-sidebar';

Add the source code below to where you want to use it.

return (
      <SectionListSidebar
        ref={sectionListRef}
        data={sections}
        renderItem={renderContactList}
        itemHeight={30}
        sectionHeaderHeight={20}
        sectionHeaderStyle={styles.sectionHeader}
        locale="en"
      />
);

Properties

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. | | locale | X | "kor" | "en" | it is for sidebar item locale. Default is en. if you want place alphabet to sidebar item. set en or default | | 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 30 which is the same height as defaultSectionHeader. | | itemHeight | X | number | Section's item height. Default is 30. | | 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 0.| | renderSectionHeader | X | object | Returns section header component.| | data | O | object {key:string;title:string; data :Array}| Sections data.| | 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.|