🍴 This is a maintained fork of the original react-native-paper-dropdown by @fateh999

Material Design Dropdown Component using React Native Paper, now with enhanced features and community improvements

This fork includes several enhancements and community-contributed features that were never merged into the original repository:

• isFlatList prop: Choose between ScrollView (default) or FlatList for better performance with large datasets
• flatListProps: Pass additional props to FlatList when enabled
• scrollViewProps: Enhanced ScrollView props when not using FlatList
• Performance boost: Better memory management for large option lists

• onScroll prop: Scroll event callback for better control over scroll behavior
• onScrollBeginDrag prop: Callback when user starts dragging the scroll view
• onScrollEndDrag prop: Callback when user ends dragging the scroll view
• Better scroll integration: More responsive scroll interactions and improved UX

• inputStyle prop: Apply custom styles to the Dropdown Input component
• inputOutlineStyle prop: Customize outline styles for better theming
• Better customization: More control over component appearance

• menuAnchorPosition prop: Control menu anchor positioning ('top' | 'bottom')
• menuMode prop: Menu display mode options ('flat' | 'elevated') for better UX
• Updated react-native-paper: Compatible with latest Menu component features

• headerTitle prop: Display custom text or ReactElement in header (independent from input label)
• headerTitleStyle prop: Style the header title text
• headerStyle prop: Customize header container styles
• Smaller default height: More compact header design

• Fixed item text visibility: Proper text contrast in dark mode themes
• Better accessibility: Improved readability across all themes

This fork actively accepts and merges valuable community contributions that enhance the package, providing a more feature-rich and maintained alternative to the original.

react-native-paper

yarn add react-native-paper-dropdown-plus

or

npm i react-native-paper-dropdown-plus

import React, { useState } from 'react';
import { View } from 'react-native';
import { Dropdown } from 'react-native-paper-dropdown-plus';
import { Provider as PaperProvider } from 'react-native-paper';

const OPTIONS = [
  { label: 'Male', value: 'male' },
  { label: 'Female', value: 'female' },
  { label: 'Other', value: 'other' },
];

export default function App() {
  const [gender, setGender] = useState<string>('');

  return (
    <PaperProvider>
      <View style={{ margin: 16 }}>
        <Dropdown
          label="Gender"
          placeholder="Select Gender"
          options={OPTIONS}
          value={gender}
          onSelect={setGender}
          // New features from this fork:
          isFlatList={true} // Use FlatList for better performance
          inputStyle={{ backgroundColor: '#f5f5f5' }} // Custom input styling
          headerTitle="Choose Your Gender" // Custom header text
          menuAnchorPosition="bottom" // Menu positioning

        />
      </View>
    </PaperProvider>
  );
}

import React, { useState } from 'react';
import { View } from 'react-native';
import { MultiSelectDropdown } from 'react-native-paper-dropdown-plus';
import { Provider as PaperProvider } from 'react-native-paper';

const MULTI_SELECT_OPTIONS = [
  { label: 'White', value: 'white' },
  { label: 'Red', value: 'red' },
  { label: 'Blue', value: 'blue' },
  { label: 'Green', value: 'green' },
  { label: 'Orange', value: 'orange' },
];

export default function App() {
  const [colors, setColors] = useState<string[]>([]);

  return (
    <PaperProvider>
      <View style={{ margin: 16 }}>
        <MultiSelectDropdown
          label="Colors"
          placeholder="Select Colors"
          options={MULTI_SELECT_OPTIONS}
          value={colors}
          onSelect={setColors}
          // Enhanced features:
          isFlatList={true}
          headerTitle="Pick Your Favorite Colors"
          headerTitleStyle={{ fontWeight: 'bold', color: '#333' }}
        />
      </View>
    </PaperProvider>
  );
}

This fork actively welcomes community contributions! Feel free to submit Pull Requests with improvements, bug fixes, or new features.

• @levon-zakarian - FlatList support and documentation improvements
• @PaitoAnderson - Dark mode text fixes
• @ashaffah - Enhanced scroll event props and scroll handling
• @vicetr3s - Enhanced styling, menu positioning, and header improvements

Original Package: react-native-paper-dropdown by Fateh Farooqui (@fateh999)

This package is a community-maintained fork that includes valuable contributions and improvements that enhance the original functionality. Special thanks to @fateh999 for creating the foundation of this amazing component!

MIT

Original Documentation: https://fateh999.github.io/react-native-paper-dropdown

Maintained Fork: react-native-paper-dropdown-plus by Vicente Díaz (@vicetr3s)