react-native-web port of fmf app

1 files changed, 41 insertions, 0 deletions

diff --git a/client/src/lib/components/modal.js b/client/src/lib/components/modal.js
new file mode 100644
index 0000000..38869ce
--- /dev/null
+++ b/client/src/lib/components/modal.js
@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  View,
+} from 'react-native';
+
+export default class Modal extends Component {
+  render() {
+    let style = [ styles.modal ]
+    if (this.props.isVisible) {
+      style.push(styles.visible)
+    }
+    style.push( this.props.style )
+    return (
+      <View style={style} className='modal'>
+        {this.props.children}
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  modal: {
+    position: 'fixed',
+    top: '100%',
+    left: 0,
+    width: '100%',
+    height: '100%',
+    zIndex: 2,
+    backgroundColor: 'black',
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    opacity: 0,
+  },
+  visible: {
+    top: '0%',
+    opacity: 1,
+  },
+})