Reputation: 19
I have a React Native Picker (dropdown menu) in my app. The dropdown won't work when I click on it in my Android simulator / emulator; nothing happens. Also, in the Android simulator / emulator, the styling is not working (the border does not show).
When I try clicking the dropdown in my Web browser simulator / emulator, it DOES work as intended. Also, the styling in the Web simulator / emulator is correct for the dropdown, but the styling for everything else on the Web browser simulator / emulator is messed up.
Here is my code:
import React, { useState } from "react";
import { StyleSheet, Picker, View } from "react-native";
const AppointmentPicker = (props) => {
console.log(props.placeholder);
const [selectedValue, setSelectedValue] = useState("Location (required)");
return (
<Picker
style={styles.defaultPicker}
selectedValue={selectedValue}
onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
>
<Picker.Item label="Location (required)" value="no-location" />
<Picker.Item label="Dothan" value="dothan" />
<Picker.Item label="Dothan Subspecialty" value="dothan-subspecialty" />
<Picker.Item label="Enterprise" value="enterprise" />
<Picker.Item label="Eufaula" value="eufaula" />
<Picker.Item label="Ozark" value="ozark" />
</Picker>
);
};
const styles = StyleSheet.create({
defaultPicker: {
width: "100%",
height: 50,
borderWidth: 1,
borderRadius: 5,
borderColor: "#DDDDDD",
marginBottom: 20,
paddingLeft: 15,
},
});
export default AppointmentPicker;
Is my code correct? Is it a problem with my code or is the Android Emulator not working properly?
I'm using the Android Studio simulator / emulator. I'm also using Expo.
Upvotes: 2
Views: 7172
Reputation: 84
I guess you need to put the picker on a View container or a backgroundView
<View style={flex:1, padding: 0, margin: 0}>
<Picker
style={styles.defaultPicker}
selectedValue={selectedValue}
onValueChange={(itemValue, itemIndex) =>
setSelectedValue(itemValue)}
>
<Picker.Item label="Location (required)" value="no-
location"/>
<Picker.Item label="Dothan" value="dothan" />
<Picker.Item label="Dothan Subspecialty" value="dothan-
subspecialty" />
<Picker.Item label="Enterprise" value="enterprise" />
<Picker.Item label="Eufaula" value="eufaula" />
<Picker.Item label="Ozark" value="ozark" />
</Picker>
</View>
If this doesn't work maybe try taking out the height on your styles Or you could try to use the picker from https://github.com/react-native-community/react-native-picker
Upvotes: 3