0.0.2 • Published 4 years ago

react-native-sectionlist-contact v0.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

react-native-textindicator-sectionlist-sidebar

Aug-24-2021 17-58-14

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

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.

ProprequiredTypeDescription
rtlXbooleanit is for sidebar position. Default is false. If you don't want Sidebar to be on the right side of the sectionlist, set true.
localeX"kor" | "en"it is for sidebar item locale. Default is en. if you want place alphabet to sidebar item. set en or default
sectionHeaderHeightXnumberset 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.
itemHeightXnumberSection's item height. Default is 30.
footerHeaderHeightXnumberSection's footer HeaderHeight. Default is 0.
separatorHeightXnumberSection's list item separatorHeight. Default is 0.
listHeaderHeightXnumberSectionList top header height. Default is 0.
renderSectionHeaderXobjectReturns section header component.
dataOobject {key:string;title:string; data :Array}Sections data.
sectionHeaderStyleXobjectSection's header style.
renderSidebarItemXobjectReturns sidebar's item component.
sidebarContainerStyleXobjectsidebar container style.
sidebarItemStyleXobjectsidebar's item style.
sidebarItemTextStyleXobjectsidebar's item text style.
selectedTextXobjectit is print text when scrolling. if you want use custom renderSidebar with text indicator. you need put text. i will make some example.
isSelectedShowXobjectif it false. print text not show when scrolling.
refOobjectsectionlist's ref. for working sidebar's scrollToIndex. if you not set ref. then not working scrollToIndex.