RNPopoverSelector

A high-performance, customizable popover selector for React Native with support for:

• ✅ Single & Multiple selection
• 🔍 Searchable list
• ☑️ Select All (for multi-select)
• 🎨 Custom colors
• 🧩 Fully customizable button & item rendering
• ⚡ Optimized with memoization for large lists

Installation

npm install rn-popover-selector

or

yarn add rn-popover-selector

Basic Usage

import RNPopoverSelector from 'rn-popover-selector';

const data = [
  { id: 1, title: 'Option 1' },
  { id: 2, title: 'Option 2' },
  { id: 3, title: 'Option 3' },
];

export default function App() {
  const [value, setValue] = useState<number | null>(null);

  return (
    <RNPopoverSelector
      data={data}
      value={value}
      onChange={(item) => setValue(item.id)}
      placeholder="Select option"
    />
  );
}

Multi Select Example

const [values, setValues] = useState<number[]>([]);

<RNPopoverSelector
  data={data}
  multiple
  searchable
  value={values}
  onChange={(items) => setValues(items.map(i => i.id))}
  selectAllLabel="Select All Items"
/>

Props

| Prop | Type | Default | Description | |-----|------|--------|-------------| | data | SelectorItem[] | — | List of items | | value | string \| number \| array \| null | — | Selected value(s) | | onChange | (item \| items) => void | — | Selection callback | | placeholder | string | "Select" | Button placeholder | | multiple | boolean | false | Enable multi-select | | searchable | boolean | false | Enable search | | selectAllLabel | string | "Select All" | Select-all label | | color | string | #007AFF | Active color | | renderButton | function | — | Custom button renderer | | renderItem | function | — | Custom item renderer | | width | number | — | Selector Modal width |

SelectorItem Interface

export interface SelectorItem {
  id: string | number;
  title: string | number;
  [key: string]: any;
}

Custom Button Example

<RNPopoverSelector
  data={data}
  value={value}
  onChange={(item) => setValue(item.id)}
  renderButton={(selected, open) => (
    <View style={{ padding: 12 }}>
      <Text>{selected ? selected.title : 'Choose item'}</Text>
    </View>
  )}
/>

Custom Item Example

renderItem={(item, isSelected, onSelect) => (
  <TouchableOpacity onPress={onSelect}>
    <Text style={{ color: isSelected ? 'blue' : 'black' }}>
      {item.title}
    </Text>
  </TouchableOpacity>
)}

Performance Notes

• Uses React.memo for rows
• Stable handlers via useRef + useCallback
• Optimized FlatList (getItemLayout, removeClippedSubviews)
• Handles large datasets smoothly

License

MIT © 2025