ChecklistApp.js

'use strict';

var React = require('react-native');
var {
  Bundler,
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
  ScrollView,
  TextInput
} = React;

var ChecklistApp = React.createClass({
  getInitialState () {
    return {
      items: [{body: 'sour cream'}]
    };
  },

  renderItems () {
    return this.state.items.map((item) => {
      return <Text style={styles.item}>{item.body}</Text>;
    });
  },

  handleSubmit (event) {
    var item = { body: event.nativeEvent.text };
    var items = this.state.items;
    items.unshift(item);
    this.setState({ items });
  },

  render() {
    return (
      <View style={{marginTop: 20}}>
        <Text>Checklist</Text>
        <TextInput
          style={styles.input}
          autoFocus={true}
          onSubmitEditing={this.handleSubmit}
        />
        <View style={styles.list}>
          {this.renderItems()}
        </View>
      </View>
    );
  }
});

var styles = {
  input: {
    height: 26,
    borderWidth: 0.5,
    borderColor: '#0f0f0f',
    padding: 4,
    fontSize: 13,
  },

  list: {
    top: 0,
    bottom: 100,
    backgroundColor: '#eeeeee',
  },

  item: {
    padding: 10
  }
};

Bundler.registerComponent('ChecklistApp', () => ChecklistApp);

module.exports = ChecklistApp;