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}
Related
im using react-native-material as my ui framwork for my application, but while using the Component i added a label , it worked jst fine but when i enter the text and click out of the textinput box the label appear in front of the text that i entred, and i didnt find how to solve that.
so i need help in that please .
the image of the problem
`
<ScrollView>
<AppHeader />
<SafeAreaView style={styles.container}>
<TextInput
variant="outlined"
style={{margin: 16}}
placeholder="Enter Your Text Here"
label="Input"
onChangeText={val => {
this.setState({textvalue: val});
this.setState({isHidden: false});
}}
/>
<Picker
selectedValue={this.state.size}
onValueChange={size => this.setState({size: size})}>
<Picker.Item label="100" value={100} />
<Picker.Item label="200" value={200} />
<Picker.Item label="300" value={300} />
<Picker.Item label="400" value={400} />
<Picker.Item label="500" value={500} />
<Picker.Item label="600" value={600} />
</Picker>
<Button
title="Submmit"
style={styles.button}
onPress={() => this.setState({isHidden: true})}
/>
`
the following code doesn't give me desired result
<View style={styles.sectionContainer}>
<Text>Crash type</Text>
<Picker
selectedValue={this.state.crash_type}
style={{borderBottomWidth:1, borderBottomColor: '#cc0000'}}
onValueChange={(itemValue, itemIndex) =>
this.setState({crash_type: itemValue})
}>
<Picker.Item label="select..." value="" />
<Picker.Item label="Mogok" value="mogok" />
<Picker.Item label="Kecelakaan" value="keelakaan" />
<Picker.Item label="Lainnya" value="lainnya" />
</Picker>
</View>
basically I want to have a picker with a thin underline. the style is just works fine in another input type.
please advice, any help would be appreciated. thanks a lot.
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>
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>
I create a react native app for iOS and I want to place a load button below a picker. Currently I get the following output at the simulator.
Does anybody know how to place the button below the picker? I would really be obliged if anyone who is experienced with react-native can help.
My code is the following:
import React, { Component } from 'react';
import { View, Text, Button, StyleSheet, ScrollView, Picker} from 'react-native';
export class LayerSelection extends Component {
loadLayer = () => {
}
constructor(props){
super(props);
this.state = {
layer: ''
};
}
static navigationOptions =
{
title: 'Layer Selection',
};
render() {
return (
<View style={styles.container}>
<Picker
selectedValue={this.state.layer}
itemStyle = {{fontSize: 15}}
style={{ height: 50, width: 400}}
onValueChange={(itemValue, itemIndex) => this.setState({layer: itemValue})}>
<Picker.Item label="Fires" value="fires" />
<Picker.Item label="Fire Risk 24" value="fireRisk24" />
<Picker.Item label="Fire Risk 48" value="fireRisk48" />
<Picker.Item label="Fire Risk 72" value="fireRisk72" />
<Picker.Item label="Snow Cover" value="snowCover" />
<Picker.Item label="Earthquakes" value="earthquakes" />
<Picker.Item label="Land Surface Temperature" value="lst" />
<Picker.Item label="Leaf Area Index" value="lai" />
<Picker.Item label="Fraction Vegetation Cover" value="fvc" />
<Picker.Item label="Absorbed Photosynthetical Active Radiation" value="fapar" />
<Picker.Item label="Landslides" value="landslides" />
<Picker.Item label="Lightnings" value="lightnings" />
<Picker.Item label="Ozone" value="ozone" />
<Picker.Item label="Evapotranspiration" value="et" />
<Picker.Item label="Albedo" value="albedo" />
<Picker.Item label="SO2" value="so2" />
<Picker.Item label="NO2" value="no2" />
<Picker.Item label="HCHO" value="hcho" />
</Picker>
<Button title="Load" onPress={this.loadLayer} style={styles.buttonStyle} />
</View>
);
}
}
export default LayerSelection;
const styles = StyleSheet.create({
container: {
flex:1,
backgroundColor: '#fff',
},
buttonStyle:{
alignSelf:'center'
}
});
I just removed your styles on the Picker, you may want to check that. This seems to work:
<View style={styles.container}>
<Picker
selectedValue={this.state.layer}
itemStyle = {{fontSize: 15}}
onValueChange={(itemValue, itemIndex) => this.setState({layer: itemValue})}>
<Picker.Item label="Fires" value="fires" />
<Picker.Item label="Fire Risk 24" value="fireRisk24" />
<Picker.Item label="Fire Risk 48" value="fireRisk48" />
<Picker.Item label="Fire Risk 72" value="fireRisk72" />
<Picker.Item label="Snow Cover" value="snowCover" />
<Picker.Item label="Earthquakes" value="earthquakes" />
<Picker.Item label="Land Surface Temperature" value="lst" />
<Picker.Item label="Leaf Area Index" value="lai" />
<Picker.Item label="Fraction Vegetation Cover" value="fvc" />
<Picker.Item label="Absorbed Photosynthetical Active Radiation" value="fapar" />
<Picker.Item label="Landslides" value="landslides" />
<Picker.Item label="Lightnings" value="lightnings" />
<Picker.Item label="Ozone" value="ozone" />
<Picker.Item label="Evapotranspiration" value="et" />
<Picker.Item label="Albedo" value="albedo" />
<Picker.Item label="SO2" value="so2" />
<Picker.Item label="NO2" value="no2" />
<Picker.Item label="HCHO" value="hcho" />
</Picker>
<Button title="Load" onPress={this.loadLayer} style={styles.buttonStyle} />
</View>