ListView itemPadding issue

[darek607]

< Main issue

The itemPadding property is not applied unless called setState later.

In order to reproduce run this modified ListView scene from the Catalog. The padding for item is applied only after selecting the toggle which calls the setState (even without any values).

import React from "react";

const ListViewOrientation = {
  vertical: "vertical",
  horizontal: "horizontal"
};
class SceneListView extends React.Component {
  constructor(props) {
    super(props);
    this.resources = [
      require("../../resources/DemoPicture1.jpg"),
      require("../../resources/DemoPicture2.jpg"),
      require("../../resources/DemoPicture3.jpg"),
      require("../../resources/DemoPicture4.jpg"),
      require("../../resources/DemoPicture5.jpg")
    ];
    this.state = {
      listViewOrientation: ListViewOrientation.vertical,
      width: 0.0,
      height: 1.0,
      scrollToItem: 2
    };
  }

  renderItems() {
    var items = [];
    for (var i = 0; i < 5; ++i) {
      items.push(
        <listViewItem backgroundColor={[1, 0.9, 0, 1]} key={i}>
          <linearLayout
            alignment={"center-center"}
            columns={1}
            defaultItemAlignment={"center-center"}
            defaultItemPadding={[0.01, 0.01, 0.01, 0.01]}
            orientation={"horizontal"}
          >
            <image filePath={this.resources[i]} width={0.5} height={0.5} />
            <text
              alignment={"center-center"}
              textColor={'black'}
              textSize={0.08}
            >
              {"Item no. " + i}
            </text>
          </linearLayout>
        </listViewItem>
      );
    }
    return items;
  }

  toggleListViewOrientation = event => {
    this.setState({
        // nothing here
    });
  };

  render() {
    const { listViewOrientation, height, width, scrollToItem } = this.state;
    return (
      <view localPosition={this.props.localPosition}>
        <linearLayout
          localPosition={[0, 0.5, 0]}
          alignment={"center-center"}
          defaultItemAlignment={"center-center"}
          orientation={"vertical"}
        >
          <toggle
            alignment={"center-center"}
            on={false}
            textSize={0.05}
            textColor={'white'}
            height={0.075}
            onToggleChanged={this.toggleListViewOrientation}
          >
            List view orientation
          </toggle>
          <listView
            scrollingEnabled={true}
            orientation={listViewOrientation}
            height={height}
            width={width}
            itemPadding={[
              { index: 2, padding: [0.1, 0, 0.1, 0] }
            ]}
          >
            {this.renderItems()}
          </listView>
        </linearLayout>
      </view>
    );
  }
}

export { SceneListView };

[grozdanov]

MXSCOMP-208