Create popup edit comment like facebook’s editing comment modal

Spread the love

Create popup edit comment like facebook’s editing comment modal

Today, I’m going to share how to create a modal similar to facebook edit, delete comment modal.

As you can see in the video, user use their finger to touch the comment for 1-2 seconds, the popup will show up right at the position user touch in the screen. So the idea is: we will catch the event onLongPress, this even provide us the position where our finger touch in the screen. We pass this position to our modal then show the popup at that position.

  <TouchableOpacity onLongPress={evt => this.handleOnLongPressComment(evt, comment)}
    delayLongPress={500}
  >
   {this.renderCommentItem(comment)}
  </TouchableOpacity>

In callback handleOnLongPressComment, we get the position (evt.nativeEvent.pageX, evt.nativeEvent.pageY) then pass it to our modal

  handleOnLongPressComment(evt, comment) {
    dismissKeyboard();

    const currentFeed = this.props.currentFeedComment;
    const currentUser = this.props.currentUser;

    if (
      comment.user.id === currentUser.user.id ||
      (comment.user.id !== currentUser.user.id && currentFeed.user.id === currentUser.user.id)
    ) {
      this.setState({
        commentActionModalVisible: true,
        commentPosition: {
          x: evt.nativeEvent.pageX,
          y: evt.nativeEvent.pageY,
        },
      });
      this.props.setActiveComment(comment);
    }
  }
  renderCommentActionModal() {
    return (
      <CommentActionModal actionModalVisible={this.state.commentActionModalVisible} commentPosition={this.state.commentPosition} onCloseActionModal={this.handleOnCloseCommentActionModal} onPressEditComment={this.handleOnPressEditComment} />
    );
  }

Now, we look at the CommentActionModal
As usual, we use react native Modal component, animationType will be set to none, we don’t want to show any animation here.

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

Apart from two required props actionModalVisible and onCloseActionModal, this component also accept the prop name commentPosition.

  commentPosition: PropTypes.shape({
    x: PropTypes.number,
    y: PropTypes.number,
  }).isRequired,

In event componentWillReceiveProps, we use this commentPosition to calculate the position (top,left) of the popup which we want to show.

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

Hmm, it’s pretty easy, right? Here is the full code if you guys interested in fullcode
Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *