this is my code for react-native picker.
I want to get all values for that json array which is selected.
I want to provide multiple select.
<Picker
mode="dropdown"
style={styles.droplist}
selectedValue={this.state.mode}
onValueChange={this.funcValueChanged}>
<Picker.Item label="Select Company" value="Select Company" />
{
this.state.data.map((item, key) => (
<Picker.Item
label={item.Co_Name + ' (' + item.CompCode + ')'}
value={key}
key={key}
/>
)))
}
</Picker>
You can use for single/multiple selection
import DropDownPicker from 'react-native-dropdown-picker';
<DropDownPicker
items={getAllStates}
searchable={true}
searchablePlaceholder="Search for an item"
searchablePlaceholderTextColor="gray"
placeholder="Select States"
placeholderTextColor={"grey"}
multiple={true}
multipleText="%d items have been selected."
containerStyle={{ marginTop: 8, marginBottom: 8, width:
"92%", alignSelf: "center", }}
onChangeItem={item => {
}
} />
The package used here is #react-native-picker/picker which does not support the multi-selected.
GitHub Issue
Use npm i react-native-multiple-select instead.
Related
I'm using the native base picker package for react-native.
I want to disable some items but, enable disable params don't work, all elements are still selectable.
I'm testing the app in ios. Here's my code
import { Picker } from 'native-base';
<Picker
iosHeader="VALUES"
mode="dropdown"
style={{ margin: 0, padding: 0 ,width:180,color:"#fff", justifyContent:"center",alignItems:"center" , textAlign:"center" }}
placeholder="Select one"
placeholderStyle={{ color: "#fff" }}
placeholderIconColor="#fff"
headerBackButtonText="Back"
headerStyle={{ backgroundColor: "#ff705a" }}
headerTitleStyle={{ color: "white" }}
headerBackButtonTextStyle={{ color: "white" }}
selectedValue={this.state.selectedVal}
onValueChange={(value) => this.onchange(value)}
textStyle={{ textAlign:"center" }}
textStyle={{color:"#fff"}}
>
<Picker.Item value='' label='Select' />
<Picker.Item label="SELECT ONE" value="34" />
</Picker>
The Picker component was officially replaced with Select in the update of v2 to v3 of NativeBase. Hope this still helps you! I wasnt able to get the Picker component to work on Expo Snack ¯_(ツ)_/¯
Below is an example I found in the docs. By adding the isDisabled prop to <Select.Item /> for C and Java. This prop prevents the ability to choose these options on iOS and Android. In my testing this did not work on Web.
<Select
selectedValue={value}
_selectedItem={{
bg: "red.600",
endIcon: <CheckIcon size={5} />,
}}
>
<Select.Item label="JavaScript" value="js" />
<Select.Item label="TypeScript" value="ts" />
<Select.Item label="C" value="c" isDisabled />
<Select.Item label="Python" value="py" />
<Select.Item label="Java" value="java" isDisabled />
</Select>
Full working code example in Snack here
I have created a signup form in react native with formik and yup.According to the documentation I have added the react native picker.
<Formik
initialValues={{ password: '', first_name: '', email: '', passwordConfirmation: '' }}
onSubmit={values => handleSubmit(values)}
validationSchema={registerSchema}
>
{({ handleChange, handleBlur, handleSubmit, values, touched, errors }) => (
<View>
<TextInput
style={styles.textInputTop}
onChangeText={handleChange('first_name')}
onBlur={handleBlur('first_name')}
value={values.first_name}
label="First Name"
mode="outlined"
/>
<Text style={styles.errorMsg}>{touched.first_name && errors.first_name}</Text>
//Other Fields I have not mentioned in the code
<View style={styles.pickerContainer}>
<Text style={styles.depText}>Department</Text>
<Picker
style={{ height: 50, width: 150 }}
onValueChange={(itemValue, itemIndex) => setdepartment(itemValue)}
mode={"dropdown"}
>
<Picker.Item label="Management" value="Management" />
<Picker.Item label="HR" value="HR" />
<Picker.Item label="Accounting" value="Accounting" />
<Picker.Item label="Sales" value="Sales" />
</Picker>
</View>
<Button style={styles.btn} mode="contained" onPress={handleSubmit}>
<Text style={{ color: "white" }}>Sign Up</Text>
</Button>
</View>
)}
</Formik>
I need to add formik and yup to the picker to make it a required field. How do I do it?
If it is not possible with formik and yup, then how I can make the picker required.
on the registerSchema make:
department: Yup.string().required('this field is required')
department will hold the selected value from the picker, you may change the type from string to array depending on the selected value.
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’m using ‘Native Base’ components for our product and going good with this,
but I’m stuck at one point and it is around putting Items in Nativebase Picker. My code is like this
Render Method code -
render(){
return (
<View style={{marginTop: 20, flexDirection:'row', flexWrap:'wrap', justifyContent:'space-around', alignItems:'center'}}>
<View style={{flex:1, justifyContent:'center', alignItems:'flex-end' }}>
<Button
style={{ backgroundColor: '#6FAF98', }}
onPress={this._showDateTimePicker}
>
<Text>Select Date</Text>
</Button>
</View>
<View style={{flex:1, justifyContent:'center', alignItems:'stretch'}}>
<Picker
style={{borderWidth: 1, borderColor: '#2ac', alignSelf:'stretch'}}
supportedOrientations={['portrait','landscape']}
iosHeader="Select one"
mode="dropdown"
selectedValue={this.state.leaveType}
onValueChange={(value)=>this.setState({leaveType:value,})
//this.onValueChange.bind(this)
}>
<Item label="Full Day" value="leave1" />
{
this.showStartDateFirstHalf() // Here I want to show this picker item on the basis of a condition
}
<Item label="2nd half" value="leave3" />
</Picker>
</View>
<DateTimePicker
isVisible={this.state.isStartDatePickerPickerVisible}
onConfirm={this._handleDatePicked}
onCancel={this._hideDateTimePicker}
mode='date'
/>
</View>
);
}
showStartDateFirstHalf()
{
if(!this.state.isMultipleDays)
{
return(
<Item label="1st Half" value="leave2" />
);
}
}
So, this code is working fine if this.state.isMultipleDays is false, But when this.state.isMultipleDays is true, it means when it is in else part then i'm getting this error -
Cannot read property 'props' of undefined
I think there's an easier answer to this. Instead of creating the separate showStartDateFirstHalf() function try this:
render() {
const pickerItems = [
{
label: 'Full Day',
value: 'leave1',
},
{
label: '1st Half',
value: 'leave2',
},
{
label: '2nd Half',
value: 'leave3',
},
];
const filteredItems = pickerItems.filter(item => {
if (item.value === 'leave2' && this.state.isMultipleDays) {
return false;
}
return true;
});
// The 'return' statement of your render function
return (
...
<Picker ...>
{(() =>
filteredItems.map(item =>
<Item label={item.label} value={item.value} />
)()}
</Picker>
...
);
}
That way, you already have a list of items that is determined before the return statement of the render cycle. Also the use of filter instead of map will not just give you null as the second item if the condition is not met, but will remove the item altogether.
How can I give fontSize to picker (android)? I tried to give but it's not working
<Picker
style={{fontSize:20}}
selectedValue={this.state.language}
onValueChange={(lang) => this.setState({language: lang})}>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
At the moment, you can't. This is what the official documentation says here
itemStyle itemStylePropType
Style to apply to each of the item labels.
But this only works on iOS
On Android, you'll have to wait for them to implement it (or maybe write a PR for them :))
This does the trick perfectly well. Just change the scale value.
const styles = StyleSheet.create ({
selectInput: {
transform: [
{ scaleX: 0.9 },
{ scaleY: 0.9 },
],
},
})
They didn't add support to change the font size that way. Here is a workaround that I don't like but it seems to be the only thing that works. Here is an example.
<Picker
mode="dropdown"
selectedValue="en"
style={{width: 110, height: 50}}
itemStyle={{height: 50, transform: [{ scaleX: 1 }, { scaleY: 1 }]}}>
<Picker.Item value="en" label="English" />
<Picker.Item value="es" label="Español" />
</Picker>
To anyone still searching,
Here's what I found:-
Enter the 'fontSize' style property individually to every picker.item.
<Picker.Item style={{fontSize:12}} label={'AnyValueLabel'} value={'AnyValueName'}/>
Normal for Android
{drinksArr.map((val, index) => (
<Picker.Item
style={{
fontSize: 30,
backgroundColor: Colors.Black,
}}
fontFamily="font_family"
color={Colors.Gold}
label={val.title}
value={val.title}
key={index}
/>
Under the documentation; all what i found is that:
itemTextStyle={{fontSize: 15}}
activeItemTextStyle={{fontSize: 18, fontWeight: 'bold'}}
Which works for me.