A Listview with a sidebar to jump to sections directly

Last update: May 30, 2022

Based on johanneslumpe's react-native-selectablesectionlistview, thanks to him for the awesome component!

99% of this component was done by @johanneslumpe, and I just replaced the deprecated API for newer react native version(>=0.13), and used a little trick to support both iOS and Android platforms.

You can find this component on npm:

npm install react-native-alphabetlistview  --save  

Changelog

  • v2.0.0
    • Support RN 0.25+.(Thanks @mbernardeau). If you have problem with an earlier version of RN, try v0.1.3.

Following is the original readme

A Listview with a sidebar to directly jump to sections.

Please file issues for missing features or bugs.

I apologize for the bad name.

How it looks

Usage

The most basic way to use this component is as follows:

var AlphabetListView = require('react-native-alphabetlistview');

// inside your render function
<AlphabetListView
  data={yourData}
  cell={YourCellComponent}
  cellHeight={100}
  sectionHeaderHeight={22.5}
/>

You can find a more complete example below

Props

SelectableSectionsListView

All props are passed through to the underlying ListView, so you can specify all the available props for ListView normally - except the following, which are defined internally and will be overwritten:

  • onScroll
  • onScrollAnimationEnd
  • dataSource
  • renderRow
  • renderSectionHeader

data

array|object, required
The data to render in the listview

hideSectionList

boolean
Whether to show the section listing or not. Note: If the data your are providing to the component is an array, the section list will automatically be hidden.

getSectionTitle

function
Function to provide titles for the section headers

getSectionListTitle

function
Function to provide titles for the section list items

onCellSelect

function
Callback which should be called when a cell has been selected

onScrollToSection

function
Callback which should be called when the user scrolls to a section

cell

function required
The cell component to render for each row

sectionListItem

function
A custom component to render for each section list item

sectionHeader

function
A custom component to render for each section header

footer

function
A custom component to render as footer
This props takes precedence over renderFooter

renderFooter

function
A custom function which has to return a valid React element, which will be used as footer.

header

function
A custom component to render as header
This props takes precedence over renderHeader

renderHeader

function
A custom function which has to return a valid React element, which will be used as header.

headerHeight

number
The height of the rendered header element.
Is required if a header element is used, so the positions can be calculated correctly

cellProps

object
An object containing additional props, which will be passed to each cell component

sectionHeaderHeight

number required
The height of the section header component

cellHeight

number required
The height of the cell component

useDynamicHeights

boolean
Whether to determine the y position to scroll to by calculating header and cell heights or by using the UIManager to measure the position of the destination element. Defaults to false
This is an experimental feature. For it to work properly you will most likely have to experiment with different values for scrollRenderAheadDistance, depending on the size of your data set.

updateScrollState

boolean
Whether to set the current y offset as state and pass it to each cell during re-rendering

style

object|number
Styles to pass to the container

sectionListStyle

object|number
Styles to pass to the section list container

sectionListFontStyle

object|number
Styles to pass to the section list letters


Cell component

These props are automatically passed to your component. In addition to these, your cell will receive all props which you specified in the object you passed as cellProps prop to the listview.

index

number
The index of the cell inside the current section

sectionId

string
The id of the parent section

isFirst

boolean
Whether the cell is the first in the section

isLast

boolean
Whether the cell is the last in the section

item

mixed
The item to render

offsetY

number
The current y offset of the list view
If you do not specify updateScrollState={true} for the list component, this props will always be 0

onSelect

function
The function which should be called when a cell is being selected


Section list item component

These props are automatically passed to your component

sectionId

string
The id of the parent section

title

string
The title for this section. Either the return value of getSectionListTitle or the same value as sectionId

Example

class SectionHeader extends Component {
  render() {
    // inline styles used for brevity, use a stylesheet when possible
    var textStyle = {
      textAlign:'center',
      color:'#fff',
      fontWeight:'700',
      fontSize:16
    };

    var viewStyle = {
      backgroundColor: '#ccc'
    };
    return (
      <View style={viewStyle}>
        <Text style={textStyle}>{this.props.title}</Text>
      </View>
    );
  }
}

class SectionItem extends Component {
  render() {
    return (
      <Text style={{color:'#f00'}}>{this.props.title}</Text>
    );
  }
}

class Cell extends Component {
  render() {
    return (
      <View style={{height:30}}>
        <Text>{this.props.item}</Text>
      </View>
    );
  }
}

class MyComponent extends Component {

  constructor(props, context) {
    super(props, context);

    this.state = {
      data: {
        A: ['some','entries','are here'],
        B: ['some','entries','are here'],
        C: ['some','entries','are here'],
        D: ['some','entries','are here'],
        E: ['some','entries','are here'],
        F: ['some','entries','are here'],
        G: ['some','entries','are here'],
        H: ['some','entries','are here'],
        I: ['some','entries','are here'],
        J: ['some','entries','are here'],
        K: ['some','entries','are here'],
        L: ['some','entries','are here'],
        M: ['some','entries','are here'],
        N: ['some','entries','are here'],
        O: ['some','entries','are here'],
        P: ['some','entries','are here'],
        Q: ['some','entries','are here'],
        R: ['some','entries','are here'],
        S: ['some','entries','are here'],
        T: ['some','entries','are here'],
        U: ['some','entries','are here'],
        V: ['some','entries','are here'],
        W: ['some','entries','are here'],
        X: ['some','entries','are here'],
        Y: ['some','entries','are here'],
        Z: ['some','entries','are here'],
      }
    };
  }

  render() {
    return (
      <AlphabetListView
        data={this.state.data}
        cell={Cell}
        cellHeight={30}
        sectionListItem={SectionItem}
        sectionHeader={SectionHeader}
        sectionHeaderHeight={22.5}
      />
    );
  }
}

GitHub

https://github.com/sunnylqm/react-native-alphabetlistview
Comments
  • 1. Data loading

    Hi, I would like to thank you for doing such a great contribution to the community, I've one quick question I've a data list of json array object of 500 records which I'm trying to render with Alphabetlistview it renders fine but only shows 25 or 20 at a time when I click the alphabet , if I jump to M or Z it still loads data of A so I've to click like multiple times until it loads all the data and then it works normal ,How can I load all the 500 records first and then enable section headers for clicking , Is there a way to do that. Am I missing something..?

    Any help is highly appreciated !!

    Thanks! Rahul

    Reviewed by rrawla at 2016-05-12 02:12
  • 2. Not working with React version 15.5 and above

    This package is not working for React version 15.5 and above because of Typechecking With PropTypes and SectionList class.

    we have to import the PropTypes package

    import PropTypes from prop-types;

    Reviewed by komodor8 at 2018-05-14 19:52
  • 3. Ownership of the package

    This is an awesome package and I'd like to see it updated. If the owner wishes to pass on the ownership to me it'd be great. Thanks for the awesome package!

    Reviewed by i6mi6 at 2017-10-16 19:46
  • 4. findNodeHandle error from fixItemSectionMeasure

    I've come across an issue with the fixSectionItemMeasure code. We've implemented a searchbar to feed the AlphabetListView a filtered set of data. Feeding the list data quickly caused an error within the sectionItem.measure logic. This happens x-platform.

    findNodeHandle(...): Unable to find node handle for unmounted component. 
    
    findNodeHandle
    findNodeHandle.js:101 
    
    ProxyComponent.measure
    NativeMethodsMixin.js:87
    
    <unknown> SectionList.js:78
    
    findnodehandle
    Reviewed by drewvolz at 2017-04-26 15:30
  • 5. undefined is not an object (evaluating 'sectionItem.measure')

    react-native-cli: 2.0.1 react-native: 0.36.1 "react-native-alphabetlistview": "^0.2.0" node v6.10.2 npm 4.5.0

    image

    after searching through the error provided by the screenshot, i found out that i don't understand it at all. `componentDidMount() { const sectionItem = this.refs.sectionItem0;

    this.measureTimer = setTimeout(() => {
      sectionItem.measure((x, y, width, height, pageX, pageY) => {
        //console.log([x, y, width, height, pageX, pageY]);
        this.measure = {
          y: pageY,
          height
        };
      })
    }, 0);
    
    //console.log(sectionItem);
    

    }`

    i think that is what it meant right? and I'm very sorry that i have to cover the project name.... project name....hmmm...rather not good to show in public

    Reviewed by porknoodles at 2017-04-26 10:05
  • 6. Add compareFunction to change order of sections

    Hi,

    This PR fixes the issue #20 at least the sort part of it. I was not able to find out the width of the rendered section title before rendering, so if anyone wants to use multiple characters on side, it is required to change width in the styles manually.

    PR adds property 'compareFunction(a,b)' as used in sort(). Afterwards, it is possible to have sorted sections without requirement them in a specific order.

    Reviewed by marxsk at 2016-08-24 09:25
  • 7. Is this repo still maintained?

    Hi, I am looking forward to using this repo in my repository. But not sure if it still has anyone maintaining. Based on long date open issues.

    Can someone answer this?

    Thanks.

    Reviewed by dheysonalves at 2020-08-19 15:56
  • 8. I get an empty page when I try out the code

    Hi,

    Steps I have followed-

    npm install react-native-alphabetlistview  --save  
    

    Used the code that is exposed in the README file in index.android.js

    Link to my Github project repo.

    But, I what I see is an empty white page. What am I doing wrong?

    Reviewed by bozzmob at 2015-12-29 12:06
  • 9. Get current section position.

    Hi, I would like to know if there is a way to get the current sectionId on the list when you scroll so i can highlight the sectionListTitle when i scroll. Thanks.

    Reviewed by LouisLoiseau at 2018-08-28 09:45
  • 10. Please update master to use prop-types package

    On version React >= 16.0 , var {PropTypes} = React; doesn't work anymore.

    Files in master should be updated to use npm install --save prop-types package, then var PropTypes = require('prop-types');

    I will do a PR in short while.

    Reviewed by emmanuelnk at 2018-03-22 03:11
  • 11. [fix] Change the way how index of pressed section is obtained

    The list was moved to the top to simplify way how we count the index. The main reason for this step is that current version is no longer working properly with RN 0.43. Unpatched version works fine with RN 0.33

    Reviewed by marxsk at 2017-08-09 12:04
  • 12. TypeError: undefined is not an object (evaluating 'new _reactNative.ListView.DataSource')

    after updating my react native version from 59 to 0.63.2 app crashed as ListView is deprecated in new react native version.

    for workaround,

    in node_modules\react-native-alphabetlistview\components\SelectableSectionsListView.js I have installed "deprecated-react-native-listview". Added - import { ListView } from 'deprecated-react-native-listview';
    removed ListView import from react-native.

    Reviewed by miralmsojitra at 2020-09-17 12:25
  • 13. Example is giving an error : Cannot destructure undefined

    Hello All, I am trying sample code in rn version "0.61.5" with react hooks.

    import React, { useState, useEffect } from "react";
    import { FlatList, View, StyleSheet } from "react-native";
    import firestore from "@react-native-firebase/firestore";
    import { useSelector, shallowEqual, useDispatch } from "react-redux";
    import { theme, deviceWidth, deviceHeight } from "../../utils/theme";
    import {
      emailValidator,
      passwordValidator,
      firstNameValidator,
      lastNameValidator,
    } from "../../utils/utils";
    import styles from "../../utils/styles";
    import {
      Surface,
      Text,
      TextInput,
      ActivityIndicator,
      Button,
    } from "react-native-paper";
    var AlphabetListView = require('react-native-alphabetlistview');
    
    const contacts = {
      'A': [{ name: 'A1' }, { name: 'A2' }, { name: 'A3' }],
      "E": [{ name: 'E1' }, { name: 'E2' }, { name: 'E3' }, { name: 'E4' }],
      'F': [{ name: 'F1' }, { name: 'F2' }, { name: 'F3' }],
      'H': [{ name: 'H1' }, { name: 'H2' }, { name: 'H3' }, { name: 'H5' }],
      'J': [{ name: 'J1' }, { name: 'J2' }, { name: 'J3' }, { name: 'J5' }],
      'K': [{ name: 'K1' }, { name: 'K2' }, { name: 'K3' }, { name: 'K5' }],
      'N': [{ name: 'N1' }, { name: 'N2' }, { name: 'N3' }, { name: 'N5' }],
      'Y': [{ name: 'Y1' }, { name: 'Y2' }, { name: 'Y3' }, { name: 'Y5' }, { name: 'Y6' }],
    }
    
    export default function OfficeScreen() {
      const [images, setImages] = useState([]);
    
       function Cell() {
    
        return (
          <View>
            <Text>S</Text>
          </View>
        )
      }
      return (
        <AlphabetListView
        data={contacts }
        cell={Cell()}
        cellHeight={100}
        sectionHeaderHeight={22.5}
      />
      );
    }
    

    I am getting below error :

    image

    Could anyone pls help me running this basic example? Thanks

    Reviewed by rikinshah23 at 2020-04-19 06:15
  • 14. New RN FlatList / SectionList and showing current section letter on sidebar

    ListView was replaced with React Native FlatList and SectionList (dependent on data structure). Showing label is disabled by default. Example: screenshot. To enable it pass showLetter prop.

    Reviewed by tyson90 at 2020-03-19 13:25
  • 15. Alphabet list cut in case of long alphabet

    In case of long alphabet (i.e. long array in data prop.) and device small screen resolution the SectionList is cut at the bottom and there is no possibility to scroll it: Screen Shot 2019-08-20 at 5 46 35 PM

    So it should be wrapped by ScrollView for example and also maybe with additional logic, for example do not wrap in ScrollView in case react-native-alphabetlistview height less then the screen or container height where the component was placed. Screen Shot 2019-08-20 at 5 47 17 PM

    For all who need simplest and fastest solution (but not very elegant) for now is to wrap {sections} to ScrollView here: https://github.com/i6mi6/react-native-alphabetlistview/blob/master/components/SectionList.js#L147

    Screen Shot 2019-08-20 at 5 58 59 PM

    Reviewed by valeriik at 2019-08-20 15:05
A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.
A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.

react-native-modal-selector A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sect

Jul 28, 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

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

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

Jul 24, 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

Jul 2, 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

Jul 31, 2022
A pull to refresh ListView for React Native completely written in js.
A pull to refresh ListView for React Native completely written in js.

A pull to refresh ListView for React Native completely written in js. Also supports custom animations. Installation npm install react-native-refresher

Jul 9, 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

Aug 3, 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
:sunrise_over_mountains: A React Native module that allows you to use native UI to select media from the device library or directly from the camera.

React Native Image Picker A React Native module that allows you to select a photo/video from the device library or camera. Note: If you are still usin

Jul 31, 2022
React Dev Inspector - jump to local IDE code directly from browser React component by just a simple click
React Dev Inspector - jump to local IDE code directly from browser React component by just a simple click

React Dev Inspector Introduction This package allows users to jump to local IDE code directly from browser React component by just a simple click, whi

Aug 2, 2022
Animated-sidebar-indicator - React animated sidebar indicator
Animated-sidebar-indicator - React animated sidebar indicator

Animated-sidebar-indicator - React animated sidebar indicator

Aug 8, 2022
A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.
A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.

react-native-modal-picker A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sectio

Jul 5, 2022
A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.
A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.

react-native-modal-selector A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sect

Jul 28, 2022
react-sticky-scrollspy-nav is a React component that provides smooth scrolling navigation with sections to a web page.

react-sticky-scrollspy-nav react-sticky-scrollspy-nav is a React component that provides smooth scrolling navigation with sections to a web page. How

Mar 3, 2022
A cross-platform (iOS / Android), selector/picker component for React Native that is filterable, highly customizable and supports sections.
A cross-platform (iOS / Android), selector/picker component for React Native that is filterable, highly customizable and supports sections.

react-native-modal-selector-searchable A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and su

Jul 12, 2022
An npm package that lets you jump right into coding React and Redux with universal (isomorphic) rendering. Only manage Express setups or Webpack configurations if you want to.

Universal Redux What and Why Universal Redux is an npm package that when used as a dependency in your project provides a universal (isomorphic) render

May 22, 2022
Jump from the HTML element to the source code of the generator
Jump from the HTML element to the source code of the generator

tsx-source-jump Jump from the HTML element to the source code of the generator.

May 12, 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

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

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

Jul 24, 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

Jul 2, 2022