Socket
Socket
Sign inDemoInstall

native-x-list

Package Overview
Dependencies
8
Maintainers
1
Versions
24
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    native-x-list

List component


Version published
Weekly downloads
192
decreased by-40.74%
Maintainers
1
Install size
63.9 MB
Created
Weekly downloads
 

Readme

Source

native-x-list

semantic-release

This component adds space between to other components

Install

Yarn

yarn add native-x-list

NPM

npm install native-x-list

Usage

import { List } from 'native-x-list'

const users: User[] = [{ id: '1', name: 'John Doe', userId: 'johnd' }]

// with just render function
function UserList() {
  return <List items={users}>{user => <User user={user} />}</List>
}

// with additional elements
function UserList() {
  return (
    <List items={users}>
      <UserListHeader />
      {user => <User user={user} />}
      <UserListFooter />
    </List>
  )
}

You can integrate list with a search box as shown below:

import { List } from 'native-x-list'
import { TextInput } from 'native-x-text-input'

function UserList() {
  const [searchText, setSearchText] = useState<string>()
  return (
    <List items={users} searchText={searchText}>
      <TextInput value={searchText} onChange={setSearchText} />
      {user => <User user={user} />}
    </List>
  )
}

API

PropertyDefault ValueUsage
childrenArray of JSX elements and a render function
columnWrapperStyle?: ViewStyleAdditional styles for column wrapper
disabled?: booleanDisables all interactions if set to true
divider?: booleanShow a divider if set to true
emptyMessage?: { title: string, message: string}Show "title" and a "message" if list is empty or use a render function
error?: stringError to show
fill?: booleanFill the container
groupBy?: FunctionA function to return a value or name of the property as "string" to group by which will be used as section headers
horizontal?: booleanRender list horizontally
isRefreshing?: booleanShows a "pull-to-refresh" animation when true
items: S[](mandatory) Array of items
keyExtractor?: FunctionA function to return a value or name of the property as "string" to use as key
loading?: booleanShows spinner if set to true
maintainVisibleContent?: booleanMaintain visible content if set to true
numColumn?: numberNumber of columns for the list
onFetchNext?: () => voidA function to fetch next page when reaching end of the list (useful for paginated list)
onRefresh?: () => voidEvent handler when user "pull-to-refresh"
onScroll?: (e?: NativeSyntheticEvent) => voidEvent handler for scroll
onScrollToTopChange?: () => voidEvent handler when the list is scrolled to the top of the list
onSelectItem?: (props: { item: S, index?: number}) => voidEvent handler when an item is pressed
renderSectionHeader?: (title: string) => ReactNodeA function to render section header
searchBy?: FunctionA function to return a value or name of the property as "string" to search by
searchText?: stringA string to use as search pattern
separator?: ReactNodeJSX element to render as separator between elements
showScrollIndicator?: booleanShow scroll indicator if set to true
stickySectionHeadersEnabled?: booleanUse sticky section headers
style?: ViewStyleAdditional styles for the list

Automatic Release

Here is an example of the release type that will be done based on a commit messages:

Commit messageRelease type
fix: [comment]Patch Release
feat: [comment]Minor Feature Release
perf: [comment]Major Feature Release
doc: [comment]No Release
refactor: [comment]No Release
chore: [comment]No Release

FAQs

Last updated on 11 Oct 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc