Do you know how to set the inital value of React-Native Picker component to empty. I mean it should not show any item selected.
I solved this problem by setting fake unselectable item with value={-1}. Then when user picks valid item,fake item with value={-1} disappear.
// this.state.selectedIndex initially setted to -1
<Picker
selectedValue={this.state.selectedIndex}
onValueChange={(value, index) => { this.setState({selectedIndex: index})
}}
>
// first fake item
if(Platform.OS === 'android' && this.state.selectedIndex === -1) {
<Picker.Item label={'CANCEL'} value={-1} />
}
<Picker.Item label={'First'} value={1} />
<Picker.Item label={'Second'} value={2} />
<Picker.Item label={'Third'} value={3} />
</Picker>
I think the part you need is enabled={false}.
https://github.com/react-native-picker/picker#enabled-1
<Picker
selectedValue={selected}
onValueChange={(itemValue, itemIndex) => setSelected(itemValue)}>
<Picker.Item key='' label='-- Select a Item --' value={null} enabled={false} />
{items.map(i => <Picker.Item key={i.key} label={i.label} value={i.value} />)}
</Picker>
you can do it this way
<Picker
selectedValue={selected}
onValueChange={itemValue => setSelected(itemValue)}
>
{items &&
items.map((element, index) => {
if (index === 0) {
return (
<Picker.Item
key={element.value}
label={element.label}
value={element.value}
enabled={false}
/>
);
}
return (
<Picker.Item
key={element.value}
label={element.label}
value={element.value}
/>
);
})}
</Picker>
Related
This is a simplification of the code but I have several pickers and they don't work correctly for me, I don't know what I'm doing wrong.
import { Picker } from '#react-native-picker/picker';
export default function ProfileScreen() {
const [ province, setProvince ] = useState("madrid")
return (
<>
<View style={styles.picker_and_inputs}>
<Picker
selectedValue={province}
onValueChange={(value, itemIndex) => setProvince({value})}
mode="dropdown"
>
<Picker.Item label="Madrid" value="madrid" />
<Picker.Item label="Barcelona" value="barcelona" />
<Picker.Item label="Cataluña" value="cataluña" />
</Picker>
</View>
</>
);
}
I consoled logged what onValueChange was returning
onValueChange={(value, itemIndex) => console.log(value)}
and got a string
madrid
Thus all you need to do is change from this
onValueChange={(value, itemIndex) => setProvince({value})}
to this.
onValueChange={(value, itemIndex) => setProvince(value)}
Everything works fine now just remove those brackets.Full Example here (https://snack.expo.dev/#heytony01/insane-pretzel)
In react native picker, state is not changing between parent and psychiatrist. Is it only going to parent button even if we select psychiatrist?
<Picker style = {styles.input1}
selectedValue={this.state.selectedValue}
onValueChange={(itemValue, itemIndex) =>
this.setState({designation: itemValue})
}>
<Picker.Item label="Parent" value="Parent" />
<Picker.Item label="Psychiatrist" value="Psychiatrist" />
<Picker.Item label="NA" value="NA" />
</Picker>
You are not setting the right state in the selected value. Set the selected value to this.state.designation:
<Picker style = {styles.input1}
selectedValue={this.state.designation}
onValueChange={(itemValue, itemIndex) =>
this.setState({designation: itemValue})
}>
<Picker.Item label="Parent" value="Parent" />
<Picker.Item label="Psychiatrist" value="Psychiatrist" />
<Picker.Item label="NA" value="NA" />
</Picker>
In your onValueChange you are settingState "designation" ,instead you should change state of the selectedValue of the picker : "selectedValue".
<Picker style = {styles.input1}
selectedValue={this.state.selectedValue}
onValueChange={(itemValue, itemIndex) =>
this.setState({selectedValue: itemValue})
}>
<Picker.Item label="Parent" value="Parent" />
<Picker.Item label="Psychiatrist" value="Psychiatrist" />
<Picker.Item label="NA" value="NA" />
</Picker>
This is my sample code, in Android I cant select first Picker Item at first time, i have created one dummy item so i need to hide first field.
<Picker
selectedValue={ this.state.selectedValue }
onValueChange={(item) => this.setState({selectedValue: item})}>
<Picker.Item label={"Slect Any"} value={null} />
<Picker.Item label={"item1"} value={'item1'} key={key} />
<Picker.Item label={"item2"} value={'item2'} key={key} />
<Picker.Item label={"item3"} value={'item3'} key={key} />
</Picker>
Any one help this.
You'll need your component to have an extra boolean field canSelectAny in the state:
<Picker
selectedValue={ this.state.selectedValue }
onValueChange={(item) => this.setState({selectedValue: item})}>
{this.state.canSelectAny && <Picker.Item label={"Select Any"} value={null} />}
<Picker.Item label={"item1"} value={'item1'} key={key} />
<Picker.Item label={"item2"} value={'item2'} key={key} />
<Picker.Item label={"item3"} value={'item3'} key={key} />
</Picker>
This should be the answer to your question
{this.state.loading = false ? (<Picker.Item label="Art" value="Art" />) :null}
child component
<View style={{flex:1}}>
<Picker
selectedValue={this.props.questions}
onValueChange={}//I do not know how to write here
// onValueChange={(value) => this.setState({questions1 :value})}
mode="dropdown"
style={{color:'#f00'}}
>
<Picker.Item label="1" value="1"/>
<Picker.Item label="2" value="2"/>
<Picker.Item label="3" value="3"/>
<Picker.Item label="4" value="4"/>
</Picker>
</View>
parent component
render() {
var items=[];
for (var i = 0; i < myData.length; i++) {
this.state["questions"+i]=1
items.push(
<SelectValue
questions={this.state['questions'+i]}>
</SelectValue>
)
}
return (
{items}
)
Now I don't know how to write the onValueChange={}.
I want the child component(picker) can be reused.
So when the picker's value change the parent state also change, that what I want
from parent component you can pass a function as a prop.
render() {
var items=[];
for (var i = 0; i < myData.length; i++) {
this.state["questions"+i]=1
items.push(
<SelectValue
onValueChange={(value) => this.setState({["questions"+i]:value})}
questions={this.state['questions'+i]}>
</SelectValue>
)
}
return ({items})
}
in child component
<View style={{flex:1}}>
<Picker
selectedValue={this.props.questions}
onValueChange={this.props.onValueChange}
mode="dropdown"
style={{color:'#f00'}}
>
<Picker.Item label="1" value="1"/>
<Picker.Item label="2" value="2"/>
<Picker.Item label="3" value="3"/>
<Picker.Item label="4" value="4"/>
</Picker>
</View>
I have come across this error when I used Picker component as follows,
<Picker
style={{ flex: 1 }}>
selectedValue={this.props.shift}
onValueChange={value => this.props.employeeFormAction({
prop:'shift', value })}
>
<Picker.Item label='Monday' value='Monday' />
<Picker.Item label='Tuesday' value='Tuesday' />
<Picker.Item label='Wednesday' value='Wednesday' />
<Picker.Item label='Thursday' value='Thursday' />
<Picker.Item label='Friday' value='Friday' />
<Picker.Item label='Saturday' value='Saturday' />
<Picker.Item label='Sunday' value='Sunday' />
</Picker>
I have tired this solution from same community
react-native - Picker - undefined is not an object (evaluating 'this.props.children[position].props)
But it didn't work for me. Could any body suggest solution for this issue.
Try to not hardcode the values. This way is cleaner:
// inside your component (supposing is not a functional component)
_renderShifts = () => {
const shifts = ['Monday', 'Tuesday', 'Wednesday','Thursday',
'Friday','Saturday', 'Sunday'];
return shifts.map((shift) => {
<Picker.Item key={"shift_"+i} label={shift} value={shift} />
});
}
// now your picker should render this way
_renderPicker = () => {
<Picker
style={{ flex: 1 }}>
selectedValue={this.props.shift}
onValueChange={value => this.props.employeeFormAction({prop:'shift', value })}
>
{this._renderShifts()}
</Picker>
}
This error is also returned when the Picker is imported without the corresponding object destructuring.
Incorrect
import Picker from '#react-native-community/picker'
Correct
import { Picker } from '#react-native-community/picker'