React Native Horizontal FlatList

Improved horizontal FlatList for React Native - by

Provides the ability to specify number of rows to a horizontal React Native FlatList

Installation

yarn:

$ yarn add @idiosync/horizontal-flatlist

npm:

$ npm i @idiosync/horizontal-flatlist

Usage

import { HorizontalFlatList } from '@idiosync/horizontal-flatlist'

const SomeComponent = () => {
  const data = [
    'one',
    'two',
    'three',
    'four',
    'five',
    'six'
  ]

  const renderItem = ({item, row, col}) => {
    <Text>{item}</Text>
  }

  const keyExtractor = (item, row, col) => item 
 
  return (
    <HorizontalFlatList
      data={data}
      numRows={2}
      keyExtractor={keyExtractor}
      renderItem={renderItem}
    />
  )
}

Props

Props are inherited form FlatListProps, but with the following changes:

• renderItem - Overidden to include the column number

({ item: ItemT, row: number, col: number}) => JSX.Element

• keyExtractor - Overidden to include the column number

(item: ItemT, row: number, col: number) => string

• numRows - Number of items in each column

• columnStyle - ViewStyle for the column view

• horizontal - Removed

• numColumns - Removed