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})}
/>
`
Related
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}
I'm using Native Base picker.
I want to close it manually but can't find API for this.
Component not contain any methods or props like visible.
How I can to close/hide picker?
In my case it's enough to use renderHeader function with backAction parameter
<Picker
renderHeader={backAction => (
<Button onPress={() => {
backAction();
someFunction();
}}
)}
/>
a): you could simply render it based on this.state.isPickerVisible, or b): wrap it in a Modal which has a visible prop
for closing the Picker, if you opt to wrap it in a Modal, then make the modal take up the whole screen and use Touchable without feedback to handle taps outside of the Picker: <TouchableWithoutFeedback onPress={() => this.cancelPressed()}> where cancel pressed toggles isPickerVisible
{this.state.isPickerVisible &&
<Picker
selectedValue={this.state.tempGender}
onValueChange={tempGender => this.setState({tempGender})}
>
<Picker.Item label="Female" value="female" />
<Picker.Item label="Male" value="male" />
<Picker.Item label="Other" value="other" />
</Picker>}
if you opt to wrap it in a Modal, then you can get some animation options
import {Modal, Picker ... etc...} from 'react-native'
<Modal
animationType="slide"
transparent={true}
visible={this.state.isPickerVisible}
>
<TouchableWithoutFeedback onPress={() => this.cancelPressed()}>
<View>
<Picker
selectedValue={this.state.tempGender}
onValueChange={tempGender => this.setState({tempGender})}
>
<Picker.Item label="Female" value="female" />
<Picker.Item label="Male" value="male" />
<Picker.Item label="Other" value="other" />
</Picker>
</View>
</TouchableWithoutFeedback>
</Modal>
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>