Tcomb-form-native: How to set border to select options

[abdelghafourzguindou]

I want to set the border in my selection option. I try to use this code but it does not work.

stylesheet.select.normal.borderWidth = 1;
stylesheet.select.error.borderWidth = 1;

So how can i do it please?

[vendramini]

You can't. You have to use templates instead.

The original select from source code is:

return (
    <View style={formGroupStyle}>
      {label}
      <Picker
        accessibilityLabel={locals.label}
        ref="input"
        style={selectStyle}
        selectedValue={locals.value}
        onValueChange={locals.onChange}
        help={locals.help}
        enabled={locals.enabled}
        mode={locals.mode}
        prompt={locals.prompt}
        itemStyle={locals.itemStyle}
      >
        {options}
      </Picker>
      {help}
      {error}
    </View>
  );

Just copy/paste the files (android and ios) from tcomb-form-native/lib/templates/bootstrap to your project, then you can wrap the component with a <View> and style it.

To use your template, on your options definitions, just do:

formOptions: {
    yourSelectField: {
        template: require('..path/select') //react automatically choose the right OS version
    }
}

[abdelghafourzguindou]

Thanks @vendramini :+1: It's work for me

[romualdleuga]

Thank you @vendramini it works perfectly fine. Here is an example.

• Wrap the picker section in a view like this:

return (
    <View >
      {label}
      <View style={styles.selectStyle}>
      <Picker
        accessibilityLabel={locals.label}
        ref="input"
        style={selectStyle}
        selectedValue={locals.value}
        onValueChange={locals.onChange}
        help={locals.help}
        enabled={locals.enabled}
        mode={locals.mode}
        prompt={locals.prompt}
        itemStyle={locals.itemStyle}
      >
        {options}
      </Picker>
      </View>
      {help}
      {error}
    </View>
  );

an example of style can help other people out:
To get the same style as in iOS use this:

selectStyle: {
    borderWidth: 0.4,
    marginTop: 3,
    marginBottom: 5,
    height: 50,
    borderRadius: 4
  }

Hope that help.

[Atikur-Rahman-Sabuj]

How should I show the options? Where are you getting the option variable.