Merge pull request gcanti#100 from gcanti/dynamic-forms-example

Dynamic forms example

Author: gcanti

README.md

@@ -361,6 +361,76 @@ var AwesomeProject = React.createClass({
 });
 ```
 
+## Dynamic forms example: how to change a form based on selection
+
+Say I have an iospicker, depending on which option is selected in this picker I want the next component to either be a checkbox or a textbox:
+
+```js
+const Country = t.enums({
+  'IT': 'Italy',
+  'US': 'Unisted States'
+}, 'Country');
+
+var AwesomeProject = React.createClass({
+
+  // returns the suitable type based on the form value
+  getType(value) {
+    if (value.country === 'IT') {
+      return t.struct({
+        country: Country,
+        rememebrMe: t.Boolean
+      });
+    } else if (value.country === 'US') {
+      return t.struct({
+        country: Country,
+        name: t.String
+      });
+    } else {
+      return t.struct({
+        country: Country
+      });
+    }
+  },
+
+  getInitialState() {
+    const value = {};
+    return { value, type: this.getType(value) };
+  },
+
+  onChange(value) {
+    // recalculate the type only if strictly necessary
+    const type = value.country !== this.state.value.country ?
+      this.getType(value) :
+      this.state.type;
+    this.setState({ value, type });
+  },
+
+  onPress() {
+    var value = this.refs.form.getValue();
+    if (value) {
+      console.log(value);
+    }
+  },
+
+  render() {
+
+    return (
+      <View style={styles.container}>
+        <t.form.Form
+          ref="form"
+          type={this.state.type}
+          value={this.state.value}
+          onChange={this.onChange}
+        />
+        <TouchableHighlight style={styles.button} onPress={this.onPress} underlayColor='#99d9f4'>
+          <Text style={styles.buttonText}>Save</Text>
+        </TouchableHighlight>
+      </View>
+    );
+  }
+});
+```
+
 # Types
 
 ### Required field