@atom-design-mog/dropdown

A lightweight, platform-friendly Dropdown / Select Component for React Native. Supports anchored positioning, modal-based dropdown list, custom placeholder, labels, and flexible styling. Part of the Atom Design System.

📦 Installation

Install with npm:

npm install @atom-design-mog/dropdown

Or with yarn:

yarn add @atom-design-mog/dropdown

🚀 Import

import Dropdown from '@atom-design-mog/dropdown';

🎮 Basic Usage

const [selected, setSelected] = useState(null);

<Dropdown
  label="Select Fruit"
  triggerText={selected || 'Choose...'}
  options={[
    { label: 'Apple', value: 'apple' },
    { label: 'Orange', value: 'orange' },
  ]}
  onSelect={(value) => setSelected(value)}
/>

🧩 Props

| Prop | Type | Description | | ----------------- | -------------------- | ------------------------------------------------------ | | label | string | Optional label shown above the trigger | | triggerText | string | Text shown inside the dropdown trigger | | options | [{ label, value }] | Array of items to show in dropdown | | onSelect | function | Callback fired with value when an option is selected | | placeholder | string | Default text when triggerText is not provided | | style | object | Custom container wrapper styles | | dropdownStyle | object | Additional style for dropdown list container |

⭐ Features

• Anchored dropdown using measureInWindow to match trigger position and width
• Modal-based dropdown ensures it renders above all screens
• Cross-platform: consistent behaviour on Android & iOS
• Label support and customizable trigger text / placeholder
• Scrollable list for long menus
• Automatic width matching the trigger (can be overridden with dropdownStyle)
• Shadow, elevation and border-ready styles included
• Zero runtime dependencies (just React Native primitives)

🧪 Example Test Screen

import React, { useState } from 'react';
import { View, Text, ScrollView } from 'react-native';
import Dropdown from '@atom-design-mog/dropdown';

export default function TestDropdownScreen() {
  const [selected, setSelected] = useState(null);

  const options = [
    { label: 'Option 1 - Apple', value: 'Apple' },
    { label: 'Option 2 - Banana', value: 'Banana' },
    { label: 'Option 3 - Cherry', value: 'Cherry' },
    { label: 'Option 4 - Orange', value: 'Orange' },
  ];

  return (
    <ScrollView style={{ flex: 1 }}>
      <View style={{ padding: 20, gap: 28 }}>

        {/* Basic Test */}
        <View>
          <Text style={{ fontSize: 18, marginBottom: 8 }}>Dropdown Demo</Text>
          <Dropdown
            label="Simple dropdown"
            triggerText={selected ? `Selected: ${selected}` : 'Tap to choose'}
            options={options}
            onSelect={(val) => setSelected(val)}
          />
        </View>

        {/* Placeholder Example */}
        <View>
          <Dropdown
            label="With Placeholder"
            placeholder="Choose a fruit..."
            options={options}
            onSelect={(val) => console.log('Picked:', val)}
          />
        </View>

        {/* Narrow Trigger Example */}
        <View>
          <Dropdown
            label="Narrow Width Trigger"
            triggerText="Small"
            options={options}
            style={{ width: 160 }}
            dropdownStyle={{ maxHeight: 200 }}
            onSelect={(val) => console.log('Small trigger ->', val)}
          />
        </View>

      </View>
    </ScrollView>
  );
}

👤 Author

Avi Gupta