Open tbiinfotech opened 6 years ago
same issue
Hello you can fix it by replace this code on Picker Field file
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { View, Text } from 'native-base';
import { Platform, Picker, TouchableOpacity } from 'react-native';
import Panel from '../../components/panel';
import styles from './../../styles';
const Item = Picker.Item;
export default class PickerField extends Component {
static propTypes = {
attributes: PropTypes.object,
theme: PropTypes.object,
updateValue: PropTypes.func,
ErrorComponent: PropTypes.func,
}
handleChange(value) {
const attributes = this.props.attributes;
this.props.updateValue(attributes.name, attributes.options[value]);
}
render() {
const { theme, attributes, ErrorComponent } = this.props;
const isValueValid = attributes.options.indexOf(attributes.value) > -1;
const pickerValue = attributes.options.indexOf(attributes.value).toString();
if (Platform.OS !== 'ios') {
return (
<View
style={{...styles.pickerMainAndroid, ...{
backgroundColor: theme.pickerBgColor,
borderBottomColor: theme.inputBorderColor,
borderBottomWidth: theme.borderWidth,
}}}
>
<View style={{ flex: 7 }}>
<Text style={{ color: theme.inputColorPlaceholder }}>{attributes.label}</Text>
</View>
<View style={{ flex: 3 }}>
<Picker
style={{ padding: 2 }}
textStyle={{ color: theme.pickerColorSelected }}
iosHeader="Select one"
mode={attributes.mode}
selectedValue={pickerValue}
onValueChange={value => this.handleChange(value)}
>{
attributes.options.map((item, index) => (
<Item key={index} label={item} value={`${index}`} />
))
}
</Picker>
</View>
<ErrorComponent {...{ attributes, theme }} />
</View>
);
}
return (
<View
style={{...styles.pickerMainAndroid, ...{
backgroundColor: theme.pickerBgColor,
borderBottomColor: theme.inputBorderColor,
borderBottomWidth: theme.borderWidth,
}}}
>
<TouchableOpacity
onPress={() => this.panel.toggle()}
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
paddingVertical: 10,
}}
>
<Text style={{ color: theme.inputColorPlaceholder }}>
{attributes.label}
</Text>
<Text style={{ color: theme.inputColorPlaceholder }}>
{isValueValid ? attributes.value : 'None'}
</Text>
</TouchableOpacity>
<ErrorComponent {...{ attributes, theme }} />
<View style={{ flex: 1 }}>
<Panel
ref={(c) => { this.panel = c; }}
>
<Picker
style={{ padding: 2 }}
textStyle={{ color: theme.pickerColorSelected }}
mode={attributes.mode}
selectedValue={pickerValue}
onValueChange={value => this.handleChange(value)}
>{
attributes.options.map((item, index) => (
<Item key={index} label={item} value={`${index}`} />
))
}
</Picker>
</Panel>
</View>
</View>
);
}
}
I got the same issue, and exactly as @Q8hma suggested above, making those changes in /src/fields/picker/index.js would fix this bug.
The changes you need to make is perhaps summarized more clearly in this issue thread (#22) by @mbs8: Picker iOS Error http://github.com/bietkul/react-native-form-builder/issues/22
Duplicate of #22
Form validation not working: You attempted to set the key
backgroundColor
with the value"transparent"
on an object that is meant to be immutable and has been frozen.