select modal

index.tsx

import React from "react";
import { View, Text, Dimensions } from "react-native";
import Modal from "react-native-modal";
import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { TouchableOpacity } from "react-native-gesture-handler";
import { faCheckCircle, faCircle } from "@fortawesome/free-regular-svg-icons";
import styles from "./styles";

const { width } = Dimensions.get("window");

interface Option {
  key: string;
  value: string;
  label: string;
}

interface Props {
  value: string[];
  onChange: (value: string[]) => void;
  open: boolean;
  options: Option[];
  onRequestClose: () => void;
}

export default class SelectModal extends React.Component<Props> {
  onChange = ({ value }) => {
    const { value: current } = this.props;
    if (current.indexOf(value) !== -1) {
      this.props.onChange(current.filter(item => item !== value));
    } else {
      this.props.onChange([...current, value]);
    }
  };
  render() {
    const { open, value, options, onRequestClose } = this.props;

    return (
      <View>
        <Modal
          isVisible={open}
          onSwipeComplete={onRequestClose}
          onBackButtonPress={onRequestClose}
          onBackdropPress={onRequestClose}
        >
          <View style={styles.container}>
            {options.map(item => (
              <TouchableOpacity onPress={() => this.onChange(item)}>
                <View style={styles.option}>
                  <Text style={styles.optionsText}>{item.label}</Text>
                  {value.indexOf(item.value) !== -1 ? (
                    <FontAwesomeIcon
                      icon={faCheckCircle}
                      size={width * 0.045}
                      color="#64BC45"
                    />
                  ) : (
                    <FontAwesomeIcon
                      icon={faCircle}
                      size={width * 0.045}
                      color="#999"
                    />
                  )}
                </View>
              </TouchableOpacity>
            ))}
          </View>
        </Modal>
      </View>
    );
  }
}

styles.ts

import { StyleSheet, Dimensions } from "react-native";

const { width } = Dimensions.get("window");

export default StyleSheet.create({
  container: {
    backgroundColor: "#FFF",
    borderRadius: 10
  },
  option: {
    padding: width * 0.05,
    justifyContent: "space-between",
    alignItems: "center",
    flexDirection: "row"
  },
  optionsText: {
    fontSize: width * 0.04,
    color: "#666",
    textAlign: "left"
  }
});