react-native-simple-radio-button icon indicating copy to clipboard operation
react-native-simple-radio-button copied to clipboard

Radio props with disabled flag not working

Open trialsNow opened this issue 5 years ago • 3 comments

This code is not disabling 0 index, still selectable. It works if I add disabled=true in Radioform but that disables all buttons in form. I want to disable one from an async process.

How can I achieve that?

render() {
const radioProps = [
      {
        label: <Text>{i18n.t('ACCOUNT_No_Protection_useDevicePasscode')}</Text>,
        value: 0,
        disabled: true
      },
      {
        label: <Text>{i18n.t('ACCOUNT_No_Protection_setAPasscode')}</Text>,
        value: 1,
        disabled: false
      }
    ];
 return (
<View style={styles.radioButtonContainer}>
              <RadioForm
                radio_props={radioProps}
                initial={null}
                buttonColor={provider.color}
                selectedButtonColor={provider.color}
                animation={false}
                onPress={value => {
                  this.onRadioSelect(value);
                }}
              />
            </View>


);


trialsNow avatar Mar 06 '19 18:03 trialsNow

radio_props = [
    { value: 1, label: 'one', disabled: true },
    { value: 2, label: 'two' },
    { value: 3, label: 'three', disabled: true },
];

I'm also having this problem. We need to disable some of the radio buttons. Any idea how to achieve this? Please advice.

jeafgilbert avatar Oct 28 '19 06:10 jeafgilbert

I managed to address this issue by these steps:

  • Open node_modules/react-native-simple-radio-button/lib/SimpleRadioButton.js
  • Find disabled={this.props.disabled} around line 72, modify to: disabled={this.props.disabled || obj.disabled ? obj.disabled : false}
  • Save and try again.

Hope this helps.

jeafgilbert avatar Oct 28 '19 08:10 jeafgilbert

I could solve without changing node_modules. I'm not sure if the component was updated, but I simply added disabled to it:

  <RadioForm formHorizontal animation>
        {options.map((obj, index) => (
            <SimpleRadioButton
                labelHorizontal
                key={index}
                style={{marginBottom: 0}}
                wrapStyle={[styles.container, index !== 0 && styles.separator]}>
                <RadioButtonInput
                    disabled={obj.disabled}
                    obj={obj}
                    index={index}
                    isSelected={value === obj.value}
                    onPress={onPress}
                    buttonInnerColor={theme.colors.secondary}
                    buttonOuterColor={theme.colors.secondary}
                    buttonWrapStyle={{marginLeft: 10}}
                />
                <RadioButtonLabel
                    disabled={obj.disabled}
                    obj={obj}
                    index={index}
                    labelHorizontal
                    onPress={onPress}
                />
            </SimpleRadioButton>
        ))}
    </RadioForm>

otaviobonder-deel avatar Dec 09 '20 17:12 otaviobonder-deel