# react-native-expo-modal-select

> Select component with a fullscreen modal

Latest version **0.1.6** (published 2025-01-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-expo-modal-select
pnpm add react-native-expo-modal-select
yarn add react-native-expo-modal-select
bun add react-native-expo-modal-select
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.6 |
| Published | 2025-01-16 |
| First published | 2023-05-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 16.0.0 |
| Dependencies | 1 |
| Unpacked size | 57.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Gustavo Henrique Ribeiro Dias |
| Maintainers | guribeiro |
| Keywords | react-native, ios, android, expo-select, modal-selecy, select, modal, expo |

## Links

- npm: https://www.npmjs.com/package/react-native-expo-modal-select
- Repository: https://github.com/Guribeiro/react-native-modal-select
- Homepage: https://github.com/Guribeiro/react-native-modal-select#readme
- Issues: https://github.com/Guribeiro/react-native-modal-select/issues
- npm.io page: https://npm.io/package/react-native-expo-modal-select

## Dependencies (1)

- [jest-expo](https://npm.io/package/jest-expo.md) ^48.0.2

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 0.1.6 (latest) — 2025-01-16
- 0.1.5 — 2024-10-02
- 0.1.4 — 2024-03-01
- 0.1.3 — 2023-09-04
- 0.1.2 — 2023-05-25
- 0.1.1 — 2023-05-25

## README

# react-native-expo-modal-select

This is customizable Modal Select for your React Native and Expo application.

## Installation

```
npm install react-native-expo-modal-select
```

or

```
yarn add react-native-expo-modal-select
```

## Basic usage

```js
import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import ModalSelect, { type Item } from 'react-native-expo-modal-select';

const countries: Item[] = [
  {
    label: 'Brazil',
    value: 'brazil',
  },
  {
    label: 'EUA',
    value: 'eua',
  },
  {
    label: 'Canada',
    value: 'canada',
  },
];

export default function Select() {
  const [country, setCountry] = useState('');
  return (
    <View style={styles.container}>
      <View style={styles.modalWrapper}>
        <ModalSelect
          placeholder="Select your country"
          items={countries}
          value={country}
          onChange={(value) => setCountry(value)}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ddd',
    padding: 16,
  },
  modalWrapper: {
    borderWidth: 1,
    borderColor: '#111',
    borderStyle: 'solid',
    padding: 12,
  },
});
```

![Basic example](.github/gifs/basic-example.gif)

## Advanced usage
  **ModalSelect** allows you to customizable your component by passing custom components on props to it.

```js
import React, { useState } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import ModalSelect, {
  type CloseModalComponentProps,
  type Item,
  type ModalHeaderComponentProps,
  type ModalItemComponentProps,
  type PressableComponentProps,
  type EmptyIndicatorComponentProps,
} from 'react-native-expo-modal-select';

const countries: Item[] = [
  {
    label: 'Brazil',
    value: 'brazil',
  },
  {
    label: 'EUA',
    value: 'eua',
  },
  {
    label: 'Canada',
    value: 'canada',
  },
];

const renderPressableComponent = ({
  text,
  onOpen,
}: PressableComponentProps) => {
  return (
    <Pressable style={styles.pressable} onPress={onOpen}>
      <Text>{text}</Text>
    </Pressable>
  );
};

const renderCloseModalComponent = ({ onClose }: CloseModalComponentProps) => {
  return (
    <Pressable onPress={onClose}>
      <Text>close</Text>
    </Pressable>
  );
};

const renderModalHeaderComponent = ({
  title,
  onCancel,
  onClose,
}: ModalHeaderComponentProps) => {
  return (
    <View style={styles.header}>
      <Pressable
        onPress={onClose}
        style={[styles.button, { backgroundColor: 'green' }]}
      >
        <Text>close</Text>
      </Pressable>
      <Text>{title}</Text>
      <Pressable
        onPress={onCancel}
        style={[styles.button, { backgroundColor: 'blue' }]}
      >
        <Text>cancel</Text>
      </Pressable>
    </View>
  );
};

const renderEmptyIndicatorComponent = ({
  text,
}: EmptyIndicatorComponentProps) => {
  return (
    <View style={styles.emptyContainer}>
      <Text>{text || 'empty message'}</Text>
    </View>
  );
};

const renderModalItemComponent = ({
  item,
  index,
  focused,
  onSelect,
}: ModalItemComponentProps) => {
  return (
    <Pressable
      style={[styles.item, { backgroundColor: focused ? 'blue' : 'white' }]}
      onPress={onSelect}
    >
      <Text>
        {index} - {item.label}
      </Text>
    </Pressable>
  );
};

export default function Advanced() {
  const [country, setCountry] = useState('');
  return (
    <View style={styles.container}>
      <ModalSelect
        placeholder="Select your country"
        items={countries}
        value={country}
        onChange={(value) => setCountry(value)}
        pressableComponent={renderPressableComponent}
        modalItemComponent={renderModalItemComponent}
        closeModalComponent={renderCloseModalComponent}
        modalHeaderComponent={renderModalHeaderComponent}
        emptyIndicatorComponent={renderEmptyIndicatorComponent}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ddd',
    padding: 16,
  },

  emptyContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    height: 56,
    padding: 16,
    backgroundColor: '#ccc',
  },
  button: {
    height: 32,
    paddingHorizontal: 8,
    justifyContent: 'center',
  },
  text: {
    color: 'white',
  },
  pressable: {
    borderColor: '#aaa',
    borderWidth: 1,
    borderStyle: 'solid',
    height: 56,
    justifyContent: 'center',
    paddingHorizontal: 4,
  },
  item: {
    height: 56,
    padding: 16,
    borderColor: '#aaa',
    borderBottomWidth: 1,
  },
});

```
![Advanced example](.github/gifs/advanced-example.gif)

## Reference

### testID

id for testing

| Type   | Required | Default   |
| ------ | -------- | --------- |
| string | No       | undefined |

---

### items

array of `Item` that will be represented in modal as all the options that could be selected

| Type  | Required | Default |
| ----- | -------- | ------- |
| array | Yes      | []      |

---

### value

selected item in modal select

| Type   | Required | Default |
| ------ | -------- | ------- |
| string | Yes      |         |

---

### placeholder

text that will be displayed inside the touchable

| Type   | Required | Default   |
| ------ | -------- | --------- |
| string | No       | undefined |

---

### closeModalText

style object for modal cancel button text

| Type   | Required | Default |
| ------ | -------- | ------- |
| string | No       | Back    |

---

### cancelTouchableText

text that will be displayed inside the cancel touchable

| Type   | Required | Default |
| ------ | -------- | ------- |
| string | No       | Cancel  |

---

### emptyIndicatorText

text that will be displayed inside the empty indicator

| Type     | Required | Default                                  |
| -------- | -------- | ---------------------------------------- |
| function | Yes      | Sorry, there is nothing to be shown here |

---

### closeModalComponent

component for closing select modal

| Type            | Required | Default   |
| --------------- | -------- | --------- |
| React Component | No       | undefined |

---

### cancelModalComponent

component for canceling select modal

| Type            | Required | Default   |
| --------------- | -------- | --------- |
| React Component | No       | undefined |

---

### pressableComponent

component for pressing to open the select modal

| Type            | Required | Default   |
| --------------- | -------- | --------- |
| React Component | No       | undefined |

---

### modalHeaderComponent

component for the modal select header

| Type            | Required | Default   |
| --------------- | -------- | --------- |
| React Component | No       | undefined |

---

### emptyIndicatorComponent

component to indicate when modal select is empty

| Type            | Required | Default   |
| --------------- | -------- | --------- |
| React Component | No       | undefined |

---

### modalItemComponent

component for each item on modal select

| Type            | Required | Default   |
| --------------- | -------- | --------- |
| React Component | No       | undefined |

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

---
_Source: https://npm.io/package/react-native-expo-modal-select · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._