import mobiscroll from '@mobiscroll/react';
import '@mobiscroll/react/dist/css/mobiscroll.min.css';

interface DemoProps {
    item?: any;
}

interface DemoState {
    movies?: any;
    moreMovies?: any;
}

mobiscroll.settings = {
    lang: ' '
    theme: 'ios',
    themeVariant: 'light'
};

class ListItem extends React.Component< DemoProps, DemoState > {
    render() {
        return <li>{this.props.item.title}</li>;
    }
}

class ListItem2 extends React.Component< DemoProps, DemoState > {
    render() {
        return <li>{this.props.item.title}</li>;
    }
}

class App extends React.Component< DemoProps, DemoState > {
    constructor(props: DemoProps) {
        super(props);

        this.state = {
            movies: [
                { id: 1, title: 'The Shawshank Redemption (1994)' },
                { id: 2, title: 'The Godfather (1972)' },
                { id: 3, title: 'The Godfather: Part II (1974)' },
                { id: 4, title: 'The Dark Knight (2008)' },
                { id: 5, title: '12 Angry Men (1957)' },
                { id: 6, title: 'Schindler\'s List (1993)' },
                { id: 7, title: 'The Lord of the Rings: The Return of the King (2003)' },
                { id: 8, title: 'Pulp Fiction (1994)' }
            ],
            moreMovies: [
                { id: 1, title: 'The Good, the Bad and the Ugly (1966)' },
                { id: 2, title: 'Fight Club (1999)' },
                { id: 3, title: 'The Lord of the Rings: The Fellowship of the Ring (2001)' },
                { id: 4, title: 'Forrest Gump (1994)' },
                { id: 5, title: 'Star Wars: Episode V - The Empire Strikes Back (1980)' },
                { id: 6, title: 'Inception (2010)' },
                { id: 7, title: 'The Lord of the Rings: The Two Towers (2002)' },
                { id: 8, title: 'One Flew Over the Cuckoo\'s Nest (1975)' }
            ]
        };
    }
    render() {
        return (
            <mobiscroll.Form>
                <mobiscroll.FormGroup>
                    <mobiscroll.FormGroupTitle>Simple</mobiscroll.FormGroupTitle>
                    <mobiscroll.Listview
                        itemType={ListItem} 
                        data={this.state.movies}
                    />
                </mobiscroll.FormGroup>
                <mobiscroll.FormGroup>
                    <mobiscroll.FormGroupTitle>Striped</mobiscroll.FormGroupTitle>
                    <mobiscroll.Listview
                        itemType={ListItem2} 
                        data={this.state.moreMovies}
                        striped={true}
                    />
                </mobiscroll.FormGroup>
            </mobiscroll.Form>
        );
    }    
}

<div id="content"></div>

.demo-main-cont.demo-comp-listview { padding: 0; }
.demo-comp-listview .demo-note { margin: 10px; }