Created
April 29, 2015 05:20
-
-
Save aaronksaunders/4cbffdc98cf63bea1e39 to your computer and use it in GitHub Desktop.
tcomb-form-native with React-Native - Missing documentation on setting default date for DatePickerIOS
This file contains hidden or 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
| /** | |
| * Sample React Native App | |
| * https://github.com/facebook/react-native | |
| * | |
| * @see https://github.com/gcanti/tcomb-form-native | |
| */ | |
| var React = require('react-native'); | |
| var t = require('tcomb-form-native'); | |
| var { | |
| AppRegistry, | |
| StyleSheet, | |
| TouchableHighlight, | |
| ScrollView, | |
| Text, | |
| View, | |
| DatePickerIOS, | |
| } = React; | |
| var Form = t.form.Form; | |
| // here we are: define your domain model | |
| var Person = t.struct({ | |
| name: t.Str, // a required string | |
| surname: t.Str, // an optional string | |
| email: t.Str, // an optional string | |
| age: t.Num, // a required number | |
| rememberMe: t.Bool, // a boolean | |
| birthDate: t.maybe(t.Dat) // a date field | |
| }); | |
| var options = { | |
| fields: { | |
| birthDate : { | |
| mode:"date", | |
| } | |
| } | |
| }; // optional rendering options (see documentation) | |
| var reactProjectTwo = React.createClass({ | |
| getDefaultProps: function () { | |
| return { | |
| date: new Date(), | |
| }; | |
| }, | |
| getInitialState: function() { | |
| return { | |
| date: this.props.date, | |
| }; | |
| }, | |
| onPress: function () { | |
| // call getValue() to get the values of the form | |
| var value = this.refs.form.getValue(); | |
| if (value) { // if validation fails, value will be null | |
| alert(JSON.stringify(value)); // value here is an instance of Person | |
| } | |
| }, | |
| render: function() { | |
| return ( | |
| <ScrollView> | |
| <View style={styles.container}> | |
| {/* display */} | |
| <Form | |
| ref="form" | |
| type={Person} | |
| options={options} | |
| value={{ | |
| birthDate : this.props.date | |
| }} | |
| /> | |
| <TouchableHighlight style={styles.button} onPress={this.onPress} underlayColor='#99d9f4'> | |
| <Text style={styles.buttonText}>Save</Text> | |
| </TouchableHighlight> | |
| </View> | |
| </ScrollView> | |
| ); | |
| } | |
| }); | |
| var styles = StyleSheet.create({ | |
| container: { | |
| justifyContent: 'center', | |
| marginTop: 50, | |
| padding: 20, | |
| backgroundColor: '#ffffff', | |
| }, | |
| title: { | |
| fontSize: 30, | |
| alignSelf: 'center', | |
| marginBottom: 30 | |
| }, | |
| buttonText: { | |
| fontSize: 18, | |
| color: 'white', | |
| alignSelf: 'center' | |
| }, | |
| button: { | |
| height: 36, | |
| backgroundColor: '#48BBEC', | |
| borderColor: '#48BBEC', | |
| borderWidth: 1, | |
| borderRadius: 8, | |
| marginBottom: 10, | |
| alignSelf: 'stretch', | |
| justifyContent: 'center' | |
| } | |
| }); | |
| AppRegistry.registerComponent('reactProjectTwo', () => reactProjectTwo); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment