Created
March 26, 2015 19:14
-
-
Save chollier/0a7c8365ff904b634b0f to your computer and use it in GitHub Desktop.
TipsCalculator React Native
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Copyright 2004-present Facebook. All Rights Reserved. | |
* | |
* @providesModule TipsCalculatorApp | |
* @flow | |
*/ | |
'use strict'; | |
var React = require('react-native'); | |
var { | |
Bundler, | |
StyleSheet, | |
Text, | |
TextInput, | |
View, | |
} = React; | |
var TipsCalculatorApp = React.createClass({ | |
getInitialState() { | |
return { number: 0 }; | |
}, | |
updateValue(value) { | |
this.setState({number: value}); | |
}, | |
renderTip() { | |
return this.state.number*100*18/10000; | |
}, | |
renderTotal() { | |
return this.state.number*100*118/10000; | |
}, | |
render() { | |
return ( | |
<View style={styles.container}> | |
<TextInput | |
autoCorrect={false} | |
keyboardType={TextInput.keyboardType.numeric} | |
onChange={(event) => this.updateValue(event.nativeEvent.text)} | |
autoFocus={true} | |
style={styles.input} | |
textAlignment="center" | |
/> | |
<Text style={styles.title}>Tip: ${this.renderTip()}</Text> | |
<Text style={styles.title}>Total: ${this.renderTotal()}</Text> | |
</View> | |
); | |
} | |
}); | |
var styles = StyleSheet.create({ | |
container: { | |
flex: 1, | |
justifyContent: 'flex-start', | |
alignItems: 'center', | |
backgroundColor: 'darkmagenta' | |
}, | |
title: { | |
fontSize: 39, | |
marginBottom: 20, | |
fontFamily: 'HelveticaNeue-Light', | |
fontWeight: 'normal', | |
color: 'white' | |
}, | |
input: { | |
height: 156, | |
marginTop: 80, | |
fontFamily: 'HelveticaNeue-UltraLight', | |
fontSize: 156, | |
color: 'white' | |
} | |
}); | |
Bundler.registerComponent('TipsCalculatorApp', () => TipsCalculatorApp); | |
module.exports = TipsCalculatorApp; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment