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,
  },
})