How to customize row rendering in react-native-modal-dropdown?

Use the renderRow prop to implement a custom function that returns a React element for each option. The README's customization section explains this, allowing full control over row design and behavior.

react-native-modal-dropdown vs react-native-picker: which is better?

react-native-modal-dropdown offers more customization and programmatic control, while react-native-picker is often simpler for basic selection. Choose based on whether you need advanced styling and API methods versus a straightforward picker.

Can I use react-native-modal-dropdown with async data?

Yes, the component displays a loading indicator if options are null or undefined, making it suitable for async data. Update the options prop when data is fetched to refresh the dropdown list.

How to programmatically show or hide the dropdown?

Call the show() or hide() methods on the component reference, as detailed in the API section. These methods allow control without user interaction, useful for dynamic UI flows.

Is react-native-modal-dropdown accessible for screen readers?

It has an accessible prop set to true by default, but for comprehensive accessibility, you may need to customize renderRow and ensure proper labels, as the basic implementation might not cover all a11y nuances.

Does react-native-modal-dropdown support multi-select?

No, it does not support multi-select out of the box. The onSelect callback handles single selections, so for multi-select, you'd need to implement a custom solution or seek alternatives.

Open-Awesome

react-native-modal-dropdown

MITJavaScriptv0.6.2

A customizable, cross-platform dropdown/picker/icker/selector component for React Native apps.

GitHub

1.2k stars467 forks0 contributors

What is react-native-modal-dropdown?

react-native-modal-dropdown is a React Native component that provides a customizable dropdown, picker, or selector interface for mobile applications. It solves the problem of inconsistent or limited built-in pickers by offering a unified, flexible selection component that works across both Android and iOS platforms with auto-positioning to avoid screen clipping.

Target Audience

React Native developers building mobile apps that require consistent, stylable dropdown menus or selection interfaces, particularly those needing more customization than standard picker components offer.

Value Proposition

Developers choose this over alternatives because it offers extensive programmatic control and customization—including custom row rendering, styling, and trigger modes—while providing reliable cross-platform compatibility and auto-positioning out of the box with minimal setup.

Overview

A react-native dropdown/picker/selector component for both Android & iOS.

Use Cases

Best For

Building React Native apps that need a consistent dropdown/picker UI across Android and iOS.
Implementing highly customizable selection interfaces with custom row designs and separators.
Creating dropdowns that automatically adjust position to avoid screen edges and clipping.
Adding programmatically controlled dropdowns (show/hide/select) via API methods.
Wrapping any custom component (like icons or complex layouts) to act as a dropdown trigger.
Quickly integrating a dropdown with zero configuration and a loading indicator for async data.

Not Ideal For

Apps requiring multi-select dropdown capabilities
Projects needing built-in search or filtering within dropdowns
Teams using design systems that demand pre-styled, out-of-the-box components without custom styling work

Pros & Cons

Pros

Cross-Platform Consistency

Works seamlessly on both Android and iOS with a unified API, ensuring consistent UI across platforms without platform-specific code, as stated in the features section.

Intelligent Auto-Positioning

Automatically adjusts dropdown placement to avoid screen edges and clipping, eliminating manual positioning hassles, which is highlighted as a key feature in the README.

Extensive Customization Options

Supports custom styling, row rendering via renderRow, and separators with renderSeparator, allowing deep visual and functional tailoring to fit diverse UI requirements.

Programmatic API Control

Offers methods like show(), hide(), and select(idx) for direct manipulation, enabling dynamic interactions without user input, as detailed in the API section.

Cons

Missing Advanced Features

Lacks built-in support for common needs like multi-select or search functionality, requiring additional custom implementation that isn't covered in the README.

Potential Maintenance Concerns

Last significant update was for React Native 0.60, and with no recent activity mentioned, compatibility with newer RN versions could be uncertain or untested.

Steeper Setup for Customization

While zero-config for basic use, advanced customizations like adjustFrame callback and render functions demand more code and understanding, increasing initial complexity.

Frequently Asked Questions

Related Projects

react-native-vector-icons

Customizable Icons for React Native with support for image source and full styling.

Stars17,848

Forks2,106

Last commit2 days ago

lottie-react-native

Lottie wrapper for React Native.

Stars17,140

Forks1,801

Last commit9 days ago

react-native-maps

React Native Mapview component for iOS + Android

Stars15,954

Forks4,958

Last commit19 days ago

react-native-gifted-chat

💬 The most complete chat UI for React Native

Stars14,390

Forks3,616