Select

The Select component is a customizable dropdown selector for React Native applications. It's built using the react-native-element-dropdown library and includes features like search functionality, custom styling, and error handling.

Props

Prop	Type	Default	Description
label	string	-	The label text for the select component
leftIconName	string	-	Name of the icon to display on the left side of the select box
name	string	-	Identifier for the select component
placeholder	string	-	Placeholder text when no option is selected
options	array	[]	Array of objects containing the dropdown options
onChange	function	() => {}	Callback function triggered when an option is selected
value	string	-	The currently selected value
helperText	string	-	Additional text displayed below the select box
error	string	-	Error message to display below the select box
style	object	-	Custom styles for the container view
selectBoxStyle	object	-	Custom styles for the select box

Usage

import { Select } from "@appmaker-xyz/ui";

const MyComponent = () => {
  const [selectedValue, setSelectedValue] = useState("");
  const options = [
    { label: "Option 1", value: "option1" },
    { label: "Option 2", value: "option2" },
  ];

  return (
    <Select
      label="My Select"
      leftIconName="chevron-down"
      name="mySelect"
      placeholder="Choose an option"
      options={options}
      onChange={setSelectedValue}
      value={selectedValue}
      helperText="Please select an option"
    />
  );
};

Features

1. Search Functionality: Users can search through the options.
2. Custom Styling: Supports custom styles for various parts of the component.
3. Icon Support: Displays a customizable icon on the left side of the select box.
4. Error Handling: Can display error messages when needed.
5. Helper Text: Provides additional context or instructions below the select box.

Styling

The component uses a combination of inline styles and a StyleSheet object for styling. Key style properties include:

• Container styling
• Dropdown box styling
• Text styling for placeholder and selected text
• Icon styling

You can further customize the appearance by passing custom styles through the style and selectBoxStyle props.

Dependencies

This component relies on the following libraries:

• react-native-element-dropdown
• react-native-vector-icons/Feather

Ensure these dependencies are properly installed and linked in your project.