Popup edit comment like facebook’s modal

Full code of facebook’s comment editing popup. code explanation here

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import PropTypes from 'prop-types';
import {
  Modal,
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  InteractionManager,
  TouchableWithoutFeedback,
  Dimensions,
  Alert,
} from 'react-native';
import I18n from '../app/i18n';
import { removeComment, focusCommentBox } from './feedActions';
import { RALEWAY_REGULAR } from '../commons/fonts';

const { width, height } = Dimensions.get('window');

class CommentActionModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoadingScreen: true,
      customStyle: {
        top: 0,
        left: 0,
      },
    };
  }

  componentDidMount() {
    // this.showModalAnimation();
    InteractionManager.runAfterInteractions(() => {
      this.setState({
        isLoadingScreen: false,
      });
    });
  }

  componentWillReceiveProps({ actionModalVisible, commentPosition }) {
    if (actionModalVisible && commentPosition) {
      let py = commentPosition.y;
      if (py + 130 > height) {
        py -= 100;
      }
      this.setState({
        customStyle: {
          top: py,
          left: width / 2 - 50,
        },
      });
    }
  }

  onPressAction(action) {
    switch (action.id) {
      case 1: // edit
        this.props.onPressEditComment();
        this.props.onCloseActionModal();
        break;
      case 2: // delete
        Alert.alert(
            '',
            I18n.t('delete_comment_confirm_message'),
            [
              {
                text: I18n.t('cancel').toUpperCase(),
                onPress: () => this.props.onCloseActionModal(),
              },
              {
                text: I18n.t('delete').toUpperCase(),
                onPress: () => {
                  this.props.onCloseActionModal();
                  this.props.removeComment(this.props.activeComment.id);
                  this.props.focusCommentBox(false);
                },
              },
            ],
            { cancelable: true }
          );
        break;
      case 3: // cancel
        this.props.onCloseActionModal();
        break;
      default:
        break;
    }
  }

  renderBody() {
    let feedActions = [
        {
          id: 1,
          name: I18n.t('edit'),
        },
        {
          id: 2,
          name: I18n.t('delete'),
        },
        {
          id: 3,
          name: I18n.t('cancel'),
        },
    ];

    const currentUser = this.props.currentUser;
    const comment = this.props.activeComment;
    if (comment) {
      if (comment.user.id !== currentUser.user.id) {
        feedActions.splice(0, 1);
      }
    }

    return (
      <TouchableWithoutFeedback>
        <View style={[styles.body, this.state.customStyle]}>
          {feedActions.map(action => (
            <TouchableOpacity key={action.id} onPress={() => this.onPressAction(action)}>
              <Text style={[styles.actionItemText]}>{action.name}</Text>
            </TouchableOpacity>
          ))}
        </View>
      </TouchableWithoutFeedback>
    );
  }

  render() {
    return (
      <Modal
        animationType="none"
        transparent
        visible={this.props.actionModalVisible}
        onRequestClose={() => {
          this.props.onCloseActionModal();
        }}
      >
        <View style={{ flex: 1 }}>
          <View style={styles.background} />
          <TouchableWithoutFeedback onPress={() => this.props.onCloseActionModal()}>
            <View style={styles.content}>{this.renderBody()}</View>
          </TouchableWithoutFeedback>
        </View>
      </Modal>
    );
  }
}

const styles = StyleSheet.create({
  background: {
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    backgroundColor: '#000',
    opacity: 0.3,
  },
  content: {
    backgroundColor: 'transparent',
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    flex: 1,
  },
  body: {
    backgroundColor: '#fff',
    position: 'absolute',
    borderRadius: 3,
    borderWidth: 1,
    borderColor: '#fff',
  },
  actionItemText: {
    padding: 13,
    paddingLeft: 20,
    paddingRight: 20,
    color: '#000',
    fontFamily: RALEWAY_REGULAR,
  },
  cancel: {
    color: 'red',
  },
});

CommentActionModal.propTypes = {
  onPressEditComment: PropTypes.func.isRequired,
  onCloseActionModal: PropTypes.func.isRequired,
  activeComment: PropTypes.shape({
    id: PropTypes.number,
  }),
  currentUser: PropTypes.shape({
    user: PropTypes.shape({
      id: PropTypes.number,
    }),
  }),
  actionModalVisible: PropTypes.bool,
  removeComment: PropTypes.func,
  focusCommentBox: PropTypes.func,
  commentPosition: PropTypes.shape({
    x: PropTypes.number,
    y: PropTypes.number,
  }).isRequired,
};

CommentActionModal.defaultProps = {
  activeComment: null,
  currentUser: null,
  actionModalVisible: false,
  removeComment: null,
  focusCommentBox: null,
};

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ removeComment, focusCommentBox }, dispatch);
}

function mapStateToProps(state) {
  return {
    appTheme: state.appTheme,
    activeComment: state.activeComment,
    currentUser: state.currentUser,
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(CommentActionModal);