Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
'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