Alert for react-native-web with native-base

tsx

import React from "react";
import { observable } from "mobx";
import { isWeb } from "../core/helpers";
import { Alert as NativeAlert, StyleSheet } from "react-native";
import {
  Card,
  Text,
  View,
  Header,
  Content,
  Button,
  CardItem
} from "native-base";
import { observer } from "mobx-react";
import Colors from "../constants/Colors";

class Alert extends React.Component<any> {
  @observable settings = null;

  static alert(
    title = "",
    desc = "",
    buttons = [
      {
        text: "Ok",
        onPress: () => {}
      }
    ],
    options = { cancelable: false }
  ) {
    isWeb()
      ? (Alert.alertInstance.settings = { title, desc, buttons, options })
      : NativeAlert.alert(title, desc, buttons, options);
  }
  static alertInstance = null;
  ref = null;

  componentDidMount() {
    Alert.alertInstance = this;
  }
  onSelect(f) {
    this.settings = null;
    f();
  }
  render() {
    return (
      this.settings && (
        <View style={styles.wrapper}>
          <Card>
            <CardItem header bordered>
              <Text>{this.settings.title}11</Text>
            </CardItem>
            <CardItem bordered>
              <Text>{this.settings.desc}</Text>
            </CardItem>
            <CardItem bordered style={styles.cards}>
              {this.settings.buttons.map(button => (
                <Button
                  disabled={button.disabled}
                  onPress={() => this.onSelect(button.onPress)}
                  style={styles.card}
                >
                  <Text>{button.text}</Text>
                </Button>
              ))}
            </CardItem>
          </Card>
        </View>
      )
    );
  }
}

export default observer(Alert);

const styles = StyleSheet.create({
  wrapper: {
    position: "absolute",
    width: "100vw",
    height: "100vh",
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "rgba(0, 0, 0, 0.2)"
  },
  cards: {
    minWidth: 300,
    justifyContent: "space-between"
  },
  card: {
    paddingLeft: 5,
    paddingRight: 5
  }
});