react-native-bpk-component-section-list

    6.0.1 • Public • Published

    react-native-bpk-component-section-list

    Backpack React Native section list component.

    Installation

    npm install react-native-bpk-component-section-list --save-dev

    Usage

    import React, { Component } from 'react';
    import { Image } from 'react-native';
    import BpkSectionList, {
      BpkSectionListHeader,
      BpkSectionListItem,
      BpkSectionListItemSeparator,
      BpkSectionListSearchField,
      BpkSectionListNoResultsText,
    } from 'react-native-bpk-component-section-list';
     
    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',
    };
     
    export default class App extends Component {
      constructor() {
        super();
        this.itemOnPressCallbacks = {};
      }
     
      getItemOnPressCallback = airportId => {
        this.itemOnPressCallbacks[airportId] =
          this.itemOnPressCallbacks[airportId] ||
          (() => console.log(airportId));
        return this.itemOnPressCallbacks[airportId];
      };
     
      renderItem = ({ airport, section }) => (
        <BpkSectionListItem
          key={airport.id}
          title={airport.name}
          image={<Image source={require(FLAG_IMAGES[section.country])} />}
          onPress={this.getItemOnPressCallback(airportId)}
          titleProps={{ numberOfLines: 1 }}
        />
      );
     
        filterItems = text => {
          // Logic to filter the data based on user input.
        }
     
      render() {
        return (
          <BpkSectionList
            sections={AIRPORTS}
            renderItem={this.renderItem}
            renderSectionHeader={(section) => (
              <BpkSectionListHeader title={section.title} />
            )}
            ItemSeparatorComponent={BpkSectionListItemSeparator}
            ListHeaderComponent={
              <BpkSectionListSearchField
                placeholder="Search airports"
                onChangeText={this.filterItems}
              />
            }
            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.

    Keywords

    none

    Install

    npm i react-native-bpk-component-section-list

    DownloadsWeekly Downloads

    3

    Version

    6.0.1

    License

    Apache-2.0

    Unpacked Size

    34.9 kB

    Total Files

    13

    Last publish

    Collaborators

    • frugoman
    • zgeor
    • anambl
    • marianeumayer-skyscanner
    • ojcurt
    • tiagohngl