Tcomb-form-native: Add onChange handler to TextInput

[gcanti]

[weixingsun]

Please let me know if you got this fix ready, I can test it on my phone and simulator

[gcanti]

Thanks @weixingsun, there's a branch for this, you can just run npm install gcanti/tcomb-form-native#168 and try it out

[weixingsun]

@gcanti, I cannot see any alert in onChangeNative, could you pls double check the method calling tree? or let me know if I need change my code ?
onChangeNative(event){
alert(JSON.stringify(event.nativeEvent))
}
render(){

                <Form
                    ref="form"
                    type={t.struct(this.state.type)}
                    value={this.state.value}
                    options={this.state.options}
                    onChange={this.onChange.bind(this)}
                    onChangeNative={this.onChangeNative.bind(this)}
                />
             }

[gcanti]

@weixingsun sorry, I forgot to explain the usage. This is a simple example:

import t from 'tcomb-form-native';

const Form = t.form.Form;

const Type = t.struct({
  name: t.String
})

const options = {
  fields: {
    name: {
      onChange: (event) => console.log(event) // <= the new feature
    }
  }
}

class AwesomeProject extends Component {

  onPress() {
    const value = this.refs.form.getValue();
    if (value) {
      console.log(value)
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <t.form.Form
          ref="form"
          type={Type}
          options={options}
        />
        <TouchableHighlight style={styles.button} onPress={this.onPress.bind(this)} underlayColor='#99d9f4'>
          <Text style={styles.buttonText}>Save</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

[gcanti]

@weixingsun and this is an example implementing a simple AutoExpandingTextInput:

EDIT: optmised options build

import t from 'tcomb-form-native'

const Form = t.form.Form

const Type = t.struct({
  name: t.String
})

class AwesomeProject extends Component {

  constructor(props) {
    super(props)
    this.state = { height: 40 }
    this.options = {
      fields: {
        name: {
          stylesheet: Object.assign({}, Form.stylesheet),
          multiline: true,
          onChange: (event) => {
            this.setState({
              height: event.nativeEvent.contentSize.height
            });
          }
        }
      }
    }
  }

  onPress() {
    const value = this.refs.form.getValue()
    if (value) {
      console.log(value)
    }
  }

  onChange(value) {
    this.setState({ value })
  }

  render() {

    const options = t.update(this.options, {
      fields: {
        name: {
          stylesheet: {
            textbox: {
              normal: {
                height: { $set: this.state.height }
              },
              error: {
                height: { $set: this.state.height }
              }
            }
          }
        }
      }
    })

    return (
      <View style={styles.container}>
        <t.form.Form
          ref="form"
          type={Type}
          options={options}
          value={this.state.value}
          onChange={this.onChange.bind(this)}
        />
        <TouchableHighlight style={styles.button} onPress={this.onPress.bind(this)} underlayColor='#99d9f4'>
          <Text style={styles.buttonText}>Save</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

[gcanti]

Released in https://github.com/gcanti/tcomb-form-native/releases/tag/v0.5.1

[daveteu]

@gcanti

citing your example above, even though I copy codes word for word, onChange of field returns error
undefined is not an object(evaluating 'event.nativeEvent.contentSize.height')

When I console.log event.nativeEvent i get the following object

First time install today, using 0.6.11