react-native-simple-radio-button
react-native-simple-radio-button copied to clipboard
Radio props with disabled flag not working
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>
);
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.
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.
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>