{"id":19273984,"url":"https://github.com/rintoj/native-x-list","last_synced_at":"2025-09-01T16:44:19.663Z","repository":{"id":46457000,"uuid":"337400278","full_name":"rintoj/native-x-list","owner":"rintoj","description":null,"archived":false,"fork":false,"pushed_at":"2022-12-29T10:52:05.000Z","size":344,"stargazers_count":0,"open_issues_count":1,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-25T13:41:14.683Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rintoj.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-02-09T12:39:53.000Z","updated_at":"2021-10-11T17:46:35.000Z","dependencies_parsed_at":"2023-01-31T08:45:42.291Z","dependency_job_id":null,"html_url":"https://github.com/rintoj/native-x-list","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rintoj%2Fnative-x-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rintoj%2Fnative-x-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rintoj%2Fnative-x-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rintoj%2Fnative-x-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rintoj","download_url":"https://codeload.github.com/rintoj/native-x-list/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250145273,"owners_count":21382386,"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","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-11-09T20:44:42.643Z","updated_at":"2025-04-21T22:33:19.495Z","avatar_url":"https://github.com/rintoj.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# native-x-list\n\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\nThis component adds space between to other components\n\n## Install\n\n### Yarn\n\n```sh\nyarn add native-x-list\n```\n\n### NPM\n\n```sh\nnpm install native-x-list\n```\n\n## Usage\n\n```tsx\nimport { List } from 'native-x-list'\n\nconst users: User[] = [{ id: '1', name: 'John Doe', userId: 'johnd' }]\n\n// with just render function\nfunction UserList() {\n return \u003cList items={users}\u003e{user =\u003e \u003cUser user={user} /\u003e}\u003c/List\u003e\n}\n\n// with additional elements\nfunction UserList() {\n return (\n \u003cList items={users}\u003e\n \u003cUserListHeader /\u003e\n {user =\u003e \u003cUser user={user} /\u003e}\n \u003cUserListFooter /\u003e\n \u003c/List\u003e\n )\n}\n```\n\nYou can integrate list with a search box as shown below:\n\n```tsx\nimport { List } from 'native-x-list'\nimport { TextInput } from 'native-x-text-input'\n\nfunction UserList() {\n const [searchText, setSearchText] = useState\u003cstring\u003e()\n return (\n \u003cList items={users} searchText={searchText}\u003e\n \u003cTextInput value={searchText} onChange={setSearchText} /\u003e\n {user =\u003e \u003cUser user={user} /\u003e}\n \u003c/List\u003e\n )\n}\n```\n\n## API\n\n| Property | Default Value | Usage |\n| ---------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------ |\n| children | | Array of JSX elements and a render function |\n| columnWrapperStyle?: ViewStyle | | Additional styles for column wrapper |\n| disabled?: boolean | | Disables all interactions if set to true |\n| divider?: boolean | | Show a divider if set to true |\n| emptyMessage?: { title: string, message: string} | | Show \"title\" and a \"message\" if list is empty or use a render function |\n| error?: string | | Error to show |\n| fill?: boolean | | Fill the container |\n| groupBy?: Function | | A function to return a value or name of the property as \"string\" to group by which will be used as section headers |\n| horizontal?: boolean | | Render list horizontally |\n| isRefreshing?: boolean | | Shows a \"pull-to-refresh\" animation when true |\n| items: S[] | | (mandatory) Array of items |\n| keyExtractor?: Function | | A function to return a value or name of the property as \"string\" to use as key |\n| loading?: boolean | | Shows spinner if set to true |\n| maintainVisibleContent?: boolean | | Maintain visible content if set to true |\n| numColumn?: number | | Number of columns for the list |\n| onFetchNext?: () =\u003e void | | A function to fetch next page when reaching end of the list (useful for paginated list) |\n| onRefresh?: () =\u003e void | | Event handler when user \"pull-to-refresh\" |\n| onScroll?: (e?: NativeSyntheticEvent\u003cNativeScrollEvent\u003e) =\u003e void | | Event handler for scroll |\n| onScrollToTopChange?: () =\u003e void | | Event handler when the list is scrolled to the top of the list |\n| onSelectItem?: (props: { item: S, index?: number}) =\u003e void | | Event handler when an item is pressed |\n| renderSectionHeader?: (title: string) =\u003e ReactNode | | A function to render section header |\n| searchBy?: Function | | A function to return a value or name of the property as \"string\" to search by |\n| searchText?: string | | A string to use as search pattern |\n| separator?: ReactNode | | JSX element to render as separator between elements |\n| showScrollIndicator?: boolean | | Show scroll indicator if set to true |\n| stickySectionHeadersEnabled?: boolean | | Use sticky section headers |\n| style?: ViewStyle | | Additional styles for the list |\n\n## Automatic Release\n\nHere is an example of the release type that will be done based on a commit messages:\n\n| Commit message | Release type |\n| ------------------- | --------------------- |\n| fix: [comment] | Patch Release |\n| feat: [comment] | Minor Feature Release |\n| perf: [comment] | Major Feature Release |\n| doc: [comment] | No Release |\n| refactor: [comment] | No Release |\n| chore: [comment] | No Release |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frintoj%2Fnative-x-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frintoj%2Fnative-x-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frintoj%2Fnative-x-list/lists"}