React Native Chat 2022. Reply on Swipe like in Telegram. Part 2 – Telegram 中文版

Telegram

React Native Chat 2022. Reply on Swipe like in Telegram. Part 2

  1. Create a Chat template with react-native-gifted-chat
  2. Configure the Chat component as in a real project
  3. Logic to set Reply message like in Telegram
  4. Configure Swipe and Animation like in Telegram with
    react-native-gesture-handler
  5. The final touches — useRef + useCallback

Step 5. The final touches — useRef + useCallback

.

Last time we created Swipe with Animation (please, read the 1st part):

The problem here is that we need to click on the message to close swipe, but in Telegram, it closes itself.

We can do auto close in that way:

The ref attribute can be an object created by React.createRef() function or a callback function, or a string (in legacy API).

We do a callback function, that we will pass through props:

ChatMessageBox.tsx’ file
ChatMessageBox.tsx’ file

a) First, we create a special object with useRef hook (in the ‘AppChat.tsx’ file) where we are going to store a link to the currently opened swipe element:

AppChat.tsx’ file

b) Second, create updateRowRef function and save the currently opened Swipeable element into the swipeableRowRef object:

AppChat.tsx’ file

useCallback is MUST here because we will have a lot of messages in future and we want one function to be used for all of the message boxes.

If you remove useCallback and run your app on a real device you will see that Animation and Chat work very slow and buggy.

c) Update renderMessageBox function — pass the updateRowRef to ChatMessageBox:

AppChat.tsx’ file
AppChat.tsx’ file

Now, we do not need to click on boxes to close them:

Great!

You can take the full code here

Extra: render the replied message

.

1. Add custom type for Message record:

AppChat.tsx’ file

2. Update onSend function — add replied message text to current message:

AppChat.tsx’ file

3. Create a new render function for replied messages in a message box:

AppChat.tsx’ file
AppChat.tsx’ file

4. Pass a new render function to the chat component:

Final result:

The full code is available here

If you like the article, you can support me by clapping below👏🏻
Thank you!

Ten articles before and after

AMA with Konstellation. On the 8th of April, 2022 at 02:00 PM… – Telegram 中文版

data-rh=”true”>Six recent themes, archived and indexed for your ~~clicking~~ pleasure. – David Blue – Medium – Telegram 中文版

Post new Discord messages on Telegram. – Telegram 中文版

data-rh=”true”>https://t.me/childrensaidtoken_botChildren’s Aid Token – Yusuffbot – Medium – Telegram 中文版

data-rh=”true”>EasyCrypto – Yusuffbot – Medium – Telegram 中文版

AMA with TooNFT. On the 19th of April, 2022 at 10:00… – Telegram 中文版

Bot Telegram. Por Prensa Glufco – Telegram 中文版

Notify Monit alerts to Telegram. Monit is an open-source tool for… – Telegram 中文版

data-rh=”true”>Useful Telegram Bot you should care – Moblize.IT LLC – Medium – Telegram 中文版

New Pangolin Telegram Group Explained – Telegram 中文版

About Me

Pretium lorem primis senectus habitasse lectus donec ultricies tortor adipiscing fusce morbi volutpat pellentesque consectetur risus curae malesuada dignissim lacus convallis massa mauris.