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
Related
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.
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.
I'm trying to use the Picker component and it shows perfectly fine in iOS but nothing in Android. I've checked the comments on react native picker is not showing in android however setting the {width: 100} and {flex: 1} doesn't seem to solve the problem.
Update: The Picker is there, works when I tap on the area it's on, just not visible.
I'm using Expo to run the test builds on my iphone and android. No problem on iphone. Just android... Galaxy S8 v7.0 Nougat
Here's my code:
import React from 'react';
import {
StyleSheet,
Text,
View,
Picker,
} from 'react-native';
export default class Home extends React.Component {
constructor(props){
super(props);
this.state = {
selectedValue: 'Orange'
}
}
render() {
return (
<View style={styles.container}>
<Picker
style={styles.picker}
selectedValue={this.state.selectedValue}
onValueChange={(value) => {this.setState({selectedValue: value})}}
itemStyle={styles.pickerItem}
>
<Picker.Item label="Apple" value="Apple" />
<Picker.Item label="Orange" value="Orange" />
<Picker.Item label="Banana" value="Banana" />
<Picker.Item label="Kiwi" value="Kiwi" />
</Picker>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
justifyContent: 'center',
},
picker: {
flex: 1,
},
pickerItem: {
color: '#333333'
},
});
Try To add height and width for Picker. Try Following
<Picker
style={{height:30, width:100}}
selectedValue={this.state.selectedValue}
onValueChange={(value) => {this.setState({selectedValue: value})}}
itemStyle={styles.pickerItem}>
<Picker.Item label="Apple" value="Apple" />
<Picker.Item label="Orange" value="Orange" />
<Picker.Item label="Banana" value="Banana" />
<Picker.Item label="Kiwi" value="Kiwi" />
</Picker>
Found the problem, I exported the module and imported it in my main app.js file and in there I wrapped the module in a container with alignItems: 'center'. Apparently this causes the picker to not show. See this https://github.com/facebook/react-native/issues/6110
I had the same problem and the cause was that I had set alignItems: 'center' to the parent view. This is what I wanted though so I didn't remove it. Instead I solved it by giving the picker a width of 100%.
<View style={{alignItems: "center"}}>
<Picker style={{width:"100%"}} mode="dropdown">
<Picker.Item />
</Picker>
</View>
as the image can show it , my app shows a line at the top of my Footer and at the bottom of my Header. Its seems a common thing in Native Base. I have checked out the native-base theme but I can´t find some to fix this error.
Code:
import React, { Component } from 'react';
import { Container, Content, Footer, FooterTab, Button, Icon, Text, Header, Title, Left, Right, Body, } from 'native-base';
export default class FooterTabsExample extends Component {
render() {
return (
<Container>
<Header>
<Left>
<Button transparent>
<Icon name='arrow-back' />
</Button>
</Left>
<Body>
<Title>Header</Title>
</Body>
<Right>
<Button transparent>
<Icon name='menu' />
</Button>
</Right>
</Header>
<Content style={{backgroundColor:'black'}}/>
<Footer >
<FooterTab>
<Button>
<Icon name="apps" />
<Text>Apps</Text>
</Button>
<Button>
<Icon name="camera" />
<Text>Camera</Text>
</Button>
<Button active>
<Icon active name="navigate" />
<Text>Navigate</Text>
</Button>
<Button>
<Icon name="person" />
<Text>Contact</Text>
</Button>
</FooterTab>
</Footer>
</Container>
);
}
}
Just override the borderBottomWidth for Header and borderTopWidth for Footer:
<Header style={{borderBottomWidth: 0}}>
...
</Header>
...
<Footer style={{borderTopWidth: 0}}>
...
</Footer>
<Header style={{borderBottomWidth: 0, shadowOffset: {height: 0, width: 0},
shadowOpacity: 0, elevation: 0}}>
This worked for me. If you're using Android you must add elevation: 0.
You just need to set border color which you are using in the header or footer background.
<Header style={{
backgroundColor:'#141414',
borderColor: "#141414",
}}></Header>
The top answer doesn't work for android as you also need: elevation:0
So #ap003's answer is more complete.
This worked for me for footer on android:
<Footer style = {{borderTopWidth: 0, elevation: 0,}} />
You can use the same logic for header (replace borderTopWidth with borderBottomWidth)
...
Sorry for separate comment as I'm unable to comment on existing posts (new user huhu).
Just use following style to remove bottom border line.
<Header style = {{elevation: 0}} />
For React Navigation v5 add shadowColor: 'transparent' in 'headerStyle' in the options props.
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.