{"id":4029,"url":"https://github.com/i6mi6/react-native-alphabetlistview","last_synced_at":"2025-10-02T02:31:36.745Z","repository":{"id":1882102,"uuid":"45178453","full_name":"i6mi6/react-native-alphabetlistview","owner":"i6mi6","description":"A Listview with a sidebar to jump to sections directly","archived":false,"fork":true,"pushed_at":"2022-05-16T10:52:08.000Z","size":67,"stargazers_count":454,"open_issues_count":38,"forks_count":162,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-09-26T23:02:31.015Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"johanneslumpe/react-native-selectablesectionlistview","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/i6mi6.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-10-29T11:17:26.000Z","updated_at":"2025-09-10T17:06:42.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/i6mi6/react-native-alphabetlistview","commit_stats":null,"previous_names":["sunnylqm/react-native-alphabetlistview"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/i6mi6/react-native-alphabetlistview","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i6mi6%2Freact-native-alphabetlistview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i6mi6%2Freact-native-alphabetlistview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i6mi6%2Freact-native-alphabetlistview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i6mi6%2Freact-native-alphabetlistview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/i6mi6","download_url":"https://codeload.github.com/i6mi6/react-native-alphabetlistview/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/i6mi6%2Freact-native-alphabetlistview/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277851890,"owners_count":25888542,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-01T02:00:09.286Z","response_time":88,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-01-05T20:16:58.952Z","updated_at":"2025-10-02T02:31:36.512Z","avatar_url":"https://github.com/i6mi6.png","language":"JavaScript","funding_links":[],"categories":["Components"],"sub_categories":["UI"],"readme":"## Based on johanneslumpe's react-native-selectablesectionlistview, thanks to him for the awesome component!      \n99% of this component was done by @johanneslumpe, and I just replaced the deprecated API for newer react native version(\u003e=0.13), and used a little trick to support both iOS and Android platforms.      \n    \n    \nYou can find this component on npm:   \n```\nnpm install react-native-alphabetlistview  --save  \n```\n\n## Changelog\n\n- **v2.0.0**  \n  + Support RN 0.25+.(Thanks [@mbernardeau](https://github.com/mbernardeau)). If you have problem with an earlier version of RN, try v0.1.3.\n    \n    \n\n\n# Following is the original readme\n\nA Listview with a sidebar to directly jump to sections.\n\nPlease file issues for missing features or bugs.\n\nI apologize for the bad name.\n\n![How it looks](http://lum.pe/sectionlistview.gif)\n\n## Usage\n\nThe most basic way to use this component is as follows:\n\n```javascript\nvar AlphabetListView = require('react-native-alphabetlistview');\n\n// inside your render function\n\u003cAlphabetListView\n  data={yourData}\n  cell={YourCellComponent}\n  cellHeight={100}\n  sectionHeaderHeight={22.5}\n/\u003e\n```\n\nYou can find a more complete example below\n\n## Props\n\n### SelectableSectionsListView\n\nAll 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:\n\n* `onScroll`\n* `onScrollAnimationEnd`\n* `dataSource`\n* `renderRow`\n* `renderSectionHeader`\n\n#### data\n`array|object`, **required**  \nThe data to render in the listview\n\n#### hideSectionList\n`boolean`  \nWhether to show the section listing or not. *Note: If the data your are providing to\nthe component is an array, the section list will automatically be hidden.*\n\n#### getSectionTitle\n`function`  \nFunction to provide titles for the section headers\n\n#### getSectionListTitle\n`function`  \nFunction to provide titles for the section list items\n\n#### onCellSelect\n`function`  \nCallback which should be called when a cell has been selected\n\n#### onScrollToSection\n`function`  \nCallback which should be called when the user scrolls to a section\n\n#### cell\n`function` **required**  \nThe cell component to render for each row\n\n#### sectionListItem\n`function`  \nA custom component to render for each section list item\n\n#### sectionHeader\n`function`  \nA custom component to render for each section header\n\n#### footer\n`function`  \nA custom component to render as footer  \n**This props takes precedence over `renderFooter`**\n\n#### renderFooter\n`function`  \nA custom function which has to return a valid React element, which will be\nused as footer.\n\n#### header\n`function`  \nA custom component to render as header  \n**This props takes precedence over `renderHeader`**\n\n#### renderHeader\n`function`  \nA custom function which has to return a valid React element, which will be used as header.\n\n#### headerHeight\n`number`  \nThe height of the rendered header element.  \n**Is required if a header element is used, so the positions can be calculated correctly**\n\n#### cellProps\n`object`  \nAn object containing additional props, which will be passed to each cell component\n\n#### sectionHeaderHeight\n`number` **required**  \nThe height of the section header component\n\n#### cellHeight\n`number` **required**  \nThe height of the cell component\n\n#### useDynamicHeights\n`boolean`  \nWhether 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`  \n**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.**\n\n#### updateScrollState\n`boolean`  \nWhether to set the current y offset as state and pass it to each cell during re-rendering\n\n#### style\n`object|number`  \nStyles to pass to the container\n\n#### sectionListStyle\n`object|number`  \nStyles to pass to the section list container\n\n#### sectionListFontStyle\n`object|number`  \nStyles to pass to the section list letters\n\n---\n### Cell component\n\nThese 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.\n\n#### index\n`number`  \nThe index of the cell inside the current section\n\n#### sectionId\n`string`  \nThe id of the parent section\n\n#### isFirst\n`boolean`  \nWhether the cell is the first in the section\n\n#### isLast\n`boolean`  \nWhether the cell is the last in the section\n\n#### item\n`mixed`  \nThe item to render\n\n#### offsetY\n`number`  \nThe current y offset of the list view  \n**If you do not specify `updateScrollState={true}` for the list component, this props will always be 0**\n\n#### onSelect\n`function`  \nThe function which should be called when a cell is being selected\n\n---\n### Section list item component\n\nThese props are automatically passed to your component\n\n#### sectionId\n`string`  \nThe id of the parent section\n\n#### title\n`string`  \nThe title for this section. Either the return value of `getSectionListTitle` or the same value as `sectionId`\n\n## Example\n\n```javascript\nclass SectionHeader extends Component {\n  render() {\n    // inline styles used for brevity, use a stylesheet when possible\n    var textStyle = {\n      textAlign:'center',\n      color:'#fff',\n      fontWeight:'700',\n      fontSize:16\n    };\n\n    var viewStyle = {\n      backgroundColor: '#ccc'\n    };\n    return (\n      \u003cView style={viewStyle}\u003e\n        \u003cText style={textStyle}\u003e{this.props.title}\u003c/Text\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nclass SectionItem extends Component {\n  render() {\n    return (\n      \u003cText style={{color:'#f00'}}\u003e{this.props.title}\u003c/Text\u003e\n    );\n  }\n}\n\nclass Cell extends Component {\n  render() {\n    return (\n      \u003cView style={{height:30}}\u003e\n        \u003cText\u003e{this.props.item}\u003c/Text\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nclass MyComponent extends Component {\n\n  constructor(props, context) {\n    super(props, context);\n\n    this.state = {\n      data: {\n        A: ['some','entries','are here'],\n        B: ['some','entries','are here'],\n        C: ['some','entries','are here'],\n        D: ['some','entries','are here'],\n        E: ['some','entries','are here'],\n        F: ['some','entries','are here'],\n        G: ['some','entries','are here'],\n        H: ['some','entries','are here'],\n        I: ['some','entries','are here'],\n        J: ['some','entries','are here'],\n        K: ['some','entries','are here'],\n        L: ['some','entries','are here'],\n        M: ['some','entries','are here'],\n        N: ['some','entries','are here'],\n        O: ['some','entries','are here'],\n        P: ['some','entries','are here'],\n        Q: ['some','entries','are here'],\n        R: ['some','entries','are here'],\n        S: ['some','entries','are here'],\n        T: ['some','entries','are here'],\n        U: ['some','entries','are here'],\n        V: ['some','entries','are here'],\n        W: ['some','entries','are here'],\n        X: ['some','entries','are here'],\n        Y: ['some','entries','are here'],\n        Z: ['some','entries','are here'],\n      }\n    };\n  }\n\n  render() {\n    return (\n      \u003cAlphabetListView\n        data={this.state.data}\n        cell={Cell}\n        cellHeight={30}\n        sectionListItem={SectionItem}\n        sectionHeader={SectionHeader}\n        sectionHeaderHeight={22.5}\n      /\u003e\n    );\n  }\n}\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fi6mi6%2Freact-native-alphabetlistview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fi6mi6%2Freact-native-alphabetlistview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fi6mi6%2Freact-native-alphabetlistview/lists"}