Magic Leap MagicScript Components Landscape Application. ListView

Prepare
Magic Leap One
https://www.magicleap.com/magic-leap-one

mlsdk v.0.20.0
https://creator.magicleap.com/downloads/lumin-sdk/overview

magic-script-cli v2.0.1
https://www.npmjs.com/package/magic-script-cli

magic-script-polyfills v2.2.0
https://www.npmjs.com/package/magic-script-polyfills

magic-script-components v0.0.9
https://www.npmjs.com/package/magic-script-components

**Create Project**

```sh
magic-script init my-list org.magicscript.list "List Component"
cd my-list
```
**Install**

```sh
npm install
npm install magic-script-components
npm install --save-dev @babel/core @babel/plugin-transform-react-jsx rollup-plugin-babel
```

**Code**
Create a new .babelrc file

```json
{
    "plugins": [
        "@babel/plugin-syntax-jsx",
        "@babel/plugin-transform-react-jsx"
    ]
}
```

Change rollup.config.js

```javascript
// Rollup config for consuming some npm modules in MagicScript
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
  external: ['uv', 'lumin', 'ssl'],
  input: 'src/main.js',
  preserveModules: true,
  output: {
    dir: 'bin',
    format: 'es'
  },
  plugins: [
    babel({exclude: "node_modules/**"}),
    resolve(), 
    commonjs()]
};

```

Change app.js

```jsx
import React from 'react';
import { CustomListView } from './components/index.js';

export class MyApp extends React.Component {
  constructor(props) {
    super(props);

    this.items = [
      '01', '02', '03', '04', '05', '06', '07', '08', '09', '10',
      '11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
      '21', '22', '23', '24', '25', '26', '27', '28', '29', '30',
    ];
  }

  render() {
    return (
      <view name='main-view'>  
        <CustomListView items={this.items} ></CustomListView>
      </view>
    );
  }
}
```
Create components folder in src folder.
Create index.js newly in components folder.

```jsx
export { default as CustomListView } from './custom-listview.js';
```
Create custom-listview.js newly in components folder.

```jsx
import React from 'react';

export default class CustomListView extends React.Component {
    constructor(props) {
        super(props);
        this.items = props.items;
    }

    render() {
        let i = 0;
        let viewItems = [];
        for (; i < this.items.length; i++)
        {
            viewItems.push(
                <listViewItem>
                    <text textSize={0.10} textColor={[0.1, 1, 0.1, 0.84]}>{this.items[i]}</text>
                </listViewItem>
            );
        }
        return (
            <listView width={0.5} height={0.5}>
                {viewItems}
            </listView>
        );
    }
}
```


Create global-scope.js newly in src folder.

```javascript
globalThis.process = { env: { NODE_ENV:"development" } };
export default process;
```

Change main.js

```jsx
// Add support for things like setTimeout, setInterval and fetch.
// Simply importing this sets all these as global definitions.
// They are declared in the .eslintrc so your editor won't complain.
import 'magic-script-polyfills';
import './global-scope.js';

import React from 'react';
import mxs from 'magic-script-components';

// Load main app logic from the app class.
import { MyApp } from './app.js';

mxs.bootstrap(<MyApp type='landscape' volumeSize={[1,1,1]} caption='MagicScript CustomList'/>);

```
![Capture_000108.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19029/b0bc0a91-9577-2796-b49b-695b78270327.jpeg)



**Build**

```sh
magic-script build -i
```

**Run**

```sh
magic-script run --port=10000
```

**Reference**

UiListView(Magic Script API Doc)
https://docs.magicscript.org/lumin.ui.UiListView.html

Lists (UiListView)(Guide C++)
https://creator.magicleap.com/learn/guides/luminrt-uilistview

magic-script-components (Github)
https://github.com/magic-script/magic-script-components

magicscript
https://www.magicscript.org/

Thanks!