Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
native-x-list
Advanced tools
This component adds space between to other components
yarn add native-x-list
npm install native-x-list
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>
)
}
Property | Default Value | Usage |
---|---|---|
children | Array of JSX elements and a render function | |
columnWrapperStyle?: ViewStyle | Additional styles for column wrapper | |
disabled?: boolean | Disables all interactions if set to true | |
divider?: boolean | Show 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?: string | Error to show | |
fill?: boolean | Fill the container | |
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 | |
horizontal?: boolean | Render list horizontally | |
isRefreshing?: boolean | Shows a "pull-to-refresh" animation when true | |
items: S[] | (mandatory) Array of items | |
keyExtractor?: Function | A function to return a value or name of the property as "string" to use as key | |
loading?: boolean | Shows spinner if set to true | |
maintainVisibleContent?: boolean | Maintain visible content if set to true | |
numColumn?: number | Number of columns for the list | |
onFetchNext?: () => void | A function to fetch next page when reaching end of the list (useful for paginated list) | |
onRefresh?: () => void | Event handler when user "pull-to-refresh" | |
onScroll?: (e?: NativeSyntheticEvent) => void | Event handler for scroll | |
onScrollToTopChange?: () => void | Event handler when the list is scrolled to the top of the list | |
onSelectItem?: (props: { item: S, index?: number}) => void | Event handler when an item is pressed | |
renderSectionHeader?: (title: string) => ReactNode | A function to render section header | |
searchBy?: Function | A function to return a value or name of the property as "string" to search by | |
searchText?: string | A string to use as search pattern | |
separator?: ReactNode | JSX element to render as separator between elements | |
showScrollIndicator?: boolean | Show scroll indicator if set to true | |
stickySectionHeadersEnabled?: boolean | Use sticky section headers | |
style?: ViewStyle | Additional styles for the list |
Here is an example of the release type that will be done based on a commit messages:
Commit message | Release 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
List component
The npm package native-x-list receives a total of 254 weekly downloads. As such, native-x-list popularity was classified as not popular.
We found that native-x-list demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.