From f30f900eca4c0f550bf7593d686ebd0bce7e678f Mon Sep 17 00:00:00 2001 From: Jan Nowakowski Date: Fri, 6 Dec 2024 11:50:49 +0100 Subject: [PATCH 1/5] Fix badly posiotioned screen with autofocus --- src/pages/home/ReportScreen.tsx | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index 026e07a786ce..b8b59885375f 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -854,20 +854,18 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro )} - {isCurrentReportLoadedFromOnyx ? ( - - ) : null} + From e02a77020c278c399ada7237e3c7e79f722a7a8f Mon Sep 17 00:00:00 2001 From: Jan Nowakowski Date: Tue, 10 Dec 2024 12:03:01 +0100 Subject: [PATCH 2/5] Fix crash when navigating to not existing chat --- src/pages/home/ReportScreen.tsx | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index 071c51399856..f7cdc21ccb8d 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -854,18 +854,20 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro )} - + {!shouldShowSkeleton && ( + + )} From 09d288f97722decadc03e0185b2c8aedb2a390eb Mon Sep 17 00:00:00 2001 From: Jan Nowakowski Date: Tue, 17 Dec 2024 11:06:56 +0100 Subject: [PATCH 3/5] Workaround for keyboard issue --- .../Composer/implementation/index.native.tsx | 15 +++++++++++++-- src/pages/home/ReportScreen.tsx | 4 ++-- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/src/components/Composer/implementation/index.native.tsx b/src/components/Composer/implementation/index.native.tsx index cea339de07e2..7c7e451021e0 100644 --- a/src/components/Composer/implementation/index.native.tsx +++ b/src/components/Composer/implementation/index.native.tsx @@ -3,7 +3,7 @@ import mimeDb from 'mime-db'; import type {ForwardedRef} from 'react'; import React, {useCallback, useEffect, useMemo, useRef} from 'react'; import type {NativeSyntheticEvent, TextInput, TextInputChangeEventData, TextInputPasteEventData} from 'react-native'; -import {StyleSheet} from 'react-native'; +import {Platform, StyleSheet} from 'react-native'; import type {FileObject} from '@components/AttachmentModal'; import type {ComposerProps} from '@components/Composer/types'; import type {AnimatedMarkdownTextInputRef} from '@components/RNMarkdownTextInput'; @@ -127,6 +127,17 @@ function Composer( const maxHeightStyle = useMemo(() => StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize), [StyleUtils, isComposerFullSize, maxLines]); const composerStyle = useMemo(() => StyleSheet.flatten([style, textContainsOnlyEmojis ? styles.onlyEmojisTextLineHeight : {}]), [style, textContainsOnlyEmojis, styles]); + /* + There are cases in hybird app on android that screen goes up when there is autofocus on keyboard. (e.g. https://github.com/Expensify/App/issues/53185) + Workaround for this issue is to maunally focus keyboard after it's acutally rendered. + */ + useEffect(() => { + if (!autoFocus || Platform.OS !== 'android') { + return; + } + setTimeout(() => textInput.current?.focus(), 5); + }, [autoFocus]); + return ( )} - {!shouldShowSkeleton && ( + {isCurrentReportLoadedFromOnyx ? ( - )} + ) : null} From 497c365bee31e453139122caa0c09bf65b0b32b3 Mon Sep 17 00:00:00 2001 From: Jan Nowakowski Date: Tue, 17 Dec 2024 12:27:13 +0100 Subject: [PATCH 4/5] Don't add unnecessary effects --- .../Composer/implementation/index.native.tsx | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/src/components/Composer/implementation/index.native.tsx b/src/components/Composer/implementation/index.native.tsx index 7c7e451021e0..28ef87bab331 100644 --- a/src/components/Composer/implementation/index.native.tsx +++ b/src/components/Composer/implementation/index.native.tsx @@ -127,17 +127,6 @@ function Composer( const maxHeightStyle = useMemo(() => StyleUtils.getComposerMaxHeightStyle(maxLines, isComposerFullSize), [StyleUtils, isComposerFullSize, maxLines]); const composerStyle = useMemo(() => StyleSheet.flatten([style, textContainsOnlyEmojis ? styles.onlyEmojisTextLineHeight : {}]), [style, textContainsOnlyEmojis, styles]); - /* - There are cases in hybird app on android that screen goes up when there is autofocus on keyboard. (e.g. https://github.com/Expensify/App/issues/53185) - Workaround for this issue is to maunally focus keyboard after it's acutally rendered. - */ - useEffect(() => { - if (!autoFocus || Platform.OS !== 'android') { - return; - } - setTimeout(() => textInput.current?.focus(), 5); - }, [autoFocus]); - return ( Date: Thu, 19 Dec 2024 12:03:22 +0100 Subject: [PATCH 5/5] Use getPlatform instead Platform.OS --- src/components/Composer/implementation/index.native.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Composer/implementation/index.native.tsx b/src/components/Composer/implementation/index.native.tsx index 28ef87bab331..0cddb32f5aeb 100644 --- a/src/components/Composer/implementation/index.native.tsx +++ b/src/components/Composer/implementation/index.native.tsx @@ -3,7 +3,7 @@ import mimeDb from 'mime-db'; import type {ForwardedRef} from 'react'; import React, {useCallback, useEffect, useMemo, useRef} from 'react'; import type {NativeSyntheticEvent, TextInput, TextInputChangeEventData, TextInputPasteEventData} from 'react-native'; -import {Platform, StyleSheet} from 'react-native'; +import {StyleSheet} from 'react-native'; import type {FileObject} from '@components/AttachmentModal'; import type {ComposerProps} from '@components/Composer/types'; import type {AnimatedMarkdownTextInputRef} from '@components/RNMarkdownTextInput'; @@ -16,6 +16,7 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import * as EmojiUtils from '@libs/EmojiUtils'; import * as FileUtils from '@libs/fileDownload/FileUtils'; +import getPlatform from '@libs/getPlatform'; import CONST from '@src/CONST'; const excludeNoStyles: Array = []; @@ -144,7 +145,7 @@ function Composer( // There are cases in hybird app on android that screen goes up when there is autofocus on keyboard. (e.g. https://github.com/Expensify/App/issues/53185) // Workaround for this issue is to maunally focus keyboard after it's acutally rendered which is done by useAutoFocusInput hook. // */ - autoFocus={Platform.OS !== 'android' ? autoFocus : false} + autoFocus={getPlatform() !== 'android' ? autoFocus : false} /* eslint-disable-next-line react/jsx-props-no-spreading */ {...props} readOnly={isDisabled}