Skip to content

Instantly share code, notes, and snippets.

@DrMundo0

DrMundo0/ChecklistApp.js

Forked from ryanflorence/ChecklistApp.js
Last active August 29, 2015 14:16
Show Gist options
  • Save DrMundo0/c20bc48ade72664f9c89 to your computer and use it in GitHub Desktop.
Save DrMundo0/c20bc48ade72664f9c89 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @ryanflorence ryanflorence created this gist Jan 31, 2015.
    73 changes: 73 additions & 0 deletions ChecklistApp.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,73 @@
    '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;