Details
Tested this diff stack by playing around with ChatInputBar on both iOS simulator and Android device:
- focus the text input and verify the keyboard is up and the camera buttons are animated correctly
- try to send the message, verify the send button is animated correctly
- verify the text input can be unfocused and keyboard is hidden
- verify the draft works: write text, navigate from the chat, navigate into the chat again, verify the text is kept and the $
- verify the edit mode works by editing a message
- try to close the chat while editing a message - the alert should be shown
- try to join a thread
- try to select typed text
Diff Detail
- Repository
- rCOMM Comm
- Lint
Lint Not Applicable - Unit
Tests Not Applicable
Event Timeline
Removing from my queue
(In the future, you can hit "Plan Changes" after a rebase update to keep a diff with requested changes on your queue instead of sending it back to your reviewers' queue)
| native/chat/chat-input-bar.react.js | ||
|---|---|---|
| 419–442 ↗ | (On Diff #46078) | Before we were starting the animation by setting targetExpandoButtonsOpen. Here if targetExpandoButtonsOpen changes, we stop the animation and if there is something to animate (expandoButtonsOpen != targetExpandoButtonsOpen) in runTiming reset the value to expandoButtonsOpen and start the animation. If targetExpandoButtonsOpen doesn't change, then continue the animation. After the refactor, we trigger the animation by setting expandoButtonsOpen to the target value with withTiming. The only difference in behaviour is when we call withTiming with the same target value before previous animation ends but it's hardly possible and noticeable in this case because user would have to expand buttons before state is updated and even then the animation barely started. The same applies to sendButtonContainerWidth. The rest of the changes are straightforward: interpolating the values works exactly the same and instead of memoizing styles with nodes we use useAnimatedStyle. |
Great work on this! The conversion from Reanimated 1 to Reanimated 2/3 appears perfect, and the changes between them are pretty unavoidable without introducing a bunch of unnecessary complexity
| native/chat/chat-input-bar.react.js | ||
|---|---|---|
| 419–442 ↗ | (On Diff #46078) |
I think there is also a difference when calling withTiming with a different target value before the previous animation ends. Basically the difference appears to be that any animation will take 150ms from where it starts, rather than the animation takes 150ms from 0 to 1. In the old system, if the animation is halfway through and flips, it will take 75ms to finish. And it would take the same 75ms if the animation is "restarted" (target value set to the same value it already has... which is basically a no-op). In contrast, in the new system, in both cases it would take 150ms, and as a result the animation would be twice as slow. |