✌️ ListView with pull-to-refresh and infinite scrolling for Android and iOS React-Native apps

Last update: Jun 23, 2022

Gifted ListView

A ListView with pull-to-refresh, infinite scrolling and more for Android and iOS React-Native apps

Changelog

0.0.13

  • Use RefreshControl instead of own implementation for pull-to-refresh (PR @SpaceK33z)

Simple example

var React = require('react-native');
var {
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} = React;

var GiftedListView = require('react-native-gifted-listview');

var Example = React.createClass({

  /**
   * Will be called when refreshing
   * Should be replaced by your own logic
   * @param {number} page Requested page to fetch
   * @param {function} callback Should pass the rows
   * @param {object} options Inform if first load
   */
  _onFetch(page = 1, callback, options) {
    setTimeout(() => {
      var rows = ['row '+((page - 1) * 3 + 1), 'row '+((page - 1) * 3 + 2), 'row '+((page - 1) * 3 + 3)];
      if (page === 3) {
        callback(rows, {
          allLoaded: true, // the end of the list is reached
        });
      } else {
        callback(rows);
      }
    }, 1000); // simulating network fetching
  },


  /**
   * When a row is touched
   * @param {object} rowData Row data
   */
  _onPress(rowData) {
    console.log(rowData+' pressed');
  },

  /**
   * Render a row
   * @param {object} rowData Row data
   */
  _renderRowView(rowData) {
    return (
      <TouchableHighlight
        style={styles.row}
        underlayColor='#c8c7cc'
        onPress={() => this._onPress(rowData)}
      >
        <Text>{rowData}</Text>
      </TouchableHighlight>
    );
  },

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.navBar} />
        <GiftedListView
          rowView={this._renderRowView}
          onFetch={this._onFetch}
          firstLoader={true} // display a loader for the first fetching
          pagination={true} // enable infinite scrolling using touch to load more
          refreshable={true} // enable pull-to-refresh for iOS and touch-to-refresh for Android
          withSections={false} // enable sections
          customStyles={{
            paginationView: {
              backgroundColor: '#eee',
            },
          }}

          refreshableTintColor="blue"
        />
      </View>
    );
  }
});

var styles = {
  container: {
    flex: 1,
    backgroundColor: '#FFF',
  },
  navBar: {
    height: 64,
    backgroundColor: '#CCC'
  },
  row: {
    padding: 10,
    height: 44,
  },
};

Advanced example

See GiftedListViewExample/example_advanced.js

Installation

npm install react-native-gifted-listview --save

Features

  • Pull-to-refresh in iOS
  • Touch-to-refresh in Android
  • Infinite scrolling using touch to load more
  • Loader for first display
  • Default view when no content to display
  • Customizable (see advanced example)
  • Support for section header
  • Pull-to-refresh in Android

License

MIT

Feel free to ask me questions on Twitter @FaridSafi !

GitHub

https://github.com/FaridSafi/react-native-gifted-listview
Comments
  • 1. Support auto pagination

    This is just a proof of concept. Feel free to reject or modify.

    Set autoPaginate={true} on the GiftedListView to enable auto pagination. onEndReachedThreshold could be used to tune the trigger of auto pagination.

    Reviewed by realaboo at 2015-12-29 09:25
  • 2. Getting `componentWillReceiveProps` of null

    Trying to figure out how i can use redux to fetch the data from our API.. i had to add a callback to the action due to the restriction of passing state when its updated. Is there a better way to approach/fix this?

      _onFetch(page = 1, callback, options) {
        // if (!this.props.global.currentUser) return;
        this.props.actions.getApartments({}, (listings) => {
          return callback(listings)
        })
        // callback(this.state.listings)
      },
    
    Reviewed by joshbedo at 2016-02-08 18:50
  • 3. I got a Warining:Each child in an array or iterator should have a unique "key" prop.....

    I got a Warining:Each child in an array or iterator should have a unique "key" prop.....

    I fetch data from API, the data show,and I got this warning. How to remove it ? thanks.

    Reviewed by yaoyonstudio at 2016-03-08 07:44
  • 4. Force stop refreshing

    Hi, I'm implementing a feature that would display a snackbar if the connection fails. For that to work, I noticed that the refresh icon is displayed continuously. I want the refresh icon stop spinning, as I can't refresh again and try to fetch the data again when the connection is restored.

    Reviewed by avishayil at 2015-12-27 17:46
  • 5. Consider using PullToRefreshLayoutAndroid

    Just a few hours ago Facebook released the PullToRefreshLayoutAndroid component. Consider using it for the Android version.

    This is the commit with the release: https://github.com/facebook/react-native/commit/37f81341a006458d84d934882485c2a0a8838497 It just landed on master, so it won't be released until v0.17, I guess.

    Reviewed by mrcasals at 2015-11-24 18:49
  • 6. Support for listviews with sections and further new features...

    Adding support for

    1. listviews with sections by setting the property "withSections" to "true" and specifying a method for renderSectionHeader
    2. Triggering a refresh from external by adding "onRefresh()" which calls "_onRefresh()" with an additional parameter
    3. Calling "_onFetch()" with a third parameter called "options" which is an object which is currently either {external: true} or {initial: true} or {}, depending on whether the call of the _onFetch() method was triggered from external (i.e. by calling onRefresh()), was the initial creation of the listview (i.e. from componentDidMount) or any other call.
    Reviewed by PhilippKrone at 2015-10-31 20:15
  • 7. Dependency error - GiftedSpinner

    Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of GiftedSpinner.

    image

    Reviewed by scazzy at 2016-12-20 07:49
  • 8. The refreshing spinner will not disapear even if I have callbacked in onFetch sometimes

    image When I first enter the view. image When I refresh.

    In fact, I have callbacked in onFetch when refreshing. image And the console has printed the message image

    But the spinner don't disapear.Could you please give me some ideas

    Reviewed by blankzust at 2016-03-28 08:30
  • 9. Warning: GiftedListView: isMounted is deprecated.

    "react": "16.0.0-alpha.12", "react-dom": "16.0.0-alpha.12", "react-native": "^0.46.1", "react-native-gifted-listview": "0.0.15",

    07-14 06:14:10.770 2312 2411 W ReactNativeJS: Warning: GiftedListView: isMounted is deprecated. Instead, make sure to clean up subsc riptions and pending requests in componentWillUnmount to prevent memory leaks.

    Reviewed by macoto-liu at 2017-07-13 22:18
  • 10. typeError: expected dynamic type double but had type null

    Reviewed by zhbhun at 2016-02-22 02:48
  • 11. headerView / renderHeader not working

    Hello,

    I have a simple headerView I want to add to the top of the list (it's basically a featured post in a list of posts).

    I'm adding the headerView, but it won't show for me:

    My GiftedListView:

     <GiftedListView
          ref="PostView"
          initialListSize={20}
          onFetch={this.loadData}
          dataSource={this.state.postRows}
          onEndReachedThreshold={200}
          onEndReached={this.addMorePosts.bind(this)}
          rowView={this.renderPost.bind(this, this.props.navigator)}
          pagination
          withSections={false}
          refreshable={false}
          headerView={this.renderHeader}
        />
    

    and my renderHeader, the console log message won't show either:

    renderHeader() {
      console.log('does it render?');
      return (
        <View>
          <Text>Test</Text>
        </View>
      );
    }
    

    I tried looking at your code and saw on line 404:

     renderHeader={this.props.refreshable === true && Platform.OS !== 'android' ? this._renderRefreshView : this.headerView}
    

    if I change this.headerView to this.props.headerView it works:

     renderHeader={this.props.refreshable === true && Platform.OS !== 'android' ? this._renderRefreshView : this.props.headerView}
    

    I'm not sure if it will have any other consequences though, haven't looked trough the entire code and never made a PR before, although I can probably do it :).

    EDIT:

    I also see you're checking if the Platform is android or not. Is there any specific reason for that? I want to be able to show the renderHeader on both iOS and Android.

    Reviewed by ghost at 2015-12-22 15:57
  • 12. undefined is not a function (evaluating 'React.createClass')

    When i just import the following:

    import GiftedListView from 'react-native-gifted-listview';
    

    getting following error:

    undefined is not a function (evaluating 'React.createClass')
    
    Reviewed by ghost at 2018-03-20 07:09
  • 13. help ~ refreshableWaitingView is not work?

    _renderRefreshableWaitingView(refreshCallback) {
        if (Platform.OS == 'ios') {
            return (
                <View style={customStyles.refreshableView}>
                    <Text style={customStyles.actionsLabel}>
                        ↓
                    </Text>
                </View>
            );
        } else {
            return (
                <TouchableHighlight
                    underlayColor='#c8c7cc'
                    onPress={refreshCallback}
                    style={customStyles.refreshableView}
                >
                    <Text style={customStyles.actionsLabel}>
                        ↻
                    </Text>
                </TouchableHighlight>
            );
        }
    }
    
    
    
    _renderRefreshableWillRefreshView() {
        return (
            <View style={customStyles.refreshableView}>
                <Text style={customStyles.actionsLabel}>
                    ↻
                </Text>
            </View>
        );
    }
    
    render() {
        return (
            <View style={styles.container}>
                <GiftedListView
                    rowView={this._renderRowView.bind(this)}
                    onFetch={this._onFetch}
                    firstLoader={true} // display a loader for the first fetching
                    pagination={true} // enable infinite scrolling using touch to load more
                    refreshable={true} // enable pull-to-refresh for iOS and touch-to-refresh for Android
                    withSections={false} // enable sections
                    customStyles={{
                        paginationView: {
                            backgroundColor: '#eee',
                        },
                    }}
    
                    refreshableTintColor="blue"
                    enableEmptySections = {true}
                    refreshableWillRefreshView={this._renderRefreshableWillRefreshView}
                    refreshableWaitingView={this._renderRefreshableWaitingView}
                />
            </View>
        );
    }
    
    Reviewed by ycb0318 at 2017-07-03 07:27
  • 14. GiftedSpinner is still used in the version on npm

    Could you update the version on npm to 0.0.15? So it doesn't rely on GiftedSpinner.

    I'm sort of new to this, so if this is something I can do please let me know.

    Reviewed by iampmat at 2017-05-19 15:50
♻️ A pull down to refresh control for react native.
♻️   A pull down to refresh control for react native.

react-native-drop-refresh A pull down to refresh control for react native. This is a fork version from Shuangzuan/RCTRefreshControl. Better npm mainta

Dec 9, 2021
A android like toast for android and ios, android use native toast, ios use UIView+Toast

React Native Toast (remobile) A android like toast for react-native support for ios and android Installation npm install @remobile/react-native-toast

Apr 4, 2022
High performance listview for React Native and web!
High performance listview for React Native and web!

RecyclerListView If this project has helped you out, please support us with a star ?? . This is a high performance listview for React Native and Web w

Jun 23, 2022
A simple react-native implementation of step indicator widget compatible with the ViewPager and ListView.
A simple react-native implementation of step indicator widget compatible with the ViewPager and ListView.

react-native-step-indicator A simple react-native implementation of step indicator widget compatible with the ViewPager and ListView. Features Can be

Jun 20, 2022
Animated Pagination For React Native's ListView, FlatList, and SectionList
Animated Pagination For React Native's ListView, FlatList, and SectionList

The best Pagination component for React Native. React Native Pagination Roadmap see: ROADMAP.md Horizontal To try these out yourself its prudy easy, J

Jun 16, 2022
SGListView is a memory minded implementation of React Native's ListView
SGListView is a memory minded implementation of React Native's ListView

React Native SGListView SGListView is a memory minded implementation of the React Native's ListView. Maintainers Wanted I'm currently looking for main

Jun 13, 2022
React Native scrollview/listview component with image lazyload feature

React Native scrollview lazyload ScrollView with image/components lazyload feature. Support all ScrollView feature. Detect ScrollView by 'renderRow' a

Oct 16, 2020
A Listview with a sidebar to jump to sections directly
A Listview with a sidebar to jump to sections directly

Based on johanneslumpe's react-native-selectablesectionlistview, thanks to him for the awesome component! 99% of this component was done by @johannesl

May 30, 2022
A cross-platform (iOS / Android), full-featured, highly customizable web browser module for React Native apps.
A cross-platform (iOS / Android), full-featured, highly customizable web browser module for React Native apps.

react-native-webbrowser A cross-platform (iOS / Android), full-featured in-app web browser component for React Native that is highly customizable. Cur

Apr 5, 2022
A react native module to show toast like android, it works on iOS and Android.
A react native module to show toast like android, it works on iOS and Android.

react-native-easy-toast A react native module to show toast like android, it works on iOS and Android. Content Installation Demo Getting started API C

Jun 15, 2022
React Native ActionSheet for Android & IOS (IOS is using ActionSheetIOS)
React Native ActionSheet for Android & IOS (IOS is using ActionSheetIOS)

React Native ActionSheet This package will help you to using ActionSheetIOS(IOS) and BottomSheetDialog(Android). Usage of this package same as for IOS

May 23, 2021
📜 React Native - Bidirectional Infinite Smooth Scroll
📜 React Native - Bidirectional Infinite Smooth Scroll

?? React Native Bi-directional Infinite Scroll Implement bidirectional infinite smooth scroll using React Native [ Built with ♥ at Stream ] Introducti

Jun 17, 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

Mar 25, 2022
ScrollView with infinte paged scrolling (no looping). The number of pages rendered before and after current page can be customized. Pages are rendered when user scrolled.
ScrollView with infinte paged scrolling (no looping). The number of pages rendered before and after current page can be customized. Pages are rendered when user scrolled.

react-native-infinite-scrollview ScrollView with infinte paged scrolling (no looping). The number of pages rendered before and after current page can

May 17, 2022
Parallax-controller - Core classes and controller for creating parallax scrolling effects

?? Parallax Controller Core classes and controller for creating parallax scrolli

May 18, 2022
React/redux wrappers for auto-scrolling react-collapse components

react-scroll-collapse Component wrappers for auto-scrolling collapsible elements - with smooth animations powered by react-motion and react-collapse.

Jun 5, 2022
react-native-wheel-picker-android ★186 - Simple and flexible React native wheel picker for Android, including DatePicker and TimePicker.
react-native-wheel-picker-android ★186 - Simple and flexible React native wheel picker for Android, including DatePicker and TimePicker.

React native wheel picker V2 A simple Wheel Picker for Android (For IOs is using Picker from react-native) Example You can clone the repo and run exam

Jun 20, 2022
Native CardView for react-native (All Android version and iOS)
Native CardView for react-native (All Android version and iOS)

react-native-card-view Native CardView that compatible for iOS and Android( both lollipop and pre-lolipop). Website Material Design Card Spec CardView

May 30, 2022