Skip to content

Instantly share code, notes, and snippets.

@aaronksaunders
Created April 29, 2015 05:20
Show Gist options
  • Save aaronksaunders/4cbffdc98cf63bea1e39 to your computer and use it in GitHub Desktop.
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
/**
* 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