@react-native-picker/picker is not displaying any of the options and changing the css. Not sure why

I have a react native component. I am trying to implement a picker with options so that the user can select one of a handful of different options. I set it up and when I loaded the application… it did not display any options but it shows that there is some type of picker there. I have no idea what is happening with picker and can not figure out why no options are showing.

Do I have to individually write each of the options out?

I tried that and did not get any difference in display

code:

          <View style={styles.detailRow}>
            <View>
              <Text style={styles.detailSection}>Price Min: </Text>
            </View>
            <Picker 
              selectedValue={priceMin}
              onValueChange={(value) => setPriceMin(value)}
            >
              {
                propertyPricing.map((item) => {
                  return(
                    <Picker.Item label={item.label} value={item.value} />
                  )
                })
              }
            </Picker>
          </View>
          <View style={styles.detailRow}>
            <View>
              <Text style={styles.detailSection}>Price Max: </Text>
            </View>
            <Picker 
              selectedValue={priceMax}
              onValueChange={(value) => setPriceMax(value)}
            >
              {
                propertyPricing.map((item) => {
                  return(
                    <Picker.Item label={item.label} value={item.value} />
                  )
                })
              }
            </Picker>
          </View>
          <View style={styles.detailRow}>
            <View>
              <Text style={styles.detailSection}>Max Hoa: </Text>
            </View>
            <Picker 
              selectedValue={maxHoa}
              onValueChange={(value) => setMaxHoa(value)}
            >
              {
                hoaAmounts.map((item) => {
                  return(
                    <Picker.Item label={item.label} value={item.value} />
                  )
                })
              }
            </Picker>
          </View>
          <View style={styles.detailRow}>
            <View>
              <Text style={styles.detailSection}>Sqft Min: </Text>
            </View>
            <Picker 
              selectedValue={sqftMin}
              onValueChange={(value) => setSqftMin(value)}
            >
              {
                sqftOptions.map((item) => {
                  return(
                    <Picker.Item label={item.label} value={item.value} />
                  )
                })
              }
            </Picker>
          </View>
          <View style={styles.detailRow}>
            <View>
              <Text style={styles.detailSection}>Sqft Max: </Text>
            </View>
            <Picker 
              selectedValue={sqftMax}
              onValueChange={(value) => setSqftMax(value)}
            >
              {
                sqftOptions.map((item) => {
                  return(
                    <Picker.Item label={item.label} value={item.value} />
                  )
                })
              }
            </Picker>
          </View>

>Solution :

You need to make sure that you have given enough height, width, and color to your picker and its items, otherwise they might not be visible.

<Picker
  style={{ height: 50, width: 150 }}
  itemStyle={{ color: "black" }}
  selectedValue={priceMin}
  onValueChange={(value) => setPriceMin(value)}
>
  {propertyPricing.map((item) => {
    return (<Picker.Item label={item.label} value={item.value} />)
  })}
</Picker>