Update the main example

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 (
-      <View style={styles.container}>
-        {/* display */}
-        <Form
-          ref="form"
-          type={Person}
-          options={options}
-        />
-        <TouchableHighlight style={styles.button} onPress={this.onPress} underlayColor='#99d9f4'>
-          <Text style={styles.buttonText}>Save</Text>
-        </TouchableHighlight>
-      </View>
-    );
-  }
-});
+    render() {
+        return (
+            <View style={styles.container}>
+                {/* display */}
+                <Form
+                    ref={component => this._form = component}
+                    type={Person}
+                    options={options}
+                />
+                <TouchableHighlight
+                    style={styles.button}
+                    onPress={this.onPress}
+                    underlayColor='#99d9f4'
+                >
+                    <Text style={styles.buttonText}>Save</Text>
+                </TouchableHighlight>
+            </View>
+        );
+    }
+}
 
-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);