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

What we build:

Create a Chat template with react-native-gifted-chat
Configure the Chat component as in a real project
Logic to set Reply message like in Telegram
Configure Swipe and Animation like in Telegram with
react-native-gesture-handler
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:

1. To get the currently opened swipe we are going to use ref:

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:

2. Create a callback function for updateRowRef prop:

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:

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

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.