Skip to content

Instantly share code, notes, and snippets.

@ryanflorence
Created January 31, 2015 15:27
Show Gist options
  • Star 52 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save ryanflorence/080976e21b77eb80ff8f to your computer and use it in GitHub Desktop.
Save ryanflorence/080976e21b77eb80ff8f to your computer and use it in GitHub Desktop.
'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;
@Hyra
Copy link

Hyra commented Mar 4, 2015

@mschipperheyn It's ES6 (ECMA script 6) and it's awesome. Go check it out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment