Balloon component for React Native

balloon.jsx

import React from "react";
import {
  StyleSheet,
  TouchableWithoutFeedback,
  View
} from "react-native";

export class Notifications extends React.Component {
  componentWillMount() {
    this.state = {
      isOpened: true
    }

    this.close = this.close.bind(this);
  }

  close() {
    this.setState({ isOpened: false });
  }

  render() {
    if (this.state.isOpened) {
      return (
        <View style={styles.container}>
          <TouchableWithoutFeedback onPress={this.close}>
            <View style={styles.background} />
          </TouchableWithoutFeedback>
          <View style={styles.content} >
            {this.props.children}
          </View>
          <View style={styles.delta} />
        </View>
      );
    } else {
      return (<View></View>);
    }
  }
}

const styles = StyleSheet.create({
  container: {
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    position: "absolute",
    zIndex: 200
  },

  background: {
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    position: "absolute",
    backgroundColor: "rgba(0, 0, 0, 0.3)",
    padding: 10
  },

  content: {
    position: "absolute",
    left: 10,
    right: 10,
    top: 60,
    bottom: 100,
    padding: 5,
    backgroundColor: '#fff',
    borderRadius: 10,
  },

  delta: {
    position: "absolute",
    right: 100,
    top: 0,
    marginTop: 30,
    width: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderTopWidth: 10,
    borderBottomWidth: 20,
    borderRightWidth: 30,
    borderLeftWidth: 30,
    borderTopColor: 'transparent',
    borderBottomColor: 'white',
    borderRightColor: 'transparent',
    borderLeftColor: 'transparent'
  }
});