Tcomb-form-native: Update enums in select dynamically?

[narayananvenk]

Using:

tcomb-form-native v0.4.2
react-native v0.22.2

First, thanks for this repo - total time saver! I have a form with a select input (and enums to populate the select). I am trying to update the enum list based on values that I receive from an API request. Is it possible to update the select option list after the component has mounted?

[alvaromb]

Hello @narayananvenk!

Please take a look at https://github.com/gcanti/tcomb-form-native/issues/3#issuecomment-89081801

tl;dr you can do it updating the options of your form, setting the values of the picker.

[alvaromb]

And if you want to do it easier, just wait till' the API request has finished to mount the form component :)

[narayananvenk]

Worked well. Thank you for the quick response!

I am using a factory for my picker, but wasn't calling componentWillReceiveProps in my custom Picker component. So, the props were never getting updated in my customer Picker (but the tcomb form was correctly sending the new options when it got updated).

[ramsestom]

Having kind of a similar issue. How can I make the form component to wait for my server API request to mount? Could you provide a code example? (I am new to react-native. Sorry)

[narayananvenk]

You can mount and render the form while waiting for the API request to complete with empty values and then update the form values once your response is ready.

If you can paste a code snippet of what you are trying to achieve, I can help you tweak it. Here's a rough snippet:

//Inside your component
constructor(props) {
    super(props);

    this.state = {
        pickerOptions: t.enums({}),
        formValue: {
            newField: <set it to null for initial value since you don't have options>
        }
    };
}

componentDidMount() {
    //run your api call and once you have new value and options..
    //you can run your api call and update the state like this at any place - doesn't have to be componentDidMount
    this.setState({
        pickerOptions: t.enums(<your new options>),
        formValue: {
            newField: <your new value>
        }
    });
}

getForm() {
    return(t.struct({
        newField: this.state.pickerOptions
    }));
}

getFormOptions() {
    return({
        fields: {
            newField: {
                //your field options here
            }
        }
    });
}

render() {
    return(
        <t.form.Form
            type={this.getForm()}
            options={this.getFormOptions()}
            value={this.state.formValue}
        />
    );
}

Hope this helps!

[ramsestom]

OK. Thanks
That is pretty much what I did already exept that I made my api call in componentWillMount rather than componentDidMount. Thought there was some way for the component to actually wait for some event to mount rather than mounting it with empty values (which causes problem with enums in my case).

[alvaromb]

API calls should live in componentDidMount, not componentWillMount. And you should use InteractionManager to run your API calls after any animations.