ListViewItem.md

id	title
listViewItem	ListViewItem

import PlatformTabs from '@theme/PlatformTabs';

​

Description

The ListViewItem creates the parent node and container for items in a list view. Each individual list item is contained in a ListViewItem, which is parented to a ListView. The ListViewItem automatically creates a background quad that represents the bounds of the item in the list view.

Example

import React from "react";
import {
  ListView,
  ListViewItem,
  Text,
  Image,
  View,
  RectLayout,
  ScrollBar,
  Scene,
  Prism
} from "magic-script-components";

export default class MyApp extends React.Component {
  render() {
    const contacts = [
      { name: 'Lorem Ipsum    ', email: '[email protected] ', image: require('../../resources/contact1.jpg'), phone: '(555)-123-1234' },
      { name: 'Little Kitten  ', email: '[email protected]', image: require('../../resources/contact2.jpg'), phone: '(555)-123-1234' },
      { name: 'Lorem Ipsum 2  ', email: '[email protected] ', image: require('../../resources/contact1.jpg'), phone: '(555)-123-1234' },
      { name: 'Little Kitten 2', email: '[email protected]', image: require('../../resources/contact2.jpg'), phone: '(555)-123-1234' },
      { name: 'Lorem Ipsum 3  ', email: '[email protected] ', image: require('../../resources/contact1.jpg'), phone: '(555)-123-1234' },
      { name: 'Little Kitten 3', email: '[email protected]', image: require('../../resources/contact2.jpg'), phone: '(555)-123-1234' }
    ];

    return (
      <Scene>
        <Prism size={[1, 1, 0.2]} >
          <View name="main-view" anchorPoint={'center-center'}>
            <ListView position={[0, 0, 0]} width={0.7} height={0.5} defaultItemAlignment={'top-left'} defaultItemPadding={[0, 0, 0.01, 0]}>
              <ScrollBar length={0.5} thumbSize={0.03} />
              {contacts.map((contact, index) => (
                <ListViewItem key={index}>
                  <RectLayout width={0.35} alignment={'top-left'}>
                    <View>
                      <Image position={[0, 0, 0]} height={0.17} width={0.17} filePath={contact.image} />
                      <Text position={[0.2, 0.05, 0]} anchorPoint={'center-left'} fontSize={0.07} weight={"bold"} textColor={"#85D834"} >
                        {contact.name}
                      </Text>
                      <Text position={[0.2, 0, 0]} anchorPoint={'center-left'} fontSize={0.05} textColor={"#e0e0e0"} >
                        {contact.email}
                      </Text>
                      <Text position={[0.2, -0.05, 0]} anchorPoint={'center-left'} fontSize={0.05} textColor={"#B5B5B5"}>
                        {contact.phone}
                      </Text>
                    </View>
                  </RectLayout>
                </ListViewItem>
              ))}
            </ListView>
          </View>
        </Prism>
      </Scene>
    );
  }
}

Element Properties

Name	Type	Default Value	Description
backgroundColor	vec4	n/a	Sets the background color.

Known issues

[ListViewItem] Behaves differently depend on the platform