react-native-form-generator
react-native-form-generator copied to clipboard
How to disable fields?
I need my input forms to be read-only until I put them in edit mode.
So I need to manage editable and disabled props of the fields.
InputField is easy:
<InputField
placeholder='Namn'
ref='contactName'
editable={this.props.isEditable}
/>
SwitchField is not easy. I'd like to do like this:
<WrappedSwitchField
value={this.props.project.isActive}
disabled={!this.props.isEditable}
label='Active'
/>
or even
<WrappedSwitchField
value={this.props.project.isActive}
editable={this.props.isEditable}
label='Active'
/>
But the switch field doesn't propagate the disabled prop to the internal switch. I could make a custom field, of course. But it would be nice if all form-generator fields were disableable (is that a word?). It would also be great if the editable prop where used everywhere (instead of disabled for switches)
How about one new line in SwitchComponent.js?
//src/lib/SwitchComponent.js
render(){
return(<Field {...this.props}>
<View style={this.props.containerStyle}
onLayout={this.handleLayoutChange.bind(this)}>
<Text style={this.props.labelStyle}>{this.props.label}</Text>
<Switch
onValueChange={this.handleValueChange.bind(this)}
style={this.props.switchStyle}
value={this.state.value}
--> disabled={ (typeof this.props.editable === 'undefined') ? false : !this.props.editable }/>
</View>
</Field>
)
}
I'm going to check this. The props passed to the parent component are propagated to the children so I guess it should work no matter what. I'll include the change in the new version