@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 |