React-native-gifted-chat: Reply for Particular Message

[AGurindapalli]

Hi There,

How to Implement whatsapp type reply in react-native-gifted-chat...

[mafiusu]

I did some prototyping on this nice feature last day. And here is my outcome:

Some steps you will need for implementing this.

1. Trigger a reply
You could trigger your reply by longPress on a bubble or you could implement a swipe to the bubbles like WhatsApp. I choosed the onLongPress Method.

2. render ChatFooter
Like WhatsApp you can notify the user that they are actually replying on a message by showing the ChatFooter (like in the Gif above)

//ChatFooter.js
        <View style={{height: 50, flexDirection: 'row'}}>
        <View style={{height:50, width: 5, backgroundColor: 'red'}}></View>
        <View style={{flexDirection: 'column'}}>
            <Text style={{color: 'red', paddingLeft: 10, paddingTop: 5}}>{replyTo}</Text>
            <Text style={{color: 'gray', paddingLeft: 10, paddingTop: 5}}>{replyMsg}</Text>
        </View>
        <View style={{flex: 1,justifyContent: 'center',alignItems:'flex-end', paddingRight: 10}}>
            <TouchableOpacity onPress={dismiss}>
                <Icon name="x" type="feather" color="#0084ff" />
            </TouchableOpacity>
        </View>
      </View>

3. You will need a MessageReply component
You can pass a key to the message object that indicates, that this message is a reply. With that key you can render a custom Bubble to display the replyMsg.

//MessageReply.js
  render() {
    const {replyTo, replyMsg} = this.props.currentMessage;
    return (
      <View style={[styles.container, this.props.containerStyle]}>
        <View style={{ padding: 5}}>
          <View style={{backgroundColor: '#005CB5', borderRadius: 15}}>
            <View style={{flexDirection: 'row',}}>
              <View style={{height:50, width: 10, backgroundColor: '#00468A', borderTopLeftRadius: 15, borderBottomLeftRadius: 15}} />
                <View style={{flexDirection: 'column'}}>
                  <Text style={{color: 'white', paddingHorizontal: 10, paddingTop: 5, fontWeight: '700'}}>{replyTo}</Text>
                  <Text style={{color: 'white', paddingHorizontal: 10, paddingTop: 5}}>{replyMsg}</Text>
                </View>
            </View>
          </View>
        </View>
      </View>
    );
  }

[AGurindapalli]

@mafiusu Thanks for the Message...
can u send the detailed code.. i'm new to React native.. little bit confused..

[AGurindapalli]

@mafiusu it worked.. Thank u so much.. We can close the Issue..

[ChrisEdson]

Hey @mafiusu, I’m trying to hack this together myself. If you could share the code, that would be incredible!

[Faolain]

@anilgurindapalli did you receive any extra code or did you just use what mafiusu listed above?

@ChrisEdson were you able to implement this?

[mafiusu]

@ChrisEdson I'm a bit late here but if you and @Faolain want the complete source code, you can contact me through Twitter.

It would be a nice feature to have for this library.

[xcarpentier]

@mafiusu any PR?

[mafiusu]

@mafiusu any PR?

If I have more free time, I'll do a PR soon :)

[ikrav4ic]

@mafiusu Hi
Can you share code of gifted chat reply messages? Try to modify by myself? but it didn't work yet

[mafiusu]

I will do a PR if I have finally more free time!

@ikrav4ic You can contact me through Twitter. My Twitter is linked on my GitHub profile

[vkkan]

@mafiusu Sent twitter message , pls share the code

[vkkan]

@mafiusu Thanks for the Message...
can u send the detailed code.. i'm new to React native.. little bit confused..

pls share your working code

[vkkan]

@mafiusu it worked.. Thank u so much.. We can close the Issue..

pls share the working sample

[vkkan]

Does anyone can provide full example of this ?

[mafiusu]

Hey @vkkan the instruction to rebuild this example is listed above with full code parts.

[syrakozz]

@anilgurindapalli hey can you plz send details code or full exmaple

[AreebVohra]

Hey @vkkan the instruction to rebuild this example is listed above with full code parts.

what example are you referring to?

[mafiusu]

Hello @AreebVohra I was referring to my own example that I have posted for this issue. It is listed above.

[AreebVohra]

I did some prototyping on this nice feature last day. And here is my outcome:

Some steps you will need for implementing this.

1. Trigger a reply
You could trigger your reply by longPress on a bubble or you could implement a swipe to the bubbles like WhatsApp. I choosed the onLongPress Method.

2. render ChatFooter
Like WhatsApp you can notify the user that they are actually replying on a message by showing the ChatFooter (like in the Gif above)

//ChatFooter.js
        <View style={{height: 50, flexDirection: 'row'}}>
        <View style={{height:50, width: 5, backgroundColor: 'red'}}></View>
        <View style={{flexDirection: 'column'}}>
            <Text style={{color: 'red', paddingLeft: 10, paddingTop: 5}}>{replyTo}</Text>
            <Text style={{color: 'gray', paddingLeft: 10, paddingTop: 5}}>{replyMsg}</Text>
        </View>
        <View style={{flex: 1,justifyContent: 'center',alignItems:'flex-end', paddingRight: 10}}>
            <TouchableOpacity onPress={dismiss}>
                <Icon name="x" type="feather" color="#0084ff" />
            </TouchableOpacity>
        </View>
      </View>

3. You will need a MessageReply component
You can pass a key to the message object that indicates, that this message is a reply. With that key you can render a custom Bubble to display the replyMsg.

//MessageReply.js
  render() {
    const {replyTo, replyMsg} = this.props.currentMessage;
    return (
      <View style={[styles.container, this.props.containerStyle]}>
        <View style={{ padding: 5}}>
          <View style={{backgroundColor: '#005CB5', borderRadius: 15}}>
            <View style={{flexDirection: 'row',}}>
              <View style={{height:50, width: 10, backgroundColor: '#00468A', borderTopLeftRadius: 15, borderBottomLeftRadius: 15}} />
                <View style={{flexDirection: 'column'}}>
                  <Text style={{color: 'white', paddingHorizontal: 10, paddingTop: 5, fontWeight: '700'}}>{replyTo}</Text>
                  <Text style={{color: 'white', paddingHorizontal: 10, paddingTop: 5}}>{replyMsg}</Text>
                </View>
            </View>
          </View>
        </View>
      </View>
    );
  }

in point # 3 you said to pass a key to the message object how did you implemet that?

[akkamboj]

Hi @mafiusu
Can you provide me the sample code.

[mitjnextt]

Hi @mafiusu
Nice code. Can you show the particular example including everything.
Your .gif image is also incomplete just showing menu after longPress() click.
Can you show the full gif, we need to see how it actually looks.