@vivintsolar-oss/native-vs-list

List component for React Native.

Usage no npm install needed!

<script type="module">
  import vivintsolarOssNativeVsList from 'https://cdn.skypack.dev/@vivintsolar-oss/native-vs-list';
</script>

README

@vivintsolar-oss/native-vs-list

yarn add @vivintsolar-oss/native-vs-list
// or
// npm install @vivintsolar-oss/native-vs-list

VSList

A flexible list component

Demo

import { List, ListItem } from '@vivintsolar-oss/native-vs-list';

<List>
  <ListItem
    label="Yoda"
    itemStyle={styles.itemStyle}
    rightIconStyle={styles.icon}
    rightIcon={() => {
      return <RightChevron color={'green'} />;
    }}
    onPress={() => {
      return Alert.alert('Press you did');
    }}
  />
  <ListItem
    label="Vader"
    itemStyle={styles.itemStyle}
    leftIconStyle={styles.icon}
    labelTextStyle={styles.center}
    leftIcon={() => {
      return <LeftChevron color={'red'} />;
    }}
    rightIcon={null}
  />
  <ListItem
    label="Worst Character"
    renderLabel={() => {
      return <Text>Jar Jar</Text>;
    }}
    itemStyle={styles.rightPadding}
    rightIconStyle={styles.icon}
    rightIcon={null}
    onPress={() => {
      return Alert.alert('💩');
    }}
  />
</List>

Props

Name Default Type Description
label string Text used within the list item
itemHeight 48 number Height of list item
itemStyle object Custom style passed to list item
labelTextStyle object Custom style passed to label text
leftIconStyle object Custom style passed to left icon
rightIconStyle object Custom style passed to right icon
containerStyle object Custom style passed to list
bgColor string Background color of list
leftIcon null func Render prop
rightIcon () => <RightChevron /> func Render prop
renderLabel null func Render prop
onPress func Event that's fired when list item is pressed. If none is passed then list item will not be Touchable