Skip to content

Commit 5798cf2

Browse files
janicduplessisfacebook-github-bot
authored andcommitted
Remove requestAnimationFrame when focusing input on mount (#27217)
Summary: When using `react-native-screen` which uses native view controller animations for navigation `TextInput` with `autoFocus` causes a weird animation glitch. Removing the requestAnimationFrame will cause the focus command to be sent in the same batch as starting screen transitions which fixes the issue. It is unclear why the rAF was added in the first place as it was part of the initial RN open source commit. If someone at facebook has more context that would be great to make sure it doesn't cause unintended side effects. Credits to kmagiera for figuring out this ## Changelog [General] [Fixed] - Remove requestAnimationFrame when focusing input on mount Pull Request resolved: #27217 Test Plan: - Tested in an app using react-native-screen to make sure the animation glitch is fixed - Tested in RNTester to make sure it doesn't cause other issues when not using react-native-screens Before: ![1](https://user-images.githubusercontent.com/2677334/68799447-2ce5c100-0626-11ea-8310-a9ac9e9419b6.gif) After: ![2](https://user-images.githubusercontent.com/2677334/68799450-2fe0b180-0626-11ea-865f-ef88f7307831.gif) Differential Revision: D18666991 Pulled By: TheSavior fbshipit-source-id: 66664c89e06c9ae65074ddcc4688dc5109fc9c72
1 parent d0ed215 commit 5798cf2

File tree

1 file changed

+14
-3
lines changed

1 file changed

+14
-3
lines changed

Libraries/Components/TextInput/TextInput.js

+14-3
Original file line numberDiff line numberDiff line change
@@ -702,14 +702,25 @@ function useFocusOnMount(
702702
// Since initialAutoFocusValue and inputRef will never change
703703
// this should match the expected behavior
704704
if (initialAutoFocusValue.current) {
705-
const rafId = requestAnimationFrame(() => {
705+
const focus = () => {
706706
if (inputRef.current != null) {
707707
inputRef.current.focus();
708708
}
709-
});
709+
};
710+
711+
let rafId;
712+
if (Platform.OS === 'android') {
713+
// On Android this needs to be executed in a rAF callback
714+
// otherwise the keyboard opens then closes immediately.
715+
rafId = requestAnimationFrame(focus);
716+
} else {
717+
focus();
718+
}
710719

711720
return () => {
712-
cancelAnimationFrame(rafId);
721+
if (rafId != null) {
722+
cancelAnimationFrame(rafId);
723+
}
713724
};
714725
}
715726
}, [initialAutoFocusValue, inputRef]);

0 commit comments

Comments
 (0)