React Native FrozenList

A List that just be composited by more ScrollView supports freezing columns, horizontal or vertical scrolling together.

Example running in iOS (captured by GIPHY CAPTURE)

View Hierarchy

Running demo env

• "react": "16.0.0",
• "react-native": "0.51.0"

Why using ScrollView

The FlatList or SectionList does not support the method scrollTo, so it does not work well for two List horizotal or vertical scrolling together through pure React-Native code. But ScrollView simply renders all child components at a once, so the FrozenList does not support render items lazily and has a performance downside.

Why iOS only

Because ScrollView on Andorid supports vertical scrolling only.

Features

• optional ListHeader
• optional SectionHeader
• RenderItem
• vertical scrolling together
• horizontal scrolling together

Installation

cd your project root direction

$ npm install react-native-frozenlist --save

Usage

code example App.js

import {FrozenList} from 'react-native-frozenlist'

 

Props

leftList

The prop leftList will rendering a frozen columns.

leftList:{
    listHeader,
    sectionHeader,
    renderItem,
    sections
}

• listHeader

  Type: function, Required: No

  A element rendered at the top of all items, default is no any style <View/>.

• sectionHeader

  Type: function, Required: No

  A element rendered and sticked at the top of each section, default is no any style <View/>.

  The function will be passed args with the following keys: section - the full section object as specified in sections sectionIndex - section's index within the sections

• renderItem

  Type: function, Required: Yes

  A element rendered for every item in every section. You can over-ride on a per-section basis.

  The function will be passed args with the following keys:

  section - the full section object as specified in sections

  sectionIndex - section's index within the sections

  item - the item object as specified in this section's data key

  itemIndex - item's index within this section's data

• sections

  Type: array, Required: Yes

  The actual data to render.Per section contains data for rendering items in this section, like the following

  sections:[{data:[]},{data:[]}]

rightList

The prop rightList will rendering other columns horizontal scrolling.

rightList:{
    listHeader,
    sectionHeader,
    renderItem,
    sections,
    contentContainerWidth
}

The props listHeader, sectionHeader, renderItem, sections akin to the corresponding props in leftList

• contentContainerWidth

  Type: number, Required: Yes

Ensure all child views within contentContainer are wraped and visible while horizontal scrolling.

Licensed

react-native-frozenlist is MIT Licensed