npm

Need private packages and team management tools?Check out npm Orgs. »

react-native-bpk-component-flat-list

5.0.5 • Public • Published

react-native-bpk-component-flat-list

Backpack React Native flat list component.

Installation

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

Usage

import React, { Component } from 'react';
import { Image } from 'react-native';
import BpkFlatList, { BpkFlatListItem, BpkFlatListItemSeparator } from 'react-native-bpk-component-flat-list';
 
const COUNTRIES = [
  { id: 'DZ', name: 'Algeria' },
  { id: 'CA', name: 'Canada' },
  { id: 'CD', name: 'Democratic Republic of the Congo' },
  { id: 'IT', name: 'Italy' },
  { id: 'JP', name: 'Japan' },
  { id: 'SE', name: 'Sweden' },
  { id: 'GB', name: 'United Kingdom' },
];
 
const FLAG_IMAGES = {
  'DZ': '/resources/algeria.png',
  'CA': '/resources/canada.png',
  'CD': '/resources/drcongo.png',
  'IT': '/resources/italy.png',
  'JP': '/resources/japan.png',
  'SE': '/resources/sweden.png',
  'GB': '/resources/uk.png',
};
 
export default class App extends Component {
  constructor() {
    super();
    this.itemOnPressCallbacks = {};
  }
 
  getItemOnPressCallback = countryId => {
    this.itemOnPressCallbacks[countryId] =
      this.itemOnPressCallbacks[countryId] ||
      (() => console.log(countryId));
    return this.itemOnPressCallbacks[countryId];
  };
 
  renderItem = ({ country }) => (
    <BpkFlatListItem
      key={country.id}
      title={country.name}
      image={<Image source={require(FLAG_IMAGES[country.id])} />}
      onPress={this.getItemOnPressCallback(country.id)}
      titleProps={{ weight: 'regular' }}
    />
  );
 
  render() {
    return (
      <BpkFlatList
        data={COUNTRIES}
        renderItem={this.renderItem}
        ItemSeparatorComponent={BpkFlatListItemSeparator}
      />
    );
  }
}

Props

BpkFlatList

Inherits all props from React Native's FlatList component.

BpkFlatListItem

Property PropType Required Default Value
onPress func true -
title string true -
image element 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.

BpkFlatListItemSeparator

None.

Theme Props

  • flatListSelectedItemColor

Keywords

none

install

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

Downloadsweekly downloads

316

version

5.0.5

license

Apache-2.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability