react-native-dropdown-alert hacks

connectDropdownAlert.js

import React, { PropTypes } from "react";
import hoistNonReactStatic from "hoist-non-react-statics";

export default function connectDropdownAlert(WrappedComponent) {
  const ConnectedDropdownAlert = (props, context) => {
    return (
      <WrappedComponent
        {...props}
        alertWithType={context.alertWithType}
        alert={context.alert}
      />
    );
  };

  ConnectedDropdownAlert.contextTypes = {
    alertWithType: PropTypes.func,
    alert: PropTypes.func
  };

  return hoistNonReactStatic(ConnectedDropdownAlert, WrappedComponent);
}

DropdownAlertProvider.js

import React, { PropTypes, Component } from "react";
import { View, StyleSheet, StatusBar } from "react-native";
import DropdownAlert from "react-native-dropdownalert";
import { observer } from "mobx-react/native";
import { observable } from "mobx";

@observer
export default class DropdownAlertProvider extends Component {
  static propTypes = {
    children: React.PropTypes.any
  };

  static childContextTypes = {
    alertWithType: PropTypes.func,
    alert: PropTypes.func
  };

  @observable barStyle = "default";

  getChildContext() {
    return {
      alert: (...args) => this.dropdown.alert(...args),
      alertWithType: (...args) => this.dropdown.alertWithType(...args)
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <StatusBar barStyle={this.barStyle} />
        {React.Children.only(this.props.children)}
        <DropdownAlert
          ref={ref => {
            this.dropdown = ref;
          }}
          onClose={() => {
            this.barStyle = "default";
          }}
          endDelta={StatusBar.currentHeight}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

can you explain the usage mate ? how to use this feature on ui screen ?