Search code examples
react-nativereftcomb

Accessing ref with the onFocus callback while using tcomb-form-native


I'm using https://github.com/gcanti/tcomb-form-native & here's the snippet of code

_renderScene(route, navigator) {
        var Cook_time = {
        onFocus: () => {
            console.log('cook time has focus');
            console.log(this.refs);
        },
    };

    options.fields['Cook_time'] = Cook_time;


    return (
        <View style={{ flex: 1 }}>
            <ScrollView style={styles.container} ref="scrollView">

                <Form
                    ref="form"
                    type={Recipe}
                    options={options}
                    onChange={this.onChange}
                    onFocus={this.onChange}
                    />

console.log prints object{} when it should refer to scrollView, not sure what I might be missing. And here's the code that sets up the form itself

var Recipe = t.struct({
 Recipe_name: t.String,
 yield: t.maybe(t.String),
 Prep_time: t.maybe(t.String),
 Cook_time: t.maybe(t.String),
 source: t.maybe(t.String),
})

var options = {
 fields: {
    yield: {
        label: 'Yield',
    },
    Prep_time: {
        label: 'Preparation time',
    },

    source: {
        label: 'Source',
        placeholder: 'family, friends, website ...',
        onFocus: function () {
            console.log('source has focus');
        }
    }
 }

};

Solution

  • ref attribute is a callback and as per react-native documentation all I need to do is save a reference as so

        <ScrollView style={styles.container} ref={(ref) => this.myScrollView = ref}>