hoaphantn7604 / react-native-element-dropdown

A react-native dropdown component easy to customize for both iOS and Android.
MIT License
951 stars 165 forks source link

Label like in elements-input field #221

Open xstable opened 11 months ago

xstable commented 11 months ago

Is it possible to have an Label like the Input-Fields have in rn-elements? (see blue rectangle):

image

That would be awesome. In my case I try to use the dropdown for the year of birth. But if the year is selected, the user don't have a chance to see, what the selected number is. It's better for u good UX to always see, which values are shown in the screen. I've seen that you already have something like a Fieldset label:

image

But this currently break my UX/UI guideline. I need to have it in same way as the input-field.

xstable commented 11 months ago

Played a bit around and got it to work like that:

import React, { useState } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { Dropdown } from 'react-native-element-dropdown';
import PropTypes from 'prop-types';

let data = [];

const GeneralDropdown = ({
  data,
  placeholder = 'Please select',
  searchPlaceholder = 'Search...',
}) => {
  const [value, setValue] = useState(null);
  const [isFocus, setIsFocus] = useState(false);

  const renderLabel = () => (
    <Text style={[styles.dropdownLabel]}>Dropdown label</Text>
  );

  return (
    <View>
      {renderLabel()}
      <Dropdown
        style={styles.dropdown}
        placeholderStyle={styles.placeholderStyle}
        selectedTextStyle={styles.selectedTextStyle}
        inputSearchStyle={styles.inputSearchStyle}
        iconStyle={styles.iconStyle}
        data={data}
        search
        maxHeight={300}
        labelField="label"
        valueField="value"
        placeholder={placeholder}
        searchPlaceholder={searchPlaceholder}
        value={value}
        onChange={(item) => {
          setValue(item.value);
        }}
      />
    </View>
  );
};

export default GeneralDropdown;

const styles = StyleSheet.create({
  dropdown: {
/*    marginLeft: 5,
    height: 50,
    borderBottomColor: '#86939e',
    borderBottomWidth: 1.25,*/
  },
  dropdownLabel: {
 /*   fontSize: 16,
    fontWeight: 'bold',
    color: '#86939e',
    marginLeft: 5,*/
  },
  placeholderStyle: {
    fontSize: 16,
  },
  selectedTextStyle: {
    fontSize: 16,
  },
  iconStyle: {
    width: 20,
    height: 20,
  },
  inputSearchStyle: {
    height: 40,
    fontSize: 16,
  },
});

GeneralDropdown.propTypes = {
  data: PropTypes.arrayOf(PropTypes.object).isRequired,
  placeholder: PropTypes.string,
  searchPlaceholder: PropTypes.string,
};

Only thing that I wonder about is, how to get the general Color & Sizes (e.g. for Border, font, etc.) which react-native-elements has in the App? In my case, if I remove all the styling from the Dropbox it looks like this (I've commented it out in the above code but you can still see it): image

Is there a way to inherit the general Style from the elements-input-component to the dropbox? I don't like setting a hard-coded color in my component.