Home Manual Reference Source Repository
import List from 'mrn/lib/List.js'
public class | source

List

Extends:

react-native~Component → List

List Compoent

Example:

<Subheader text="Text only single-line list" primaryColor={COLOR[`${primary}500`].color}/>
{data.single.text.map(list => (
    <List
        primaryText={list.primaryText}/>
))}
<Subheader text="Icon with text single-line list" primaryColor={COLOR[`${primary}500`].color}/>
{data.single.iconText.map(list => (
    <List
        leftIcon={
            <Icon name={list.leftIcon} size={24}/>
        }
        primaryText={list.primaryText}/>
))}
<Subheader text="Avatar with text single-line list" primaryColor={COLOR[`${primary}500`].color}/>
{data.single.avatarText.map((user, i) =>(
    <List
        leftAvatar={
            <Avatar src={user.avatar}/>
        }
        primaryText={user.name}
        rightIcon={
            <Icon name="message" size={24} color={i < 2 ? primaryColor : undefined}/>
        }
    />
))}
<Subheader text="Text only two-line list" primaryColor={COLOR[`${primary}500`].color}/>
{data.two.text.map(list => (
    <List
        primaryText={list.primaryText}
        secondaryText={list.secondaryText}
    />
))}
<Subheader text="Icon with text two-line list" primaryColor={COLOR[`${primary}500`].color}/>
{data.two.iconText.map((list, i) => (
    <View>
        <List
            leftIcon={
            list.leftIcon ? (<Icon name={list.leftIcon} size={24} color={COLOR[`${primary}500`].color}/>) : (<View></View>)
        }
            onLeftIconClick={()=>{console.log(list.leftIcon)}}
            primaryText={list.primaryText}
            secondaryText={list.secondaryText}
            rightIcon={
            list.rightIcon && (<Icon name={list.rightIcon} size={24}  />)
        }
            onRightIconClick={()=>{console.log(list.rightIcon)}}
        />
        {i === 1 && <Divider inset={true}/>}
    </View>
))}
<Subheader text="Avatar with text two-line list" primaryColor={COLOR[`${primary}500`].color}/>
{data.two.avatarText.map((mail, i) => (
    <View>
        <List
            primaryText={mail.name}
            leftAvatar={
            <Avatar src={mail.avatar}/>
        }
            secondaryText={
        <Text>
            <Text style={{color:'rgba(0,0,0,.87)'}}>{mail.subject}</Text>
            <Text> - {mail.body}</Text>
        </Text>
        }
            captionText={`${i * 6 + 1}min ago`}
        />
        {i < data.two.avatarText.length - 1 && <Divider inset={true}/>}
    </View>
))}
<Subheader text="Avatar with text and icon two-line list" primaryColor={COLOR[`${primary}500`].color}/>
{data.two.avatarIconText.map((type, i)=>(
    <View>
        <Subheader text={type.name} inset={true}/>
        {type.files.map((file, j) =>(
            <View>
                <List
                    leftAvatar={
                        <Avatar icon={file.icon} backgroundColor={file.color}/>
                    }
                    primaryText={file.name}
                    secondaryText={file.time}
                    rightIcon={
                        <Icon name="information" size={24}/>
                    }
                    onRightIconClick={()=>{console.log('information')}}
                />
            </View>
        ))}
        {i < data.two.avatarIconText.length - 1 && <Divider inset={true}/>}
    </View>
))}
<Subheader text="Text only three-line list"
primaryColor={COLOR[`${primary}500`].color}/>
{data.two.avatarText.map((mail, i) => (
    <View>
        <List
            primaryText={mail.name}
            secondaryTextMoreLine={[
                {
                    text: mail.subject,
                    style: {
                        color: 'rgba(0,0,0,.87)'
                    },
                },
                {
                    text: mail.body
                }
            ]}
            lines={3}
            captionText={`${i * 6 + 1}min ago`}
        />
        {i < data.two.avatarText.length - 1 && <Divider/>}
    </View>
))}
<Subheader text="Icon with text three-line list"
primaryColor={COLOR[`${primary}500`].color}/>
{data.three.textIcon.map((list) => (
    <List
        primaryText={list.primaryText}
        secondaryText={list.secondaryText}
        lines={3}
        leftIcon={
            <Icon name="checkbox-blank-outline" size={24}/>
        }
        onLeftIconClick={()=>{console.log('checked')}}
    />
))}
<Subheader text="Avatar with text three-line list" primaryColor={COLOR[`${primary}500`].color}/>
{data.two.avatarText.map((mail, i) => (
    <View>
        <List
            primaryText={mail.name}
            leftAvatar={
            <Avatar src={mail.avatar}/>
        }
            secondaryTextMoreLine={[
                {
                    text: mail.subject,
                    style: {
                        color: 'rgba(0,0,0,.87)'
                    },
                },
                {
                    text: mail.body
                }
            ]}
            lines={3}
            rightIcon={
                i < 2 ?
                <Icon name="star" size={24} color={primaryColor}/>
                :
                <Icon name="star-outline" size={24}/>
            }
            onRightIconClick={()=>{console.log('star')}}
            captionText={`${i * 6 + 1}min ago`}
        />
        {i < data.two.avatarText.length - 1 && <Divider inset={true}/>}
    </View>
))}

Constructor Summary

Public Constructor
public

Public Constructors

public constructor(props: object) source

Params:

NameTypeAttributeDescription
props object
props.primaryText string

The primary text of a List

props.secondaryText string
  • optional

The secondary text of a List

props.caption string
  • optional

The least distinguishing content.

props.leftIcon Icon
  • optional

Left icon. Size should be 24.

props.rightIcon Icon
  • optional

Right icon. Size should be 24.

props.leftAvatar Avatar
  • optional

Left avatar. Size should be 40.

props.rightAvatar Avatar
  • optional

Right avatar. Size should be 40.

props.lines number
  • optional
  • default: 1

You must specify this prop when secondary lines large than 1. Lines = Secondary lines + 1.

props.primaryColor string
  • optional
  • default: 'rgba(0,0,0,.87)'

The color of primary text.

props.onPress function
  • optional

The primary action of a list. When user press the list will trigger this function.

props.onLeftIconClick function
  • optional

The secondary action of a list. When user press the left icon will trigger this function.

props.onRightIconClick function
  • optional

The secondary action of a list. When user press the right icon will trigger this function.

props.secondaryTextMoreLine {text: string, style: object} []
  • optional

Pass an array when secondary text breaks some lines.