fix(auth2): Remove KeyboardAvoidingView to get around iOS 17 bug #10896
Conversation
| animate={{ opacity: isModalExpanded ? 1 : 0 }} | ||
| transition={{ type: "timing", duration: 400, easing: Easing.linear }} | ||
| style={{ display: isModalExpanded ? "flex" : "none" }} | ||
| > |
There was a problem hiding this comment.
Just adds a little smooth transition between the social login options and the email only input step
| }} | ||
| style={{ | ||
| width: "100%", | ||
| backgroundColor: "white", |
There was a problem hiding this comment.
nit: backgroundColor: color("white100"),
There was a problem hiding this comment.
Will update in next pr, gonna send out a beta for this one.
| @@ -34,44 +36,40 @@ export const AuthModal: React.FC = ({ children }) => { | |||
| const translateY = (() => { | |||
There was a problem hiding this comment.
shouldn't we memoize it?
There was a problem hiding this comment.
much better, using useMemo i was like... on geez. Updated in here: #10898
| @@ -119,6 +116,7 @@ const LoginWelcomeStepForm: React.FC = () => { | |||
| autoCapitalize="none" | |||
| autoComplete="email" | |||
| autoCorrect={false} | |||
| blurOnSubmit={false} | |||
There was a problem hiding this comment.
I see most of the places you removed the Keyboard.dismiss and added this prop as false, can you explain what it does now? (just curious)
There was a problem hiding this comment.
Keeps the keyboard up, so that as we transition from screen to screen things aren't jumping around. Before it worked fine because we could use the keyboard avoiding view, and then use flexbox to vertically center in the screen. User would submit, keyboard would slide down, things would fetch, screen would transition. But with the quicktype bar, this broke the UX in a number of different ways. So now just keep things up and persistent from screen to screen.
There was a problem hiding this comment.
It doesn't feel as nice any more having everything at that fixed position, but at least it doesn't feel broken!
There was a problem hiding this comment.
it's a good compromise!
Description
This PR makes me 😢.
Basically, iOS 17 introduced a bug that is only seen on device around KeyboardAvoidingView and the QuickType bar (password autosuggest, etc) where it will flash and lead to UI positional instability. A way to reproduce it is by simply hitting backspace on the keyboard in an empty password field. With the keyboard avoiding view this would lead to a jump in the modal. It also manifested when transitioning between screens and the quicktype bar would appear and disappear depending on the input type. Its simply not passable. Typing fast would also trigger it!
See this github issue: facebook/react-native#39411
It impacts all platforms, including fully native apps.
Since we can't remove the password auto-fill functionality by hiding the quicktype bar, we need to compromise and wait for an iOS version update 😭.
Fix:
Remove the keyboard avoiding view and all form of dynamic positioning of the modal. Now, when the sign in/up flow begins we need to animate it to a fixed position at the top of the screen. When transitioning between inputs, nothing stirs. And yet, also, nothing is exactly positioned and centered anymore either, which was nice. All in all a minor compromise given the bug.
We can revisit this with later iOS updates.
Before (kinda captures it -- only reproducible on device, but you can see how the quicktype bar appears and hides changing screens -- how apply this to simply entering or backspacing text)
before.mp4
After:
after.mp4
Notice how in the after screencap the modal no longer shifts all around the screen? Passable.