Slideable List with Reapp

slideablelist.jsx

import React from 'react';
import DottedViewList from 'reapp-ui/views/DottedViewList';
import View from 'reapp-ui/views/View';
import { Container, Block } from 'reapp-ui/components/Grid';
import List from 'reapp-ui/components/List';
import Input from 'reapp-ui/components/Input';
import Button from 'reapp-ui/components/Button';

export default React.createClass({
  getInitialState() {
    return {
      activeView: 0
    };
  },

  styles: {
    view: {
      inner: {
        padding: '20px 40px'
      }
    },

    container: {
      self: {
        height: '100%'
      }
    },

    p: {
      textAlign: 'center',
      fontSize: '18px'
    },

    slider: {
      display: 'block',
      width: '100%',
      margin: 'auto',
      padding: 20,
      overflowY: 'none',
      overflowX: 'scroll',
      whiteSpace: 'nowrap'
    },

    img: {
      width: 300,
      marginRight: 20,
      boxShadow: '0 0 20px rgba(0,0,0,0.5)'
    },
  },

  handleViewEnter(i) {
    this.setState({ activeView: i });
  },

  handleTouchMove(e) {
    e.stopPropagation();
  },

  render() {
    var viewlistProps = this.state.activeView == 1 ?
      { touchableAreaProps: { allowDefault: true } } :
      {};

    return (
      <DottedViewList onViewEntered={this.handleViewEnter} {...viewlistProps}>
        <View title="Start" styles={this.styles.view}>
          <Container col styles={this.styles.container}>
            <Block>
              <p styles={this.styles.p}>
                Get your loved one a beautiful card
                in minutes!
              </p>

              <List inset wrap>
                <Input label="Who for?" type="text" />
              </List>
            </Block>

            <Button>Select Card</Button>
          </Container>
        </View>

        <View title="Select Card">
          <div style={this.styles.slider} onTouchMove={this.handleTouchMove}>
            <img style={this.styles.img} src="/assets/images/1.jpg" />
            <img style={this.styles.img} src="/assets/images/2.jpg" />
            <img style={this.styles.img} src="/assets/images/3.jpg" />
            <img style={this.styles.img} src="/assets/images/4.jpg" />
            <img style={this.styles.img} src="/assets/images/5.jpg" />
          </div>
        </View>
      </DottedViewList>
    );
  }
});