List, ListItem

Preview

Simple list items

with sections

list item with more informations

Code sample

import { List, Text } from '@dormakaba/digital-reactnative-visual';

<List
  withSections
  keyExtractor={(item, index) => item._id}
  data={getData(persons)}
  renderItem={({ item }) => {
    return (
      <List.Item onPress={() => {}} icon="icon-persons">
        <Text>{`${item.firstname} ${item.lastname}`}</Text>
      </List.Item>
    );
  }}
/>

Props

List

Name	Type	Description
data	array	Array of items to render or array of sections. Learn more about react-native SectionList.
renderItem	function	render function based on react-native list
renderSectionHeader	function	override default section header rendering
renderSeparator	node	override default rendering of separator line
panel	node	The content of the panel to show/hide on scroll
navbarHeight	integer	height of the panel (needed to calculate animations upfront)
withSections	boolean	toggles rendering of section headers
keyExtractor	function	used to get key to set per list item
...		props of react-native SectionList

ListItem

Name	Type	Description
title	string	main content of the list item
text	string	text below main content (second line)
multiline	boolean	allow multiline title, text
icon	string	left icon name
rightIcon	string	right icon name
figure	element	react element to display instead of left icon
rightFigure	element	react element to display instead of right icon
onPress	function	action to handle on pressing the list item
style	object	style override