theme property is missing.

[williams-voon]

Hi,

I am going to apply the clean form component in my project. I want to report a bug:

Please see this file: /react-native-clean-form/src/redux-form/createInputCreator.js

Line 23/24:

      <FormGroup theme={theme} border={border} inlineLabel={inlineLabel} error={touched && !!error} {...props} >
        <Label theme={theme}>{ label }</Label>

The theme property is missing.

---

One more question, I don't want to use the default picker:

<Picker
            selectedValue={value}
            onValueChange={this.onValueChange}
            {...rest}>
            { options.map(option => {
              const label = option[labelKey]
              const value = option[valueKey]

              return <Picker.Item key={value} label={label} value={value} />
            }) }
          </Picker>

Is it possible to use my customized Component? I want to define a component that has selectedValue onValueChange etc. properties and pass it to your component.

The JSX code looks like:

<Select
              name="country"
              label="Country"
              options={countryOptions}
              placeholder="Denmark"
              component={MySelectComponent}
            />

Regards, Williams

[markusguenther]

Hi @williams-voon,

thank you for the report of the issue and for using the package. I actually fixed the issue. Replacing components is actually not that easy. We have no registration of own components or so.

I did not try it yet. But if you want to some additional features to the regular picker, we can discuss that and probably add this for all.

[williams-voon]

Hi @markusguenther,

Thank you for prompt response. When I use Select on Android, I have to tap twice to select item. So I want to rewrite the picker. But I the better idea is using PickerAndroid directly.

I have change render() in /react-native-clean-form/src/Select.js. The code like this, just for your reference.

    if (Platform.OS === 'ios') {
      return (
        <SelectWrapper inlineLabel={inlineLabel} theme={theme}>
          <Modal
            onRequestClose={this.toggleSelector}
            visible={showSelector}
          >
            <Picker
              selectedValue={value}
              onValueChange={this.onValueChange}
              {...rest}>
              { options.map(option => {
                const label = option[labelKey]
                const value = option[valueKey]

                return <Picker.Item key={value} label={label} value={value} />
              }) }
            </Picker>
          </Modal>
          <TouchableOpacity onPress={this.toggleSelector}>
            <LabelIconWrapper inlineLabel={inlineLabel}>
              <SelectLabel inlineLabel={inlineLabel}>{ label }</SelectLabel>
              <Icon name="ios-arrow-down" />
            </LabelIconWrapper>
          </TouchableOpacity>
        </SelectWrapper>
      );
    }else{    //android
    let height=theme?theme.FormGroup.height:defaultTheme.FormGroup.height;
      return (
        <SelectWrapper inlineLabel={inlineLabel} theme={theme}>
          <Picker
              style={{height:height}}
            selectedValue={value}
            onValueChange={this.onValueChange}
            {...rest}>
            { options.map(option => {
              const label = option[labelKey]
              const value = option[valueKey]

              return <Picker.Item key={value} label={label} value={value} />
            }) }
          </Picker>
        </SelectWrapper>
      )

    }

[markusguenther]

@williams-voon Hi,

I tried the example app on my android test device and get your point. But the react-native documentation only describe a Picker and PickerIOS. What do you mean with AndroidPicker?

Greats Markus

[williams-voon]

Hi @markusguenther,

I meant just Picker, 'PickerAndroid' is wrong and does not exists.

Regards, Williams