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

Usage

import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import ModalSelect, { 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}>
      <ModalSelect
        label="country"
        placeholder="Select your country"
        items={countries}
        value={country}
        onChange={(value) => setCountry(value)}
      />
    </View>
  );
}

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

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 |

touchableStyle

style object for touchable

| Type | Required | Default | | ------ | -------- | --------- | | object | No | undefined |

touchableTextStyle

style object for text inside touchable

| Type | Required | Default | | ------ | -------- | --------- | | object | No | undefined |

itemTouchableStyle

style object for select item touchable

| Type | Required | Default | | ------ | -------- | --------- | | object | No | undefined |

itemTextStyle

style object for select item text

| Type | Required | Default | | ------ | -------- | --------- | | object | No | undefined |

modalStyle

style object for customizing modal

| Type | Required | Default | | ------ | -------- | --------- | | object | No | undefined |

modalTitleStyle

style object for modal title text

| Type | Required | Default | | ------ | -------- | --------- | | object | No | undefined |

closeTextStyle

style object for modal close button text

| Type | Required | Default | | ------ | -------- | --------- | | object | No | undefined |

closeModalText

style object for modal cancel button text

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

cancelTextStyle

style object for modal cancel button text

| Type | Required | Default | | ------ | -------- | --------- | | object | No | undefined |

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

text that will be displayed inside the empty indicator

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

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library