feat(exoflex): modal component (#178)

* fix(exoflex): export Portal

* feat(exoflex): modal component

* chore(exoflex): add modal example

* fix(exoflex): omit theme prop from modal

* docs(exoflex): modal docs

packages/exoflex/docs/components/Modal.md

@@ -0,0 +1,39 @@
+# Modal
+
+The Modal component is a simple way to present content above an enclosing view.
+
+### Preview
+
+<p align="center">
+  <img src="../assets/modal_mobile_preview.png" alt="modal_mobile_preview" width="320">
+  <img src="../assets/modal_web_preview.png" alt="modal_web_preview">
+</p>
+
+### Props
+
+| Name                  |          Type          | Default | Description                                                |
+| --------------------- | :--------------------: | :-----: | ---------------------------------------------------------- |
+| children \*           |      `ReactNode`       |         | Content of the Modal.                                      |
+| dismissable           |       `boolean`        | `true`  | Determines whether clicking outside the modal dismiss it.  |
+| onDismiss             |      `() => void`      |         | Callback that is called when the user dismisses the modal. |
+| visible               |       `boolean`        | `false` | Determines whether the modal is visible.                   |
+| contentContainerStyle | `StyleProp<ViewStyle>` |         | Style for the content of the modal.                        |
+
+Props marked with \* are required.
+
+### Example
+
+```tsx
+<Provider>
+  <Portal>
+    <Modal
+      visible={isVisible}
+      onDismiss={toggleModal}
+      contentContainerStyle={styles.modal}
+    >
+      <Text>Howdy, Modal!</Text>
+      <Text>You can click the overlay to close this modal.</Text>
+    </Modal>
+  </Portal>
+</Provider>
+```

packages/exoflex/example/src/examples/ModalExample.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Portal, Text, Modal, Button } from 'exoflex';
+
+function ModalExample() {
+  let [isVisible, setVisible] = useState(false);
+
+  let toggleModal = () => setVisible(!isVisible);
+
+  return (
+    <>
+      <View style={styles.container}>
+        <Button onPress={toggleModal}>Open Modal</Button>
+      </View>
+      <Portal>
+        <Modal
+          visible={isVisible}
+          onDismiss={toggleModal}
+          contentContainerStyle={styles.modal}
+        >
+          <Text>Howdy, Modal!</Text>
+          <Text>You can click the overlay to close this modal.</Text>
+        </Modal>
+      </Portal>
+    </>
+  );
+}
+
+let styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modal: {
+    padding: 16,
+    backgroundColor: 'white',
+    margin: 16,
+    alignItems: 'center',
+    height: 150,
+  },
+});
+
+ModalExample.title = 'Modal';
+
+export default ModalExample;

packages/exoflex/example/src/examples/PortalExample.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-import { Portal, Text } from '../../../src/components';
+import { Portal, Text } from 'exoflex';
 
 function PortalExample() {
   return (

packages/exoflex/example/src/examples/index.tsx

@@ -11,6 +11,7 @@ import CollapsibleExample from './CollapsibleExample';
 import DateTimePickerExample from './DateTimePickerExample';
 import SliderExample from './SliderExample';
 import IconButtonExample from './IconButtonExample';
+import ModalExample from './ModalExample';
 import PortalExample from './PortalExample';
 import ProgressBarExample from './ProgressBarExample';
 import RadioButtonExample from './RadioButtonExample';
@@ -31,6 +32,7 @@ export let EXAMPLES = {
   collapsible: CollapsibleExample,
   datetimepicker: DateTimePickerExample,
   iconbutton: IconButtonExample,
+  modal: ModalExample,
   portal: PortalExample,
   progressbar: ProgressBarExample,
   radiobutton: RadioButtonExample,

packages/exoflex/src/components/Modal.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import {
+  Modal as PaperModal,
+  ModalProps as PaperModalProps,
+} from 'react-native-paper';
+
+type ModalProps = Omit<PaperModalProps, 'theme'>;
+
+export default function Modal(props: ModalProps) {
+  return <PaperModal {...props} />;
+}

packages/exoflex/src/components/index.ts

@@ -9,6 +9,7 @@ export { default as Chip } from './Chip';
 export { default as Collapsible } from './Collapsible';
 export { default as DateTimePicker } from './DateTimePicker/DateTimePicker';
 export { default as IconButton } from './IconButton';
+export { default as Modal } from './Modal';
 export { default as Portal } from './Portal';
 export { default as ProgressBar } from './ProgressBar';
 export { default as Provider } from './Provider';

packages/exoflex/src/index.ts

@@ -18,6 +18,8 @@ export {
   DateTimePicker,
   Drawer,
   IconButton,
+  Modal,
+  Portal,
   ProgressBar,
   Provider,
   RadioButton,