The best large list component for React Native.

Last update: Jul 28, 2022

react-native-largelist

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

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.

Preview

Preview Preview WaterfallExample PictureExample

Installation

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

Documentation

API reference and more: Documentation Reference

Running Examples

  1. Git clone from github
git clone [email protected]:bolan9999/react-native-largelist.git
  1. Install dependence and start.
yarn install
yarn start
  1. Modify iOS bundle source location in AppDelegate.m

  2. Change Android bundle source location in "Dev Setting"

  3. If you build it in XCode and get this error:

'React/RCTBridgeModule.h' file not found

      you can resolve it by this topic

  1. Running

LargeList

All the features below are supported on both iOS and Android.

Items reused. Never blank.
Sticky section support

      StickySection

Fully Cross-platform bounces (iOS & Android).

      bounces

Customize refreshing (Support lottie-react-native progress with useNativeDriver)

      CustomizeRefreshing

Customize loading (Support lottie-react-native progress with useNativeDriver)

      CustomizeLoading

Slide on both horizontal and vertical directions.

      BothDirections

Sticky header support.

      StickyHeader

directionalLockEnabled

      directionalLockEnabled

Support inverted

      inverted

Drag to scale header background: renderScaleHeaderBackground

      renderScaleHeaderBackground

WaterfallList

Complex situation

      WaterfallExample

preferColumnWidth

      preferColumnWidth

numColumns

      numColumns

StickyForm

example

      StickyFormExample

License

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

GitHub

https://github.com/bolan9999/react-native-largelist
Comments
  • 1. 抱歉啊,我再描述一遍详细的,react-native-tab-view下遇到的问题,可能是我的错误

    我在react-native-tab-view下做了两个页面用来测试瀑布流布局

    import * as React from 'react';
    import {  StyleSheet, Dimensions } from 'react-native';
    import { TabView, SceneMap } from 'react-native-tab-view';
    import TestList from "./testList"
    const FirstRoute = () => (
        <TestList style={[styles.scene, { backgroundColor: '#ff4081' }]} />
    );
    const SecondRoute = () => (
        <TestList style={[styles.scene, { backgroundColor: '#ff4081' }]} />
    );
    
    export default class TabViewExample extends React.Component {
        state = {
            index: 0,
            routes: [
                { key: 'first', title: 'First' },
                { key: 'second', title: 'Second' },
            ],
        };
    
        render() {
            return (
                <TabView
                    tabStyle={{
                        width:200
                    }}
                    navigationState={this.state}
                    renderScene={SceneMap({
                        first: FirstRoute,
                        second: SecondRoute,
                    })}
                    onIndexChange={index => this.setState({ index })}
                    initialLayout={{ width: Dimensions.get('window').width }}
                />
            );
        }
    }
    
    const styles = StyleSheet.create({
        scene: {
            flex: 1,
        },
    });
    
    

    我测试遇到的问题是:当我在第一页的时候,从右往左滑可以进入到,第二个页面,我这时候在第二个页面从左往右滑是没反应的。 我怀疑是我的问题,所以我把瀑布流组件删除,换成View Text 写点字,是没问题的。 所以我想反馈的这可能是个bug,我也不确定。 对于刚才描述不清楚表示抱歉,库主别生气,没灌水的意思,着急了

    Reviewed by hanwenbo at 2019-04-14 14:50
  • 2. Precalculate renderHeader dimensions

    Hi,

    i really like your module, yet most performant i could use. I have read this from your

    The parent node's width and height of renderSection and renderIndexPath is bounded. You can use Flex. Conversely, The parent node's width and height of renderHeader and renderFooter is not bounded. Children must prop up parent node.
    

    I think i don't understand Children must prop up parent node. Could your please add example for that situation? I use header for specific view in list. It should take significant dimension of whole visible screen and currently it is overflowed with list items. Anyway it should be very handle if renderHeader and renderFooter automatically handle necessary space to render component like FlatList has. Do you plan add something similar ?

    Thanks.

    My environment:

    react-native-largelist-v2: 2.1.1
    react-native: 0.75.4
    Using: NativeLargeList
    
    Reviewed by radeno at 2018-11-13 19:57
  • 3. 关于StickyForm中renderHeader里点击事件移动的问题

    您好,大佬,再打扰你一下,现在使用StickyForm出现了一个bug,首先为了不让我自己的header跟随表格左右滑动而滑动,我是这么写的 renderHeader={this._renderunLockHeader}

    _renderunLockHeader=()=>{ return ( <View style={{height:mHeight,width:mWidth}}> <View style={{flex:1}}> {.....这是我的头布局} ); } 就是在我自己写的布局外层套了一层<View style={{flex:1}}>,这样写出来的头布局就不会随着表格的左右滑动而滑动,但是现在出现一个点击事件的问题,见下面的图: longlonglong 当我表格不左右滑动的时候,点击事件正常,都没有问题,当我表格滑动到最右端的时候,点击事件像是滑动到左边了一样,失效了,然后表格滑动回来,点击事件又好了,整个header里面所有的点击事件都是一样的, 还有一个问题就是左右滑动header,下面的表格会响应头部的左右滑动事件,如下图 small 请问,这两个问题,也好的解决办法吗?非常感谢!

    Reviewed by HelloZhuziXiaoGe at 2019-08-15 09:55
  • 4. V2 version renderSection is called only two times

    1. Dev OS (windows/Mac/Linux) Mac
    2. Target OS (iOS/Android/Both) iOS
    3. Simulator or real device? (Simulator/Real Device/Both) Real Deivce iPhone 6s
    4. react-native V0.54.0, react-native-gesture-handler V1.0.8
    

    here is my code

    import React from "react";
    import { StyleSheet, Text, View } from "react-native";
    import { LargeList } from "react-native-largelist-v2";
    import { gestureHandlerRootHOC } from 'react-native-gesture-handler'
    import AlphabetPicker from "./AlphabetPicker";
    
    const countries = require('./countryCode.json');
    
    // console.log('data', countries.data);
    
    let lastLetter = '';
    
    class PhoneCodePicker extends React.Component {
    
      state = {
        data: countries,
      }
    
    onTapLetter = (letter) => {
      if (lastLetter === letter) return; 
      lastLetter = letter;
    
      const letterIndex = this.state.data.findIndex(country => country.key.toLowerCase() === letter.toLowerCase());
      console.log('index', letterIndex);
      if (letterIndex > -1) {
        this.listRef.scrollToIndexPath({section: letterIndex, row: 0}, false)
      }
      // this.listRef.scrollToIndexPath({animated: true, itemIndex: index})
    }
    
      render() {
    
        return (
          <View style={styles.container}>
            <LargeList
              style={styles.container}
              data={this.state.data}
              heightForSection={() => 50}
              renderSection={this._renderSection}
              heightForIndexPath={() => 50}
              renderIndexPath={this._renderIndexPath}
              ref={list => this.listRef = list}
            />
            <View style={styles.sidebar}>
              <AlphabetPicker onTapLetter={this.onTapLetter} />
            </View>
          </View>
        );
      }
    
      _renderSection = (section) => {
        console.log('section header', section)
        const country = this.state.data[section];
        return (
          <View style={styles.section}>
            <Text>
              {country.key}
            </Text>
          </View>
        );
      };
    
      _renderIndexPath = ({ section, row }) => {
        console.log('section body', section, row);
        const country = this.state.data[section].items[row];
        return (
          <View style={styles.row}>
            <Text>
              {country.countryName}  +{country.phoneCode}
            </Text>
            <View style={styles.line} />
          </View>
        );
      };
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1
      },
      section: {
        flex: 1,
        backgroundColor: "gray",
        justifyContent: "center",
        alignItems: "center"
      },
      row: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      },
      line: {
        position: "absolute",
        left: 0,
        right: 0,
        bottom: 0,
        height: 1,
        backgroundColor: "#EEE"
      },
      sidebar: {
        position: 'absolute',
        right: 0,
        width:  30,
      }
    });
    
    export default gestureHandlerRootHOC(PhoneCodePicker)
    

    and some part of countriesJSON:

    [
      {
        "items": [
          {
            "countryName": "安道尔",
            "countryPinyin": "an dao er",
            "phoneCode": "376",
            "countryCode": "AD"
          },
          {
            "countryName": "阿拉伯联合酋长国",
            "countryPinyin": "a la bo lian he qiu zhang guo",
            "phoneCode": "971",
            "countryCode": "AE"
          },
          {
            "countryName": "阿富汗",
            "countryPinyin": "a fu han",
            "phoneCode": "93",
            "countryCode": "AF"
          },
          {
            "countryName": "安提瓜和巴布达",
            "countryPinyin": "an ti gua he ba bu da",
            "phoneCode": "1",
            "countryCode": "AG"
          },
          {
            "countryName": "安圭拉",
            "countryPinyin": "an gui la",
            "phoneCode": "1",
            "countryCode": "AI"
          },
          {
            "countryName": "阿尔巴尼亚",
            "countryPinyin": "a er ba ni ya",
            "phoneCode": "355",
            "countryCode": "AL"
          },
          {
            "countryName": "安哥拉",
            "countryPinyin": "an ge la",
            "phoneCode": "244",
            "countryCode": "AO"
          },
          {
            "countryName": "阿根廷",
            "countryPinyin": "a gen ting",
            "phoneCode": "54",
            "countryCode": "AR"
          },
          {
            "countryName": "奥地利",
            "countryPinyin": "ao de li",
            "phoneCode": "43",
            "countryCode": "AT"
          },
          {
            "countryName": "澳大利亚",
            "countryPinyin": "ao da li ya",
            "phoneCode": "61",
            "countryCode": "AU"
          },
          {
            "countryName": "阿鲁巴",
            "countryPinyin": "a lu ba",
            "phoneCode": "297",
            "countryCode": "AW"
          },
          {
            "countryName": "阿塞拜疆",
            "countryPinyin": "a sai bai jiang",
            "phoneCode": "994",
            "countryCode": "AZ"
          },
          {
            "countryName": "阿尔及利亚",
            "countryPinyin": "a er ji li ya",
            "phoneCode": "213",
            "countryCode": "DZ"
          },
          {
            "countryName": "爱沙尼亚",
            "countryPinyin": "ai sha ni ya",
            "phoneCode": "372",
            "countryCode": "EE"
          },
          {
            "countryName": "埃及",
            "countryPinyin": "ai ji",
            "phoneCode": "20",
            "countryCode": "EG"
          },
          {
            "countryName": "埃塞俄比亚",
            "countryPinyin": "ai sai e bi ya",
            "phoneCode": "251",
            "countryCode": "ET"
          },
          {
            "countryName": "爱尔兰",
            "countryPinyin": "ai er lan",
            "phoneCode": "353",
            "countryCode": "IE"
          },
          {
            "countryName": "阿曼",
            "countryPinyin": "a man",
            "phoneCode": "968",
            "countryCode": "OM"
          }
        ],
        "key": "A"
      },
      {
        "items": [
          {
            "countryName": "波斯尼亚和黑塞哥维那",
            "countryPinyin": "bo si ni ya he hei sai ge wei na",
            "phoneCode": "387",
            "countryCode": "BA"
          },
          {
            "countryName": "巴巴多斯",
            "countryPinyin": "ba ba duo si",
            "phoneCode": "1",
            "countryCode": "BB"
          },
          {
            "countryName": "比利时",
            "countryPinyin": "bi li shi",
            "phoneCode": "32",
            "countryCode": "BE"
          },
          {
            "countryName": "布基纳法索",
            "countryPinyin": "bu ji na fa suo",
            "phoneCode": "226",
            "countryCode": "BF"
          },
          {
            "countryName": "保加利亚",
            "countryPinyin": "bao jia li ya",
            "phoneCode": "359",
            "countryCode": "BG"
          },
          {
            "countryName": "巴林",
            "countryPinyin": "ba lin",
            "phoneCode": "973",
            "countryCode": "BH"
          },
          {
            "countryName": "布隆迪",
            "countryPinyin": "bu long di",
            "phoneCode": "257",
            "countryCode": "BI"
          },
          {
            "countryName": "贝宁",
            "countryPinyin": "bei ning",
            "phoneCode": "229",
            "countryCode": "BJ"
          },
          {
            "countryName": "百慕大",
            "countryPinyin": "bai mu da",
            "phoneCode": "1",
            "countryCode": "BM"
          },
          {
            "countryName": "玻利维亚",
            "countryPinyin": "bo li wei ya",
            "phoneCode": "591",
            "countryCode": "BO"
          },
          {
            "countryName": "巴西",
            "countryPinyin": "ba xi",
            "phoneCode": "55",
            "countryCode": "BR"
          },
          {
            "countryName": "巴哈马",
            "countryPinyin": "ba ha ma",
            "phoneCode": "1",
            "countryCode": "BS"
          },
          {
            "countryName": "不丹",
            "countryPinyin": "bu dan",
            "phoneCode": "975",
            "countryCode": "BT"
          },
          {
            "countryName": "博茨瓦纳",
            "countryPinyin": "bo ci wa na",
            "phoneCode": "267",
            "countryCode": "BW"
          },
          {
            "countryName": "白俄罗斯",
            "countryPinyin": "bai e luo si",
            "phoneCode": "375",
            "countryCode": "BY"
          },
          {
            "countryName": "伯利兹",
            "countryPinyin": "bo li zi",
            "phoneCode": "501",
            "countryCode": "BZ"
          },
          {
            "countryName": "冰岛",
            "countryPinyin": "bing dao",
            "phoneCode": "354",
            "countryCode": "IS"
          },
          {
            "countryName": "北马里亚纳群岛",
            "countryPinyin": "bei ma li ya na qun dao",
            "phoneCode": "1",
            "countryCode": "MP"
          },
          {
            "countryName": "巴拿马",
            "countryPinyin": "ba na ma",
            "phoneCode": "507",
            "countryCode": "PA"
          },
          {
            "countryName": "巴布亚新几内亚",
            "countryPinyin": "ba bu ya xin ji nei ya",
            "phoneCode": "675",
            "countryCode": "PG"
          },
          {
            "countryName": "巴基斯坦",
            "countryPinyin": "ba ji si tan",
            "phoneCode": "92",
            "countryCode": "PK"
          },
          {
            "countryName": "波兰",
            "countryPinyin": "bo lan",
            "phoneCode": "48",
            "countryCode": "PL"
          },
          {
            "countryName": "波多黎各",
            "countryPinyin": "bo duo li ge",
            "phoneCode": "1",
            "countryCode": "PR"
          },
          {
            "countryName": "巴勒斯坦领土",
            "countryPinyin": "ba lei si tan ling tu",
            "phoneCode": "970",
            "countryCode": "PS"
          },
          {
            "countryName": "巴拉圭",
            "countryPinyin": "ba la gui",
            "phoneCode": "595",
            "countryCode": "PY"
          }
        ],
        "key": "B"
      }
    ]
    

    Same as issue 188,but V2 has no 'numberOfSectionPoolSize' property.

    Reviewed by jamessawyer at 2018-10-28 06:31
  • 5. Too many calls to renderCell

    I've been trying your LargeListSample, with below config

    render() {
        return (
          <LargeListSample
            style={{flex:1}}
            numberOfSections={1}
            numberOfEachSection={2}
            nativeOptimize={false}
          />
        );
      }
    

    I've a added console.log("Rendering item... for "+row); to the renderItem method to get the number of times the renderCell called, and it shows below output

    image

    Why does it call too many times renderItem ? I've only 1 section and 2 items in it.

    I did this because, it takes more time than expected to render simple output like this.

    image

    Here's my LargeListSample

    Reviewed by theapache64 at 2018-06-25 01:24
  • 6. Section blinks when using reloadData

    Hi,

    When I am calling reloadData, the section of the list disappears while it's loading but the rows remain there. How can I avoid this ? Either everything disappears or all stays, but having just a part of the component that disappears looks buggy.

    Thank you!

    Simon

    Reviewed by SimonAmpleman at 2018-02-27 20:48
  • 7. Invariant Violation: inputRange must be monotonically non-decreasing

    Invariant Violation: inputRange must be monotonically non-decreasing -1,0,750,1050,1080,1080.1,1070,1820,1850

    我集成通讯录列表,其中一个子部门列表点击的时候报以上错,其他的子级部门都正常!请指教,多谢

    这是我的代码 企业微信截图_2965a370-8b2d-463e-9e93-c0b72d43cd86

    Reviewed by HeMa321 at 2019-10-22 11:18
  • 8. Remove extra sections / rows when updating state without using reloadData?

    Hi. This is a great module. Thanks for making it available.

    I've included gifs showing the issues I'm facing (give them a moment to load please as they're quite large).

    no-reload

    Basically, in the first example I'm not using reloadData when making a call to setState. The behaviour is almost perfect, it's pretty much what I want, except all the previous rows are still rendered in the view hierarchy. In the case when there's results from both sections, they're not visible in the filtered results unless I scroll pass all the empty rows to the next section.

    I've tried:

    • reloadAll() • reloadIndexPaths() - both with the inclusive & exclusive index paths.

    I make these calls right after I setState, but they're not fixing the problem.

    reload

    The second example shows a version where a call reloadData in componentDidUpdate, this fixes the empty rows issue, but as you can see there's a very visible flash / blinking between the content being rendered to its final state.

    If there's a way to fix either of these they'll give me the same, desired end-result. Let me know if there's anything else I can provide.

    Regards.

    Reviewed by nextriot at 2018-06-27 08:47
  • 9. 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

    Reviewed by uiue at 2018-01-14 11:20
  • 10. 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?

    Reviewed by Tamiyadd at 2018-01-17 21:23
  • 11. How can I use this nice package instead of Flatlist?

    How to use this package instead of Flatlist, I have a basic chat application with react-native-gifted-chat the react-native-gifted-chat has implemented the flatlist for messages and it works slow. So want to see this package if works well than that. Could you please someone help me how to use this package instead of flatlist???

    The following code snipt which it is by Flatlist should be change to Largelist:

    import PropTypes from 'prop-types';
    import React from 'react';
    
    import { FlatList, View, StyleSheet, Keyboard, TouchableOpacity, Text } from 'react-native';
    
    import LoadEarlier from './LoadEarlier';
    import Message from './Message';
    import Color from './Color';
    
    export default class MessageContainer extends React.PureComponent {
    
        state = {
            showScrollBottom: false,
        };
    
        componentDidMount() {
            if (this.props.messages.length === 0) {
                this.attachKeyboardListeners();
            }
        }
    
        componentWillUnmount() {
            this.detachKeyboardListeners();
        }
    
        componentWillReceiveProps(nextProps) {
            if (this.props.messages.length === 0 && nextProps.messages.length > 0) {
                this.detachKeyboardListeners();
            } else if (this.props.messages.length > 0 && nextProps.messages.length === 0) {
                this.attachKeyboardListeners(nextProps);
            }
        }
    
        attachKeyboardListeners = () => {
            const { invertibleScrollViewProps: invertibleProps } = this.props;
            Keyboard.addListener('keyboardWillShow', invertibleProps.onKeyboardWillShow);
            Keyboard.addListener('keyboardDidShow', invertibleProps.onKeyboardDidShow);
            Keyboard.addListener('keyboardWillHide', invertibleProps.onKeyboardWillHide);
            Keyboard.addListener('keyboardDidHide', invertibleProps.onKeyboardDidHide);
        };
    
        detachKeyboardListeners = () => {
            const { invertibleScrollViewProps: invertibleProps } = this.props;
            Keyboard.removeListener('keyboardWillShow', invertibleProps.onKeyboardWillShow);
            Keyboard.removeListener('keyboardDidShow', invertibleProps.onKeyboardDidShow);
            Keyboard.removeListener('keyboardWillHide', invertibleProps.onKeyboardWillHide);
            Keyboard.removeListener('keyboardDidHide', invertibleProps.onKeyboardDidHide);
        };
    
        renderFooter = () => {
            if (this.props.renderFooter) {
                const footerProps = {
                    ...this.props,
                };
                return this.props.renderFooter(footerProps);
            }
            return null;
        };
    
        renderLoadEarlier = () => {
            if (this.props.loadEarlier === true) {
                const loadEarlierProps = {
                    ...this.props,
                };
                if (this.props.renderLoadEarlier) {
                    return this.props.renderLoadEarlier(loadEarlierProps);
                }
                return <LoadEarlier {...loadEarlierProps} />;
            }
            return null;
        };
    
        scrollTo(options) {
            if (this.flatListRef && options) {
                this.flatListRef.scrollToOffset(options);
            }
        }
    
        scrollToBottom = () => {
            this.scrollTo({ offset: 0, animated: 'true' });
        };
    
        handleOnScroll = (event) => {
            if (event.nativeEvent.contentOffset.y > this.props.scrollToBottomOffset) {
                this.setState({ showScrollBottom: true });
            } else {
                this.setState({ showScrollBottom: false });
            }
        };
    
        renderRow = ({ item, index }) => {
            if (!item._id && item._id !== 0) {
                console.warn('GiftedChat: `_id` is missing for message', JSON.stringify(item));
            }
            if (!item.user) {
                if (!item.system) {
                    console.warn('GiftedChat: `user` is missing for message', JSON.stringify(item));
                }
                item.user = {};
            }
            const { messages, ...restProps } = this.props;
            const previousMessage = messages[index + 1] || {};
            const nextMessage = messages[index - 1] || {};
    
            const messageProps = {
                ...restProps,
                key: item._id,
                currentMessage: item,
                previousMessage,
                nextMessage,
                position: item.user._id === this.props.user._id ? 'right' : 'left',
            };
    
            if (this.props.renderMessage) {
                return this.props.renderMessage(messageProps);
            }
            return <Message {...messageProps} />;
        };
    
        renderHeaderWrapper = () => <View style={styles.headerWrapper}>{this.renderLoadEarlier()}</View>;
    
        renderScrollToBottomWrapper() {
            const scrollToBottomComponent = (
                <View style={styles.scrollToBottomStyle}>
                    <TouchableOpacity onPress={this.scrollToBottom} hitSlop={{ top: 5, left: 5, right: 5, bottom: 5 }}>
                        <Text>V</Text>
                    </TouchableOpacity>
                </View>
            );
    
            if (this.props.scrollToBottomComponent) {
                return (
                    <TouchableOpacity onPress={this.scrollToBottom} hitSlop={{ top: 5, left: 5, right: 5, bottom: 5 }}>
                        {this.props.scrollToBottomComponent}
                    </TouchableOpacity>
                );
            }
            return scrollToBottomComponent;
        }
    
        keyExtractor = (item) => `${item._id}`;
    
        render() {
            if (this.props.messages.length === 0) {
                return <View style={styles.container} />;
            }
            return (
                <View style={styles.container}>
                    {this.state.showScrollBottom && this.props.scrollToBottom ? this.renderScrollToBottomWrapper() : null}
                    <FlatList
                        ref={(ref) => (this.flatListRef = ref)}
                        extraData={this.props.extraData}
                        keyExtractor={this.keyExtractor}
                        enableEmptySections
                        automaticallyAdjustContentInsets={false}
                        inverted={this.props.inverted}
                        data={this.props.messages}
                        style={styles.listStyle}
                        contentContainerStyle={styles.contentContainerStyle}
                        renderItem={this.renderRow}
                        {...this.props.invertibleScrollViewProps}
                        ListFooterComponent={this.renderHeaderWrapper}
                        ListHeaderComponent={this.renderFooter}
                        onScroll={this.handleOnScroll}
                        scrollEventThrottle={100}
                        {...this.props.listViewProps}
                    />
                </View>
            );
        }
    
    }
    
    const styles = StyleSheet.create({
        container: {
            flex: 1,
        },
        contentContainerStyle: {
            justifyContent: 'flex-end',
        },
        headerWrapper: {
            flex: 1,
        },
        listStyle: {
            flex: 1,
        },
        scrollToBottomStyle: {
            opacity: 0.8,
            position: 'absolute',
            paddingHorizontal: 15,
            paddingVertical: 8,
            right: 10,
            bottom: 30,
            zIndex: 999,
            height: 40,
            width: 40,
            borderRadius: 20,
            backgroundColor: Color.white,
            alignItems: 'center',
            justifyContent: 'center',
            shadowColor: Color.black,
            shadowOpacity: 0.5,
            shadowOffset: { width: 0, height: 0 },
            shadowRadius: 1,
        },
    });
    
    MessageContainer.defaultProps = {
        messages: [],
        user: {},
        renderFooter: null,
        renderMessage: null,
        onLoadEarlier: () => { },
        inverted: true,
        loadEarlier: false,
        listViewProps: {},
        invertibleScrollViewProps: {},
        extraData: null,
        scrollToBottom: false,
        scrollToBottomOffset: 200,
    };
    
    MessageContainer.propTypes = {
        messages: PropTypes.arrayOf(PropTypes.object),
        user: PropTypes.object,
        renderFooter: PropTypes.func,
        renderMessage: PropTypes.func,
        renderLoadEarlier: PropTypes.func,
        onLoadEarlier: PropTypes.func,
        listViewProps: PropTypes.object,
        inverted: PropTypes.bool,
        loadEarlier: PropTypes.bool,
        invertibleScrollViewProps: PropTypes.object,
        extraData: PropTypes.object,
        scrollToBottom: PropTypes.bool,
        scrollToBottomOffset: PropTypes.number,
        scrollToBottomComponent: PropTypes.func,
    };
    
    Reviewed by muhammadwfa at 2019-03-03 22:12
  • 12. Problem Android with RN 0.66.4

    运行 android --variant release 后报错

    Configure project :react-native-spring-scrollview
    publishNonDefault is deprecated and has no effect anymore. All variants are now published.
    
    
    Reviewed by netangsoft at 2022-02-19 12:19
  • 13. 关于 renderFooter 的问题

    react-native: 0.63.3 react-native-spring-scrollview: 3.0.1-rc.5 react-native-largelist: 3.1.0-rc.1

    没有调试ios,只调试了安卓。 写了一个 SectionList 当 renderFooter 是下面这种时,即使有数据也不会执行 renderFooter,renderSection 和 renderIndexPath renderFooter() { return <CustomComponent /> } 改成 renderFooter() { return <View> <CustomComponent /> </View> } 然后都变正常了

    Reviewed by dodoto at 2022-02-08 03:40
  • 14. Stickyform android scroll laggedly

    I run example code sticky form, but list is very lag when scroll both of vertical and horizontal. Help me Please! Thank you so much.

    1. Dev OS (/Mac/)
    2. Target OS (/Android/)
    3. Simulator or real device? (Simulator/Real Device/)
    4. The version of react-native (0.64.2), react-native-spring-scrollview(3.0.1-rc.5), react-native-largelist (3.1.0-rc.2)
    
    6. Picture or videos of issue if required!
    

    ezgif com-gif-maker

    Reviewed by chellongCoder at 2022-01-28 04:54
The best Swiper component for React Native.
The best Swiper component for React Native.

The best Swiper component for React Native. react-native-swiper Roadmap see: ROADMAP.md Changelogs [1.6.0-rc] Dependency Remove ViewPagerAndroid, use

Aug 1, 2022
The best SwipeView component for React Native.

React Native SwipeView Todo-list app built with SwipeView (Watch it on YouTube) Getting Started Installation Basic Usage Properties Todo-list Project

Dec 4, 2021
React Native Sortable List component
React Native Sortable List component

Sortable list view for react-native Content Demo Installation Examples API Questions? Demo Installation npm i react-native-sortable-list --save Exampl

Jul 26, 2022
Staggered Or Masonary List View For React Native Written in pure js
Staggered Or Masonary List View For React Native Written in pure js

react-native-masonry-brick-list this is a staggered List view for react native (pure Js) Installation $ npm install react-native-masonry-brick-list --

Apr 28, 2021
Country Name & Code List for React Native (Android & IOS)

React Native Countries React Native Countries v1.0.2 will provide you directly native countries list. The names of the countries come in the native la

Jan 29, 2022
This is a high performance list view for React Native with support for complex layouts using a similar FlatList usage to make easy the replacement
This is a high performance list view for React Native with support for complex layouts using a similar FlatList usage to make easy the replacement

This is a high performance list view for React Native with support for complex layouts using a similar FlatList usage to make easy the replacement. This list implementation for big list rendering on React Native works with a recycler focused on performance and memory usage and so it permits processing thousands items on the list.

Jul 19, 2022
React Native Synced Horizontal and Vertical List
React Native Synced Horizontal and Vertical List

React Native Synced Horizontal and Vertical List Features Synced list component for horizontal and vertical navigation between items Written in Typesc

Jun 20, 2022
A reorderable list for React Native applications, powered by Reanimated 2 🚀

React Native Reorderable List A reorderable list for React Native applications, powered by Reanimated 2 ?? Install Npm npm install --save react-native

Aug 6, 2022
An easy-to-use, highly customizable react-native package for searching and selecting from a list of gifs and/or stickers using the Tenor and/or the Giphy API
An easy-to-use, highly customizable react-native package for searching and selecting from a list of gifs and/or stickers using the Tenor and/or the Giphy API

react-native-gif-search An easy-to-use, highly customizable react-native package for searching and selecting from a list of gifs and/or stickers using

Jul 30, 2022
☝️ React Native Select List Equivalent to Html's Select with options
☝️ React Native Select List Equivalent to Html's  Select with options

?? React Native Select List ☝️ React Native Select List Equivalent to Html's Select with options --" React Native Dropdown Select List Demo. Light wei

Jul 22, 2022
A tiny fully customizable react hook which gives you full list of countries with their flags

use-react-countries A tiny fully customizable react hook which gives you full li

Apr 23, 2022
🇦🇶 Country picker provides a modal allowing a user to select a country from a list. It display a flag next to each country name.
🇦🇶 Country picker provides a modal allowing a user to select a country from a list. It display a flag next to each country name.

Country Picker for React Native. iOS Android Web Demo ?? GO TO WEB DEMO ?? snack example Installation $ yarn add react-native-country-picker-modal Bas

Jul 30, 2022
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

Aug 6, 2022
react-native-swiper2 ★86 - Swiper component for React Native. Supersede react-native-swiper
react-native-swiper2 ★86 - Swiper component for React Native. Supersede react-native-swiper

react-native-swiper2 react-native-swiper is now active again, so swiper2 will stop maintaining. Changelogs [v2.0.7] correct onPageChange index. https:

Feb 23, 2022
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

Jul 15, 2022
React Native Higher Order Component that adds advanced caching functionality to the react native Image component.

React Native Image Cache HOC React Native Higher Order Component that adds advanced caching functionality to the react native Image component. Feature

Aug 1, 2022
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])

React Native MarqueeLabel (remobile) A marquee label for react-native if you use js pure marquee, use remobile/react-native-marquee[ https://github.co

Jul 18, 2022
A React Native module that allows you to crop photos, built with react native Animated api and react-native-gesture-handler.

react-native-image-cropview A React Native module that allows you to crop photos, built with react native Animated api and react-native-gesture-handle

Aug 4, 2022
Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share
Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share

React Native Social Share Use the built-in share view from iOS and Android to let the user share on Facebook and Twitter. It will use the user's exist

Jun 29, 2022