In my React-native project I have a picker that, behind the scenes, chooses an array to use in a function.
<Picker
style={styles.onePicker} itemStyle={styles.onePickerItem}
selectedValue={this.state.food}
onValueChange={(itemValue) => { this.setState({food: itemValue}); this.cuisine();}}
>
<Picker.Item label="Italian" value="Italian" />
<Picker.Item label="Chinese" value="Chinese" />
<Picker.Item label="Cajun" value="Cajun" />
<Picker.Item label="KFC" value="KFC" />
</Picker>
It all works, but the setState does not get assigned before the function is run. In use, the array used is one picker section/action behind what's shown.
Is it normal to need a setTimeout, or whatever is used in react, for Pickers?
I also tried passing the itemValue in the cuisine function
this.cuisine(itemValue);
which calls:
cuisine = (data) => { the function stuff }
but in the console or in an alert to show the data passed I only get
[object Object]
and not the actual value.
I'm a bit green in the use of ES6 and React.
Use this it is working perfectly for me
<View>
<Picker
selectedValue={this.state.food}
onValueChange={(itemValue) => { this.cuisine(itemValue);}}>
<Picker.Item label="Italian" value="Italian" />
<Picker.Item label="Chinese" value="Chinese" />
<Picker.Item label="Cajun" value="Cajun" />
<Picker.Item label="KFC" value="KFC" />
</Picker>
<Text>{this.state.food}</Text>
</View>
and now in the cuisine function
cuisine = (itemValue: any) => {
this.setState({food: itemValue});
console.log(this.state.food);
}
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)
I'm using Native Base picker.
I want to close it manually but can't find API for this.
Component not contain any methods or props like visible.
How I can to close/hide picker?
In my case it's enough to use renderHeader function with backAction parameter
<Picker
renderHeader={backAction => (
<Button onPress={() => {
backAction();
someFunction();
}}
)}
/>
a): you could simply render it based on this.state.isPickerVisible, or b): wrap it in a Modal which has a visible prop
for closing the Picker, if you opt to wrap it in a Modal, then make the modal take up the whole screen and use Touchable without feedback to handle taps outside of the Picker: <TouchableWithoutFeedback onPress={() => this.cancelPressed()}> where cancel pressed toggles isPickerVisible
{this.state.isPickerVisible &&
<Picker
selectedValue={this.state.tempGender}
onValueChange={tempGender => this.setState({tempGender})}
>
<Picker.Item label="Female" value="female" />
<Picker.Item label="Male" value="male" />
<Picker.Item label="Other" value="other" />
</Picker>}
if you opt to wrap it in a Modal, then you can get some animation options
import {Modal, Picker ... etc...} from 'react-native'
<Modal
animationType="slide"
transparent={true}
visible={this.state.isPickerVisible}
>
<TouchableWithoutFeedback onPress={() => this.cancelPressed()}>
<View>
<Picker
selectedValue={this.state.tempGender}
onValueChange={tempGender => this.setState({tempGender})}
>
<Picker.Item label="Female" value="female" />
<Picker.Item label="Male" value="male" />
<Picker.Item label="Other" value="other" />
</Picker>
</View>
</TouchableWithoutFeedback>
</Modal>
i am trying to render a picker with dynamic data from api. but it is giving error
<Picker style={styles.pickerStyleClass}
enabled={true} mode="dropdown"
selectedValue={(this.state.selectedWeight) || "Status"} prompt="Transaction Type"
onValueChange={(itemValue, itemIndex) => this.PickerDataSelection(itemIndex, itemValue)}
itemStyle={{ color: Colors.textColor }}>
{stockQty.map((data) => { <Picker.Item label={data} value={data} /> })}
</Picker>
let stockQty = ["Test1","Test2"];
The only thing missing here that causes this error is return so replace the Picker.Item line to
{stockQty.map((data) => { return <Picker.Item label={data} value={data} /> })}
as nothing was being returned from the function and Picker is made in a way that you can't return anything other than Picker.Item with the required props. Even the following line gives the same error.
{ this.state.someCheck && <Picker.Item label='some' value='value' /> }
and key should also be added as prop in Picker.Item.
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'
I am encountering a weird behaviour when using Picker.
I use a Picker as follows :
<Picker
mode="dropdown"
style={styles.pickerField}
selectedValue={this.state.dayAndTime}
onValueChange={(text) => this.setState({ dayAndTime: text })}
>
<Picker.Item label="Le 5/07 à 15H" value="0" key="0" />
</Picker>
When the screen displaying this picker is loaded, I got an error screen saying (cf. screenshot below) : undefined is not an object (evaluating 'this.props.children[position].props)
From what I gathered, my problem come from line 106 of Libraries/Components/Picker/PickerAndroid.android.js, it seems that having a property "onValueChange" triggers it. I removed it, and error didn't happen.
I use react-native 0.31.0, I use an android api 23 virtual device with genymotion.
Is there something something I am doing wrong ?
The above solutions might be the one that might solve your query. One thing I would put light on is , correct way to import:
import {Picker} from '#react-native-community/picker';
Rather than
import Picker from '#react-native-community/picker';
There must be at least 2 items to pick from, for example:
<Picker.Item label="Le 5/07 à 15H" value="0" key="0" />
<Picker.Item label="Le 5/07 à 15H" value="1" key="1" />
Also for better syntax you can try:
onValueChange={(dayAndTime) => this.setState({ dayAndTime })}
import {Picker} from '#react-native-picker/picker';
<Picker
dropdownIconColor={colors.bColor}
selectedValue={formik.values.state}
onValueChange={value => changeValue('state', value)}>
<Picker.Item label={'Select State'} value="" />
{states ? states.map((item, index) => {
return (
<Picker.Item
key={index}
label={item.StateName}
value={item.StateName}
/>
);
}):null}
</Picker>
----------
If you return null when you don't have a array to render, It will solve the issue. But you need to provide that
"<Picker.Item label={'Select State'} value="" />" for blank selected value.
I had a similar issue but it was using an Item component + an array. And to fix it, I added an empty array as the default value to my dataSource prop Like that:
<Picker style={styles.picker} mode="dropdown" { ...props }>
<Picker.Item label="--- Select ---" value="" />
{
props.dataSource.map(({ label, value }) => (
<Picker.Item key={value} label={label} value={value} />
))
}
</Picker>
PickerWithLabel.defaultProps = {
dataSource: []
};