the font family for react native picker is not working
<Picker itemStyle={{backgroundColor: "red",fontFamily:'ArbFONTS-GE_SS_TEXT_LIGHT',}} >
<Picker.Item fontFamily="ArbFONTS-GE_SS_TEXT_LIGHT" label={I18n.translate("reclamation_sujet")} value={I18n.translate("reclamation_sujet")} />
<Picker.Item label={I18n.translate("reclamation_sujet")} value={I18n.translate("reclamation_sujet")} />
</Picker>
Related
i want to add picker on image when i click on it open picker with two button when i select anyone desire screen open please help me with this
here is the code i want to replace picker with touchableopacity
<TouchableOpacity
onPress={() => this.cameraUpload()}
style={styles.buttonStyle}
>
<Image
style={styles.buttonImageStyle}
source={require("../../../android/app/src/main/assets/images/uploadImage.png")}
/>
</TouchableOpacity>
You can leave the value of the picker as a status value and replace the image with a corresponding change.
<Picker
style={styles.picker} itemStyle={styles.pickerItem}
selectedValue={this.state.image}
onValueChange={(itemValue) => this.setState({image: itemValue})}
>
<Picker.Item label="image1" value="../../../android/app/src/main/assets/images/uploadImage.png" />
<Picker.Item label="image2" value="../../../android/app/src/main/assets/images/uploadImage2.png" />
<Picker.Item label="image3" value="../../../android/app/src/main/assets/images/uploadImage3.png" />
<Picker.Item label="image4" value="../../../android/app/src/main/assets/images/uploadImage4.png" />
</Picker>
...
<Image
style={styles.buttonImageStyle}
source={require(this.state.image)}
/>
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>
Hi I want to set a custom font I downloaded to the react-native Picker component.
Any idea or solution how to achieve this?
React Native currently doesn't support much styling for Picker component. You can use the itemStyle prop for styling the items on IOS, but it's not supported on Android yet. You can also change the color of the items with the color prop.
<Picker
itemStyle={ style.items } // works only on IOS
selectedValue={this.state.language}
onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
<Picker.Item color='#000' label="something" value="something" />
<Picker.Item color='#000' label="something" value="something" />
</Picker>