Overview

Native Element Dropdown

Easily create a customizable dropdown menu with various features like fetching data from lists, dynamic logos(SVG Images), animations, and search functionality. This widget simplifies the creation of dropdown menus in native applications, ensuring a consistent and responsive design across different devices.

Why?

Creating a flexible and responsive dropdown menu can be challenging, especially when you need to support various screen sizes and include additional features like logos(SVG Image) and search functionality. This widget aims to address these challenges by providing a simple yet powerful solution for creating dropdown menus.

Features

The Native Dropdown widget offers a range of features to enhance the user experience and simplify the design process:

• Responsive Design: Adjusts to different screen sizes and orientations, ensuring a consistent appearance.
• Customizable Logos: Easily add left and right logos to the dropdown using SVG images.
• Placeholder Text: Set placeholder text for both the dropdown and the search bar to guide users.
• Label Animation: Enable smooth animations for dropdown labels to enhance visual appeal.
• Search Functionality: Allow users to search through dropdown options for quick selection.
• Auto Scroll: Automatically scroll through options for better usability.

Limitations

This widget is designed for dropdown content that can be consistently sized across different devices. It may not be suitable for highly variable content sizes.

Installation

Place the widget on the desired page. Configure the properties according to your needs, including data source, logos, and other display options. Use visibility expressions to display dropdown items as required conditionally.

!!!Important - Use SVG Image 

Configuration

• Selected Value: An attribute to store the selected value of the dropdown.
• Render Right Logo: Option to display a logo on the right side of the dropdown.
• Right Logo: The SVG image to use as the right logo.
• Render Left Logo: Option to display a logo on the left side of the dropdown.
• Left Logo: The SVG image to use as the left logo.
• Placeholder: Placeholder text for the dropdown.
• Search Placeholder: Placeholder text for the search bar.
• Enable Label Animation: Option to enable animations for dropdown labels.
• Enable Search Option: Option to enable search functionality within the dropdown.
• Enable Auto Scroll: Option to enable automatic scrolling of dropdown options.
• Data Source: Defines the data source for the dropdown options.
• Label: The label to be displayed for each dropdown option.
• Value: The value associated with each label in the dropdown.
• On Data Select: An action to perform when an option is selected from the dropdown.

Styling

By default, the widget will apply the following styles:

const defaultStyle = { container:{ backgroundColor: "white", padding: 16 }, dropdown: { height: 50, borderColor: "gray", borderWidth: 0.5, borderRadius: 8, paddingHorizontal: 8 }, placeholderStyle: { fontSize: 16, marginLeft: 5 }, selectedTextStyle: { fontSize: 16, marginLeft: 5 }, inputSearchStyle: { height: 40, fontSize: 16 } };

To customize the styling, you can create these classes in your native theme and override this default styles but calling the style header in appearance class tab.

Documentation

Typical usage scenario

The Native Element Dropdown widget is ideal for applications that require a flexible and responsive dropdown menu. It addresses common challenges in creating dropdown menus, such as supporting various screen sizes and incorporating features like logos (SVG images) and search functionality. This widget simplifies the process of developing dropdown menus, ensuring a consistent and appealing user interface across different devices. It is particularly useful in applications where users need to make selections from a list of options, such as forms, settings, and filters.

Features and limitations

Features:

• Responsive Design: Adjusts to different screen sizes and orientations, ensuring a consistent appearance.
• Customizable Logos: Easily add left and right logos to the dropdown using SVG images.
• Placeholder Text: Set placeholder text for both the dropdown and the search bar to guide users.
• Label Animation: Enable smooth animations for dropdown labels to enhance visual appeal.
• Search Functionality: Allow users to search through dropdown options for quick selection.
• Auto Scroll: Automatically scroll through options for better usability.

Limitations:

• This widget is designed for dropdown content that can be consistently sized across different devices. It may not be suitable for highly variable content sizes.
• Use the SVG widget if any other extension is used it will throw error

Dependencies

• react-native-element-dropdown: ^2.12.1
• react-native-svg: ^12.1.0

Installation

• Add the Widget: Place the widget on the desired page in your application.
• Configure Properties: Set up the properties according to your needs, including the data source, logos, and display options.
• Package Dependency: Make sure to install the necessary dependencies in the template to build the dev app.

Configuration [optional]

• Selected Value: Specify an attribute to store the selected value of the dropdown.
• Render Right Logo: Choose whether to display a logo on the right side of the dropdown.
• Right Logo: Provide the SVG image to use as the right logo.
• Render Left Logo: Choose whether to display a logo on the left side of the dropdown.
• Left Logo: Provide the SVG image to use as the left logo.
• Placeholder: Set placeholder text for the dropdown.
• Search Placeholder: Set placeholder text for the search bar.
• Enable Label Animation: Enable or disable animations for dropdown labels.
• Enable Search Option: Enable or disable search functionality within the dropdown.
• Enable Auto Scroll: Enable or disable automatic scrolling of dropdown options.
• Data Source: Define the data source for the dropdown options.
• Label: Specify the label to be displayed for each dropdown option.
• Value: Define the value associated with each label in the dropdown.
• On Data Select: Specify an action to perform when an option is selected from the dropdown.

Known bugs [optional]

• No Bugs