react-native-expo-modal-select v0.1.4

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

label

display a text label for describing the select component

required

display * for required fields

items

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

value

selected item in modal select

placeholder

text that will be displayed inside the touchable

touchableStyle

style object for touchable

touchableTextStyle

style object for text inside touchable

itemTouchableStyle

style object for select item touchable

itemTextStyle

style object for select item text

errorTextStyle

style object for error text

labelStyle

style object for label text

modalStyle

style object for customizing modal

modalTitleStyle

style object for modal title text

showErrorMessage

when false, hide the error message keeping the error style.

errorColor

defines the error used when has an error

closeTextStyle

style object for modal close button text

cancelTouchableText

text that will be displayed inside the cancel touchable

emptyIndicatorText

text that will be displayed inside the empty indicator

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