I would like to to remove Ref before leaving the screen in React / React native because it causes keyboard flickering on navigating back.
My code is:
// To focus on the input field when the page loads
const privateNotesInput = useRef<AnimatedTextInputRef | null>(null);
const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
useHtmlPaste(privateNotesInput);
useFocusEffect(
useCallback(() => {
focusTimeoutRef.current = setTimeout(() => {
if (privateNotesInput.current) {
privateNotesInput.current.focus();
}
return () => {
if (!focusTimeoutRef.current) {
return;
}
clearTimeout(focusTimeoutRef.current);
};
}, CONST.ANIMATED_TRANSITION);
}, []),
);
<InputWrapper
InputComponent={TextInput}
role={CONST.ROLE.PRESENTATION}
inputID={INPUT_IDS.PRIVATE_NOTES}
label={translate('privateNotes.composerLabel')}
accessibilityLabel={translate('privateNotes.title')}
autoCompleteType="off"
maxLength={CONST.MAX_COMMENT_LENGTH}
autoCorrect={false}
autoGrowHeight
containerStyles={[styles.autoGrowHeightMultilineInput]}
defaultValue={privateNote}
value={privateNote}
onChangeText={(text: string) => {
debouncedSaveNote(text);
setNote(text);
}}
ref={(el: AnimatedTextInputRef) => {
if (!el) {
return;
}
privateNotesInput.current = el;
updateMultilineInputRange(privateNotesInput.current);
}}
/>
If someone knows how to solve it then please let me know. Thanks