feat: add dialog component (#98)

* Add dialog component

* Fix: fix back button not functioning right

* Fix: fix action btns get added to the scrollview

* Fix: match the MD guidelines for margins

* Visual enhancements to the dialog example scene

* Fix: fix flow errors

* 🎨 Fix prettier errors

* Enhancements to the dialog component

* More enhancements to the dialog component

* 🎉 Introduce Modal component and refactor Dialog to use it

* Remove ThemedPortal from exported components

* 🐛 Fix shadow cutoff on Android

* Add a comment about a regression that is caused by a fix that was done for Android

* chore: Seperate example dialog components into their own files

* chore: Rename Dialog components to be prefixed with 'Dialog'

* chore: change DialogTitle color prop to style

* chore: Replace AnimatedPaper to Paper.Animated

* fix: Replace BackAndroid with BackHandler

* chore: Merge master with `dialog`

* chore: Addressed comments

example/src/DialogExample.js

@@ -0,0 +1,75 @@
+/* @flow */
+
+import React, { Component } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Colors, Button } from 'react-native-paper';
+import {
+  DialogWithCustomColors,
+  DialogWithLoadingIndicator,
+  DialogWithLongText,
+  DialogWithRadioBtns,
+  UndismissableDialog,
+} from './Dialogs';
+
+export default class DialogExample extends Component {
+  static title = 'Dialog';
+
+  state = {
+    visible1: false,
+    visible2: false,
+    visible3: false,
+    visible4: false,
+    visible5: false,
+  };
+
+  _openDialog1 = () => this.setState({ visible1: true });
+  _openDialog2 = () => this.setState({ visible2: true });
+  _openDialog3 = () => this.setState({ visible3: true });
+  _openDialog4 = () => this.setState({ visible4: true });
+  _openDialog5 = () => this.setState({ visible5: true });
+
+  _closeDialog1 = () => this.setState({ visible1: false });
+  _closeDialog2 = () => this.setState({ visible2: false });
+  _closeDialog3 = () => this.setState({ visible3: false });
+  _closeDialog4 = () => this.setState({ visible4: false });
+  _closeDialog5 = () => this.setState({ visible5: false });
+
+  render() {
+    const { visible1, visible2, visible3, visible4, visible5 } = this.state;
+    return (
+      <View style={styles.container}>
+        <Button primary onPress={this._openDialog1}>
+          Show Dialog with long text
+        </Button>
+        <Button primary onPress={this._openDialog2}>
+          Show Dialog with radio buttons
+        </Button>
+        <Button primary onPress={this._openDialog3}>
+          Show Dialog with loading indicator
+        </Button>
+        <Button primary onPress={this._openDialog4}>
+          Show undismissable Dialog
+        </Button>
+        <Button primary onPress={this._openDialog5}>
+          Show Dialog with custom colors
+        </Button>
+        <DialogWithLongText visible={visible1} close={this._closeDialog1} />
+        <DialogWithRadioBtns visible={visible2} close={this._closeDialog2} />
+        <DialogWithLoadingIndicator
+          visible={visible3}
+          close={this._closeDialog3}
+        />
+        <UndismissableDialog visible={visible4} close={this._closeDialog4} />
+        <DialogWithCustomColors visible={visible5} close={this._closeDialog5} />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.grey200,
+    padding: 16,
+  },
+});