react-native-bpk-component-section-list
Backpack React Native section list component.
Installation
npm install react-native-bpk-component-section-list --save-dev
Usage
;;; const AIRPORTS = title: 'Beijing' country: 'CN' data: id: 'PEK' name: 'Capital' id: 'NAY' name: 'Nanyuan' title: 'Glasgow' country: 'UK' data: id: 'GLA' name: 'Glasgow International' id: 'PIK' name: 'Prestwick' title: 'Paris' country: 'FR' data: id: 'BVA' name: 'Beauvais' id: 'CDG' name: 'Charles de Gaulle' id: 'ORY' name: 'Orly' title: 'New York City' country: 'US' data: id: 'JFK' name: 'John F. Kennedy' id: 'LGA' name: 'LaGuardia' id: 'EWR' name: 'Newark' ; const FLAG_IMAGES = 'US': '/resources/usa.png' 'FR': '/resources/france.png' 'CN': '/resources/china.png' 'UK': '/resources/uk.png'; { super; thisitemOnPressCallbacks = {}; } { thisitemOnPressCallbacksairportId = thisitemOnPressCallbacksairportId || console; return thisitemOnPressCallbacksairportId; }; <BpkSectionListItem key=airportid title=airportname image=<Image source= /> onPress=this titleProps= numberOfLines: 1 /> ; { // Logic to filter the data based on user input. } { return <BpkSectionList sections=AIRPORTS renderItem=thisrenderItem renderSectionHeader= <BpkSectionListHeader title=sectiontitle /> ItemSeparatorComponent=BpkSectionListItemSeparator ListHeaderComponent= <BpkSectionListSearchField placeholder="Search airports" onChangeText=thisfilterItems /> ListEmptyComponent= <BpkSectionListNoResultsText>No results</BpkFlatListNoResultsText> /> ; }
Props
BpkSectionList
Inherits all props from React Native's SectionList component.
BpkSectionListItem
Property | PropType | Required | Default Value |
---|---|---|---|
onPress | func | true | - |
title | string | true | - |
image | instanceOf(Image) | false | null |
selected | bool | false | false |
titleProps | object | false | {} |
titleProps
titleProps
is passed down to the BpkText
used for the title. It accepts anything that React Native's Text
component does.
BpkSectionListHeader
Property | PropType | Required | Default Value |
---|---|---|---|
title | string | true | - |
BpkSectionListItemSeparator
Use this as the value for ItemSeparatorComponent
.
No props.
BpkSectionListSearchField
This can be used as the value for ListHeaderComponent
to allow users to search the list.
It's an instance of React Native's TextInput
component and accepts the same props.
BpkSectionListNoResultsText
Use this as the value for ListEmptyComponent
. It's generally only needed when the list can be searched.
Property | PropType | Required | Default Value |
---|---|---|---|
children | Node | true | - |
Theme Props
Same as flat list.