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>
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>
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}
child component
<View style={{flex:1}}>
<Picker
selectedValue={this.props.questions}
onValueChange={}//I do not know how to write here
// onValueChange={(value) => this.setState({questions1 :value})}
mode="dropdown"
style={{color:'#f00'}}
>
<Picker.Item label="1" value="1"/>
<Picker.Item label="2" value="2"/>
<Picker.Item label="3" value="3"/>
<Picker.Item label="4" value="4"/>
</Picker>
</View>
parent component
render() {
var items=[];
for (var i = 0; i < myData.length; i++) {
this.state["questions"+i]=1
items.push(
<SelectValue
questions={this.state['questions'+i]}>
</SelectValue>
)
}
return (
{items}
)
Now I don't know how to write the onValueChange={}.
I want the child component(picker) can be reused.
So when the picker's value change the parent state also change, that what I want
from parent component you can pass a function as a prop.
render() {
var items=[];
for (var i = 0; i < myData.length; i++) {
this.state["questions"+i]=1
items.push(
<SelectValue
onValueChange={(value) => this.setState({["questions"+i]:value})}
questions={this.state['questions'+i]}>
</SelectValue>
)
}
return ({items})
}
in child component
<View style={{flex:1}}>
<Picker
selectedValue={this.props.questions}
onValueChange={this.props.onValueChange}
mode="dropdown"
style={{color:'#f00'}}
>
<Picker.Item label="1" value="1"/>
<Picker.Item label="2" value="2"/>
<Picker.Item label="3" value="3"/>
<Picker.Item label="4" value="4"/>
</Picker>
</View>