diff --git a/README.md b/README.md index 43cb5fed..730b3c36 100644 --- a/README.md +++ b/README.md @@ -75,72 +75,74 @@ http://react.rocks/example/tcomb-form-native // index.ios.js 'use strict'; +import React from 'react'; +import { AppRegistry, StyleSheet, Text, View, TouchableHighlight } from 'react-native'; +import t from 'tcomb-form-native'; -var React = require('react-native'); -var t = require('tcomb-form-native'); -var { AppRegistry, StyleSheet, Text, View, TouchableHighlight } = React; - -var Form = t.form.Form; +const { form: { Form } } = t; // here we are: define your domain model -var Person = t.struct({ - name: t.String, // a required string - surname: t.maybe(t.String), // an optional string - age: t.Number, // a required number - rememberMe: t.Boolean // a boolean +const Person = t.struct({ + name: t.String, // a required string + surname: t.maybe(t.String), // an optional string + age: t.Number, // a required number + rememberMe: t.Boolean // a boolean }); -var options = {}; // optional rendering options (see documentation) - -var AwesomeProject = React.createClass({ +const options = {}; // optional rendering options (see documentation) - 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 - console.log(value); // value here is an instance of Person +class AwesomeProject extends React.Component { + onPress = () => { + // call getValue() to get the values of the form + const value = this._form.getValue(); + if (value) { // if validation fails, value will be null + console.log(value); // value here is an instance of Person + } } - }, - render: function() { - return ( - - {/* display */} -
- - Save - - - ); - } -}); + render() { + return ( + + {/* display */} + this._form = component} + type={Person} + options={options} + /> + + Save + + + ); + } +} -var styles = StyleSheet.create({ - container: { - justifyContent: 'center', - marginTop: 50, - padding: 20, - backgroundColor: '#ffffff', - }, - buttonText: { - fontSize: 18, - color: 'white', - alignSelf: 'center' - }, - button: { - height: 36, - backgroundColor: '#48BBEC', - borderColor: '#48BBEC', - borderWidth: 1, - borderRadius: 8, - marginBottom: 10, - alignSelf: 'stretch', - justifyContent: 'center' - } +const styles = StyleSheet.create({ + container: { + justifyContent: 'center', + marginTop: 50, + padding: 20, + backgroundColor: '#ffffff', + }, + 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('AwesomeProject', () => AwesomeProject);