bolan9999/react-native-largelist

The best large list component for React Native.

react-native-largelist

React-native-largelist is a very high performance large list component for React-Native. (iOS & Android)

Features

• Large data source list component, items reused by group, Less CPU/Memory usage. Never blanks.
• Fully Cross-platform bounces (iOS & Android).
• Highly customize Refreshing and Loading. Fully support react-native-lottie. More smoothly animation.
• Big media optimization. (New)
• Nested support. (New)
• Paging enabled. (New)

Preview

Installation

yarn add react-native-spring-scrollview react-native-largelist

RN 0.50-59 without pod

react-native link react-native-spring-scrollview

RN 0.60+ with pod

npx pod-install

Documentation

API reference and more: Documentation Reference

License

react-native-largelist is released under the MIT license. View LICENSE for details.

react-native-largelist's Issues

自定义上下拉

目前RN没有一个好用的自定义上下拉，或者是已没有维护了。推荐作者后续可以添加一下

Support for inverted

Is there any plans to support the inverted boolean similar to FlatList?

来感谢一下，性能的确比 FlatList 好很多

我的 FlatList 里每个 item 就一张图片，一小段文字，俩按钮（下载和删除）。
不知道为什么 FlatList 就是卡的要死（RN 0.52 + Android）

搞了几天，后来换成 LargeList 问题就好了。

特此感谢。
（请随意关闭此 issue）

is this support for dynamic height?

Sometimes we have different height for each components, and it's not good for us to define the height one by one, is this support for dynamic height?

Reload Data question

Hi,
i have a problem reloading data in my large list.
My large list shows a list of status [accepted/not accepted] and a button to toggle that status.
When i click the button i toggle the status of that row updating my list but the row doesn't re-render and the status always remain the previous status also if the data list changed.
I've tried using reloadData(), and in fact i see the section header blink so the list is reloading, but the row remain unchanged.
Can you help me?

new data is not rendered after network call in onLoadMore

Hi,
I have a large list implementation whose data source is an array in my redux state. On scrolling down to the bottom my "onLoadMore" method gets called which contains the network call to fetch the data and append to my data source in redux state. Now, what happens is that I can see more scrolling space but there is no actual data rendered. I can only see the white screen below my initial data or say the blank scrolling space below my initial data.

Maybe this will give you some idea --

onLoadMore={() => {
                               this.appendPaginatedData();
                               this.forceUpdate();
                               this.root.reloadData();
                           }}
                           heightForLoadMore={() => 100}

 appendPaginatedData() {
           this.setState({ skip: this.state.skip + this.state.limit });
           this.props.paginatedApi(this.getSearchParams(this.state.limit, this.state.skip));
        
   }

my this.appendPaginatedData() method contains the actual network call to fetch the data and append to my data source in redux state.
What is going wrong? Why is this not able to render the new data?

下拉刷新bug

滑动section悬浮之后，再滑到顶，下拉section布局盖住了下拉刷新动画

支持自定义下拉刷新视图吗

behaviour for "keyboardShouldPersistTaps" not working.

Hi,
Thanks for adding behaviour for "keyboardShouldPersistTaps" to the list.

But this is not working on any platform. I'm passing the prop "keyboardShouldPersistTaps" to the list, and giving "handled"(any type is not working eg. "always", "never", "true", "false") but not working yet.
Am I doing anything wrong?

Steps to reproduce -

1. render a large list component with the prop "keyboardShouldPersistTaps"

<LargeList
                ref={ref => (this.indexes = ref)}
                numberOfSectionPoolSize={20}
                style={{ flex: 1 }}
                numberOfSections={() => this.props.data.length}
                numberOfRowsInSection={(section) => this.props.data[section].child.length}
                heightForCell={this.heightForCell}
                heightForSection={() => 39}
                keyboardShouldPersistTaps={"handled"}
                renderItemSeparator={() => null}
                onLargeListDidUpdate={() => this.setState({ loading: false })}
            />

How to fix this?
RN version - 0.51.0
react-native-largelist version - 1.2.6

请问有具体示例吗

如何去掉边框？border 总有一点灰色的小边框

问题的截图（元素之间有一条浅色灰线）：

代码：

import React, { Component } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { LargeList } from "react-native-largelist";

export default class LogsScreen extends React.Component {
  constructor(props) {
    super(props);
    this.haha = [{ key: 1, title: 'nice' }, { key: 2, title: 'hello' }, { key: 3, title: 'world' }]
  }
  render() {
    return (
      <View style={{flex: 1, backgroundColor:'#fff'}}>
        <LargeList
          style={{ flex: 1}}
          bounces={true}
          safeMargin={600}
          numberOfRowsInSection={section => 3}
          heightForCell={(section, row) => row % 2 ? 100 : 100}
          renderCell={this.renderItem.bind(this)}
          heightForSection={section => section % 2 ? 0 : 0}
        />
      </View>
    );
  }
  renderItem(section, row) {
    let food = this.haha[row];
    return (<View style={{flex: 1}}>
      <Text>{food.title}</Text>
    </View>)
  }

}

Behaviour for "keyboardShouldPersistTaps" in the list.

Kudos to this nice list you made. 👍 👍
Can there be any behavior like "keyboardShouldPersistTaps"? Like that in Flatlist/SectionList given by react native.
Currently when the keyboard is opened and you tap on any list item, first the keyboard is closed and another tap is required to actually select the item.

Steps to reproduce:

1. Open the keyboard while the list is also opened.
2. Select the list item.

Again, thanks for making performant lists in react native.

Gray background

There is a gray background in this component which I cannot locate inorder to disable as it recks my design

Animated createAnimatedComponent(LargleList) bind with onScroll Animated.event

Created LargeList Component through

const AnimatedFeedScrollView = Animated.createAnimatedComponent(LargeList);

and used it with

onScroll = {Animated.event(
  [
    {
      nativeEvent: {
        contentOffset: { y: this.myScrollYVar }, // not works
      },
    },
  ],
  {
    useNativeDriver: true, // maybe problem with this?
    listener: event => {
      console.log(event.nativeEvent.contentOffset.y); // it works
      if (event.nativeEvent.contentOffset.y <= 0) {
       // code
      }
    },
  }
)}

but I cannot make it work,
any suggestions.

sentionheader滑动时消失

请问一下上拉加载如何处理呢

numberOfRowsInSection

每一个section拥有的cellrow 数量不一样 要怎么使用 numberOfRowsInSection没找到正确的使用方法！求指导

LargeList does not scroll

My list shows but does not scroll unless put in scrollview.
My render code.This does not scroll

  render() {
    return (
      <View  style={{ flex: 1 }}>
   {this.props.Homedata.postsloading&&     <ActivityIndicator size='large' animating  />}
     <LargeList
     bounces
  style={{ flex: 1 }}
  safeMargin={600}
  numberOfRowsInSection={section => this.itemsdata[section].data.length}
  numberOfSections={()=>this.itemsdata.length}
  heightForCell={() => 350}
  heightForSection={section => 70}
  renderHeader={this.sectionheader}
  renderCell={this.examplerender}
  showsVerticalScrollIndicator
  heightForLoadMore={()=> 100}
  onScroll={this.handleScroll}
  onLoadMore={()=> {
    console.log('load more')
   // if(this.props.Homedata.floading) return;
    this.makeRemoteRequest();
  }
  
  }
  renderSection={section => {
    return (
        <TouchableOpacity delayPressIn={70} activeOpacity={0.8} style={{ padding: 20, height: 70 }} >
  <View>
<Text style={{fontSize: 18, fontWeight: 'bold'}}  >  {this.capitalizeFirstLetter(this.itemsdata[section].title)} </Text>
</View>
    </TouchableOpacity>
    );
  }}
/>
      </View>
    );
  }

scrollToIndexPath BUG

when I use scrollToIndexPath if animated = false, the screen rendering will broken.

===============

用scrollToIndexPath，animated = false的时候 调用这个函数, list展现会出现bug。
(貌似scrollTo这个方法也有这样的bug)

Support multi-columns

FlatList and SectionList supports multi-columns.
https://facebook.github.io/react-native/docs/flatlist.html#numcolumns
IMO, it's the last piece of important feature to support now. Thanks.

Rows just show after all rows render

Hi,

I'm implementing largelist and I found that any row will just show if all rows are render. Or maybe I'm just doing something wrong ... Maybe because I'm using native-base to make my views ? I really don't know.

My array have ~240 items.

Here is a video of it:

I think rows should show as they render, not after all are rendered.

Code:

import { Content, Text, ListItem } from "native-base";

 renderItemLarge(section, row) {
    let item = this.props.array[row];
    //console.log('render ' + row);
    return (
      <ListItem onPress={() => this._handleClickIndex(row)} style={{ backgroundColor: 'transparent' }}>
       <Text>
            {item.loc}
             ...
       </Text>
      </ListItem>
    );
  }

 renderLargeList() {
   const { array } = this.props;
    if (!fetched) {
      return (
        <View>
          ...
        </View>
      );
    } else {
      return (
        <Content>
          <LargeList
            numberOfRowsInSection={() => array.length}
            heightForCell={() => 90}
            renderCell={this.renderItemLarge.bind(this)}
          />
        </Content>
      );
    }
  }

Versions:

• react-native: 0.51.0
• native-base: 2.3.5
• react-native-largelist: 1.1.0

RN contribution

Why dont you contribute to RN instead of creating new repos?

Drop-in replacement for FlatList and SectionList

After going through the API, it seems like it's really possible to make this lib a drop-in replacement for FlatList. What do you think? Thanks.

Maybe the only missing feature is multi-column?

onLoadMore is not working

Hi,

I am trying to implement the pagination with largelist , but onLoadMore prop is not working . callBack doesn't print the console message.

                        <LargeList
                        ref={ref => (this.root = ref)}
                        style={{ flex: 1 }}
                        bounces={true}
                        numberOfRowsInSection={section => list.length}
                        heightForCell={() => 220}
                        renderCell={(section, row) => <Card data={list[row]} navigation=
                        {this.props.navigation} />}
                        renderItemSeparator={() => null}
                        numberOfCellPoolSize={15}
                        speedLevel1={20}
                        numberOfSectionPoolSize={1}
                        onRefresh={() => this._onRefresh()}
                        refreshing={this.state.refreshing}
                        onLoadMore={() => {
                            setTimeout(() => {
                                this.forceUpdate();
                                this.root.reloadData();
                                console.log("load more called")
                            }, 1000);
                        }}
                        heightForLoadMore={() => 220}
                    />

RN :0.51.0
react-native-largelist: 1.2.6,

iPhone X 下拉刷新后 无法回到顶部

在iPhone X 下来刷新后 顶部会留下空白, 无法回到顶部, 这个改如何解决呢, 其他机型正常, 大约是一个iPhone X导航栏的高度, 偏移了 88

Sometimes it renders blank rows

Hi,

i'm trying to use this library because i have a large list so.. at first glance i was perfect and really fast, but when i scroll at the bottom of the list i see some blank rows.

this is my code:

<LargeList
  style={{ flex: 1 }}
  numberOfRowsInSection={section => this.sectionsInSections[section].info.length}
  numberOfSections={() => Object.keys(this.sectionsInSections).length}
  heightForCell={() => this.ITEM_HEIGHT}
  heightForSection={() => this.ITEM_HEIGHT}
  renderCell={this.renderItem2}
  renderSection={this.renderSectionHeader2}
  renderItemSeparator={() => <ListSeparator />}
/>

renderItem2 and renderSectionHeader2 only returns a and this.ITEM_HEIGHT is 40.

Don't know if this is important but LargeList is wrapped inside this component https://github.com/skv-headless/react-native-scrollable-tab-view

Thank you

Any possibility to make it reload when pulling from top?

There's onLoadMore call back that is invoked when pull up on the bottom.
But can we extend or add more callback that going to be invoked when pull up on the top?

You may saw that some of ListView shows loading spinner at the header when user try to pull up on the top.

Thanks

大神，有没有计划添加空视图？

例如当有头部组件，但是section和row数量都为0的时候渲染组件宽高大小的空视图

enable nativeOptimize for iOS breaks touch events in custom cells

Great work with the larget list, however we are still not satisfied with the performance. So we tried to use native option, rendering works great but the cells don't receive their own touch events for some reason.

Running on latest 1.1.0 release.

It's a TouchableOpacity we've added to the cell and in another cell it's a horizontal scrollview. Only cell selection works.

您好，反馈问题

当在 renderHeader 属性 中加入元素的时候 上拉加载不起作用了没有回调，去掉后是正常的

onRefresh 的功能

onRefresh 是否支持自定义事件、视图？
因为有可能下拉后，并不是要刷新，而是顶部加载。
例如：今日头条，下拉刷新后，滚动到新加载的N条内容结尾，会有一个文字按钮[刚刚看到这里 点击刷新]，点击后回到顶部刷新新的数据（下拉加载）

android中Section头部经常性消失

android中Section头部经常性消失，我想用它做城市选择器，可以每次滑动多的时候就回出现Section头部消失的现象，很让人难过

提供更多代码示例：比如替换掉 FlatList 的例子 - Provide more example

我在用 RN 0.52 ，FlatList 有大概 40+ 个元素，非常卡。
想用 LargeList 替换掉 FlatList，结果得倒腾半天，现在还在倒腾.

希望能提供一些示例，比如能直接替换掉 FlatList 的 LargeList 代码。越简单越短越好。方便复制粘贴。

renderCell not working.

This is how I setting the largelist:

            <LargeList
                  style={{ flex: 1 }}
                  bounces={true}
                  refreshing={this.state.refreshing}
                  onRefresh={() => this.refreshData()}
                  safeMargin={600}
                  numberOfRowsInSection={section => this.state.listlength}
                  numberOfSections={()=>this.state.listlength}
                  heightForCell={(section, row) => row % 2 ? this.minCellHeight : this.maxCellHeight}
                  renderCell={this.renderItem.bind(this)}
                  heightForSection={section =>section % 2 ? this.minSectionHeight : this.maxSectionHeight}
                 // renderHeader={this.renderHeader.bind(this)}
                  renderFooter={this.Loadmore}
              />

and this is the renderitem method :

renderItem(section: number, row: number) {
      console.log('large list', section,row);
      let data = this.state.data;
      const { navigate } = this.props.navigation;

       return (
              <TouchableOpacity onPress={() =>
                navigate('Viewdeal', { data: data[row] })
              }> 
              
              <View style={styles.Listitem}>
                   <Text>test</Text>
                   </View>
              </TouchableOpacity>
      )
    }

Problem is the method seem not fired. I not seeing the console log data at all.

Why is this happens?

Sudden drop in performance between 1.2.3 and 1.2.4

Hello,
Up to version 1.2.3 this module works well, the time it takes to first render is rather short. However upon updating to version 1.2.4 (haven't tried 1.2.5 yet) I noticed a HUGE drop in performance that I can't explain (on device and emulator, debug and prod): The list takes a long time to render, and what's more, the whole navigation is affected (going to a route is noticeably slower if it contains a largelist)
I am using react-navigation for routing, I'm not sure if it's related to the problem.

So far v1.2.3 is working well for me and I don't intend to update anytime soon. Just wanted to let you know.

android 可以下拉刷新嘛

你好 运行例子的确性能很好，没有卡顿问题，可不可以在Android&&ios上实现下拉刷新功能呢？

reverse mode ?

Is it possible?

please

How does onLoadMore work

How do i load more data from an Api when list gets to the bottom. I tried

  onLoadMore={()=> {
    this.makeRemoteRequest();
  }

it didnt work.

Is this Component have ItemSeparator param?

Is this Component have ItemSeparator ? I feel this component is very useful of me. but when I transfer my program I found that the doc miss ItemSeparator....

Can it have initialItem ?

scrollview have an attribute : contentOffset, it can set initial position, I guess I need it :)

能否支持多列？

numColumns support?

The library will be support for numColumns?
I replace FlatList with this lib and is really faster, but I need a grid view, and I can't found how to do it with the lib.

Thanks

Sometimes section not render

Hi,
thanks for this component.
I have a problem with section: sometimes the section is rendered.

I'm using:

• "native-base": "^2.3.3"
• "react-native": "0.52.0"
• "react-native-largelist": "^1.2.6"

My code:

          <Container>
               <Header hasSubtitle>
                  <Left>
                     {this._renderLeftHeaderButton()}
                  </Left>
                  <Body style={{ flex: 3 }}>
                     <Title>Ricordi</Title>
                     {this._renderSubtitle()}
                  </Body>
                  <Right>
                     {this._renderRightHeaderButton()}
                  </Right>
               </Header>
              <LargeList
                  style={{ flex: 1 }}
                  //safeMargin={600}
                  numberOfRowsInSection={section => this.state.momentList[section].data.length}
                  numberOfSections={()=> this.state.momentList.length}
                  heightForCell={(section, row) =>{ return 50 }}

                  renderCell={(section) => {

                     return (
                        <View
                           style={{
                              flex: 1,
                              backgroundColor: "blue",
                              justifyContent: "center",
                              alignItems: "center"
                           }}
                        >
                           <Text>
                              CELL
                           </Text>
                        </View>
                     );

                  }}

                  heightForSection={section => { return 100 }}
                  renderSection={section => {

                     return (
                        <View
                           style={{
                              flex: 1,
                              backgroundColor: "yellow",
                              justifyContent: "center",
                              alignItems: "center"
                           }}
                        >
                           <Text>
                              I am section {section}
                           </Text>
                        </View>
                     );
                  }}
               />
          </Container>

The problem:

How can I fix? Thanks

Build of example isn't working

Seems like there's an error when i tried to run using react-native run-ios
Here's the error log that i get

1 error generated.


** BUILD FAILED **


The following build commands failed:

	CompileC /Volumes/Workspace/react-native-largelist/ios/build/Build/Intermediates.noindex/RCTNetwork.build/Debug-iphonesimulator/RCTNetwork.build/Objects-normal/x86_64/RCTNetworkTask.o RCTNetworkTask.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
	CompileC /Volumes/Workspace/react-native-largelist/ios/build/Build/Intermediates.noindex/RCTSettings.build/Debug-iphonesimulator/RCTSettings.build/Objects-normal/x86_64/RCTSettingsManager.o RCTSettingsManager.m normal x86_64 objective-c com.apple.compilers.llvm.clang.1_0.compiler
(2 failures)

Installing build/Build/Products/Debug-iphonesimulator/LargeListDemo.app
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=2):
Failed to install the requested application
An application bundle was not found at the provided path.
Provide a valid path to the desired application bundle.
Print: Entry, ":CFBundleIdentifier", Does Not Exist

Command failed: /usr/libexec/PlistBuddy -c Print:CFBundleIdentifier build/Build/Products/Debug-iphonesimulator/LargeListDemo.app/Info.plist
Print: Entry, ":CFBundleIdentifier", Does Not Exist

My react native version

react-native-cli: 2.0.1
react-native: 0.50.4
node: 9.1.0
npm: 5.5.1

Warning: Native component for "STTVCellView" does not exist

报下面的错是什么原因？
Warning: Native component for "STTVCellView" does not exist
Warning: Native component for "STTVCellContainerView" does not exist
Warning: Native component for "STTVSectionView" does not exist
Warning: Native component for "STTVTableView" does not exist
Warning: Native component for "STTVHeaderView" does not exist
Warning: Native component for "STTVFooterView" does not exist

example does not work

the first until third example fail to apply,

您好，请教一个问题，largelist 有一个heightForCell这个属性，正常如果高度是固定，那就好办了，我现在的一个需求就是高度不确定的情况下，我该如何处理，请教一下

上拉加载完成后没有相应的方法关闭加载图标

上拉加载完成后没有相应的方法关闭加载图标
loadMore之后，下一页没有数据时候，没有办法隐藏ActivityIndicator的加载图标

numberOfRowsInSection changes are not getting updated

I have a list with a single section and an array of rows that dynamically changes length. It looks like the list isn't getting updated when the array length changes, even when the list container is getting re-rendered.

向您请教一下，该如何动态获取视图的高度，经过测试目前没有发现问题，性能很棒