react-native-gifted-chat icon indicating copy to clipboard operation
react-native-gifted-chat copied to clipboard

How to set text to input dynamicly?

Open lvshuchengyin opened this issue 2 years ago • 1 comments

Issue Description

Hi, I want to fulfill such function: when user click send button, will send message to server first

  • if success, then show message and clean the input
  • if fail, then not show meesage and not clean the input

Here is my code: `

const onSend = useCallback((messages = []) => {
    if (!messages) {
        return;
    }

    (async () => {
        for (let i = 0; i < messages.length; i++) {
            let uiMessage = messages[i];
            uiMessage.pending = true;
            const serverRes = await Http.messageSend(uiMessage.text);
            if (!serverRes) {
                // TODO  recover the input
                break;
            }
            setUIMessages(previousMessages => GiftedChat.append(previousMessages, [uiMessage]));
        }
    })();
}, [])

return (
    <GiftedChat
        ...
        onSend={messages => onSend(messages)}
        ...

`

Could anyone kindly tell me how to do with that recover input step? Or advise me some other suggestion. Thanks!

Additional Information

  • Nodejs version: windows 10, node v16.15.1
  • React version: 17.0.2
  • React Native version: 0.68.2
  • react-native-gifted-chat version: ^1.0.4
  • Platform(s) (iOS, Android, or both?): windows android simulator
  • TypeScript version: ~4.3.5

lvshuchengyin avatar Sep 11 '22 02:09 lvshuchengyin

you need to send the tempId of message to server

  1. If return true, find the tempId message and replace with server message
  2. If false, mark the message state is failed. Then display re-send button

For the not clean the button, based on UX, i need to clear input text every time user press send button, no matter where message send success/failed

fukemy avatar Sep 12 '22 04:09 fukemy