CODEWITHSUNDEEP
androidreactjsreact-nativeandroid-studioexpo
user13989216
user13989216

Reputation: 19

Why is the React Native Picker not working in my Android emulator?

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

Answers (1)

Roberto C Dl Garza
Roberto C Dl Garza

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

Related Questions