Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: KeyboardAvoidingView with secureTextEntry #331

Merged
merged 3 commits into from
Jan 15, 2024

Conversation

kirillzyusko
Copy link
Owner

@kirillzyusko kirillzyusko commented Jan 12, 2024

馃摐 Description

Fixed choppy animation for KeyboardAvoidingView if child TextInputs are using secureTextEntry property.

馃挕 Motivation and Context

The problem which causes jumpy behavior is hidden in fact, that 2 keyboardWillShow + keyboardWillHide events are emitted instead of a single one. If we add logger we'll see:

onStart height 291
onEnd   height 291
onStart height 336
... // onMove
onEnd   height 336

And such events are very similar to what happens on Android when keyboard gets resized. So basically fix consist from two parts.

Part 1锔忊儯

In useKeyboardInterpolation we are not using Android specific interpolation and are using "progress"-based animation (interpolation between current keyboard frame and final keyboard frame). It allows us to have positive value and make animation smooth. However is some cases we may see a jump occurring for one frame, and for that we apply second fix.

Part 2锔忊儯

In second part we are handling "unnecessary" onEnd event. Before we were simply updating height/progress values in onEnd handler - it was needed to handle cases when onMove handler is not called but we still need to synchronize the state.

In this PR I slightly re-worked approach and now I'm updating it only if duration === 0 (i. e. transition was instant).

Closes #327

馃摙 Changelog

JS

  • use "progress"-based interpolation for iOS in useKeyboardInterpolation;
  • update values in onEnd only if duration is 0.

馃 How Has This Been Tested?

Tested on iPhone 15 Pro.

馃摳 Screenshots (if appropriate):

Before After
Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-01-12.at.23.15.49.mp4
Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-01-12.at.23.13.11.mp4

馃摑 Checklist

  • CI successfully passed
  • I added new mocks and corresponding unit-tests if library API was changed

@kirillzyusko kirillzyusko added 馃悰 bug Something isn't working 馃崕 iOS iOS specific 馃摎 components Anything related to the exported components of this library labels Jan 12, 2024
@kirillzyusko kirillzyusko self-assigned this Jan 12, 2024
Copy link
Contributor

github-actions bot commented Jan 12, 2024

馃搳 Package size report

Current size Target Size Difference
113786 bytes 112819 bytes 967 bytes 馃搱

@kirillzyusko kirillzyusko changed the title fix: KeyboardAvoidingView with secureTextEntry fix: KeyboardAvoidingView with secureTextEntry Jan 12, 2024
@kirillzyusko kirillzyusko marked this pull request as ready for review January 15, 2024 08:15
@kirillzyusko kirillzyusko merged commit ceb6bfd into main Jan 15, 2024
6 checks passed
@kirillzyusko kirillzyusko deleted the fix/327-old-ios-interpolation-mechanism branch January 15, 2024 08:15
@kirillzyusko kirillzyusko added the KeyboardAvoidingView 馃И Anything related to KeyboardAvoidingView component label May 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
馃悰 bug Something isn't working 馃摎 components Anything related to the exported components of this library 馃崕 iOS iOS specific KeyboardAvoidingView 馃И Anything related to KeyboardAvoidingView component
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[IOS] Incorrect behavior of hooks and components when focusing on an input with secureTextEntry enabled.
1 participant