I just started using Detox to test my react native app and I'm having some trouble to test Pickers. I basically need to be able to choose a value from a Picker! But it seems impossible!!
Here is my Picker:
<Picker
style={styles.picker}
itemStyle={styles.pickerItem}
testID="picker"
selectedValue={selectedValue}
onValueChange={this.updateValue}
>
<Picker.Item key={0} label="Choose one" value={null} />
{values.map(value => {
return (
<Picker.Item
key={value}
label={value}
value={value}
testID={value}
/>
);
})}
</Picker>
And here is my test:
await element(by.type("UIPickerView")).setColumnToValue(0, "Apple");
But all I get is an error message saying it was not possible to set the value because it doesn't exist, but it does! Cause I'm looking at it right now!
Does anyone knows the right way to set a value in a Picker?
Any help would be great!
Related
I am currently making a mobile app and part of it is collecting user data. At the minute I am stuck on getting the DatePicker to show on screen once the text field has been clicked on. I have tried to use the onFocus prop but it does not seem to be working and its not throwing any errors in the console. Here is the code that i have tried using:
const showDatePicker = () => {
return(
<DateTimePicker
value={date}
mode='date'
is24Hour={true}
display="spinner"
onChange={onChange}
/>
)
}
<View style={styles.inputContainer}>
<FontAwesome name="user-circle-o" color={'#808080'} size={20}/>
<TextInput onFocus={() => showDatePicker()} style={styles.input} placeholder="Date Of Birth"
/>
</View>
To give some additional context to the problem I am using a modal which acts as a form for collecting the data. Any help or tips appreciated.
You can wrap the TextInput with a <Pressable />.
<Pressable onPress={() => showDatePicker()}>
<TextInput />
</Pressable>
I'm using Native base's Picker component and rendering using .map:
Tried everything the Internet has suggested!! Didn't get it fixed yet
<Item rounded style={{marginBottom:20}}>
<Picker selectedValue={this.state.district} onValueChange={(val)=>this.setDistrict(val)}>
<Picker.Item label='Select District' value='0'/>
{this.state.districtsList.map((item,index) => {
return (<Picker.Item label={item.name} value={item.id} key={index+1}/>) //if you have a bunch of keys value pair
})}
</Picker>
Experiencing the same thing!
You can use like this:
<SafeAreaView> Your code block </SafeAreaView>
I'm trying to display a dropdown menu in a React Native android app. I used React Native Picker for the purpose, and it seems very limited in styling and positioning the dropdown menu. I cannot get the menu to pop up below the carret (the down arrow button) position.
I tried setting the margin with hope to push the menu down, to no avail.
<Picker
// selectedValue={stateValue}
style={{
height: 36,
width: 261,
}}
onValueChange={itemValue => {
console.log('item value ', itemValue);
}}
>
<Picker.Item key={-1} label={'Search By...'} value="first" />
{this.searchCategory.map((item, index) => (
<Picker.Item key={index} label={item} value={item} />
))}
</Picker>
</View>
The menu always covers the Picker component. I want it to appear below the Picker.
Actual behavior:
Expected behavior:
After some research, this is an Android limitation and it seems there's little we can do with React Native Picker. Some custom packages may give us more control such as https://www.npmjs.com/package/react-native-picker-select, or https://github.com/sohobloo/react-native-modal-dropdown.
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);
}
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: []
};