Fix Black Screen Transition Issue by Reusing didScreenTransitionEnd in MoneyRequestParticipantsSelector

src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js

@@ -17,6 +17,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import * as Report from '@libs/actions/Report';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
+import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -54,16 +55,16 @@ const propTypes = {
  /** The request type, ie. manual, scan, distance */
  iouRequestType: PropTypes.oneOf(_.values(CONST.IOU.REQUEST_TYPE)).isRequired,
 
- /** Whether we are searching for reports in the server */
- isSearchingForReports: PropTypes.bool,
+ /** Whether the parent screen transition has ended */
+ didScreenTransitionEnd: PropTypes.bool,
 };
 
 const defaultProps = {
  participants: [],
  safeAreaPaddingBottomStyle: {},
  reports: {},
  betas: [],
- isSearchingForReports: false,
+ didScreenTransitionEnd: false,
 };
 
 function MoneyTemporaryForRefactorRequestParticipantsSelector({
@@ -75,7 +76,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({
  safeAreaPaddingBottomStyle,
  iouType,
  iouRequestType,
- isSearchingForReports,
+ didScreenTransitionEnd,
 }) {
  const {translate} = useLocalize();
  const styles = useThemeStyles();
@@ -95,6 +96,9 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({
  */
  const [sections, newChatOptions] = useMemo(() => {
  const newSections = [];
+ if (!didScreenTransitionEnd) {
+ return [newSections, {}];
+ }
  let indexOffset = 0;
 
  const chatOptions = OptionsListUtils.getFilteredOptions(
@@ -169,7 +173,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({
  }
 
  return [newSections, chatOptions];
- }, [reports, personalDetails, betas, searchTerm, participants, iouType, iouRequestType, maxParticipantsReached, translate]);
+ }, [didScreenTransitionEnd, reports, personalDetails, betas, searchTerm, participants, iouType, iouRequestType, maxParticipantsReached, translate]);
 
  /**
  * Adds a single participant to the request
@@ -328,11 +332,13 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({
  [addParticipantToSelection, isAllowedToSplit, styles, translate],
  );
 
+ const isOptionsDataReady = useMemo(() => ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails), [personalDetails]);
+
  return (
  <View style={[styles.flex1, styles.w100, participants.length > 0 ? safeAreaPaddingBottomStyle : {}]}>
  <SelectionList
  onConfirm={handleConfirmSelection}
- sections={sections}
+ sections={didScreenTransitionEnd && isOptionsDataReady ? sections : CONST.EMPTY_ARRAY}
  textInputValue={searchTerm}
  textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
  textInputHint={offlineMessage}
@@ -341,7 +347,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({
  onSelectRow={addSingleParticipant}
  footerContent={footerContent}
  headerMessage={headerMessage}
- showLoadingPlaceholder={isSearchingForReports}
+ showLoadingPlaceholder={!(didScreenTransitionEnd && isOptionsDataReady)}
  rightHandSideComponent={itemRightSideComponent}
  />
  </View>
@@ -359,8 +365,4 @@ export default withOnyx({
  betas: {
  key: ONYXKEYS.BETAS,
  },
- isSearchingForReports: {
- key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS,
- initWithStoredValues: false,
- },
 })(MoneyTemporaryForRefactorRequestParticipantsSelector);

src/pages/iou/request/step/IOURequestStepParticipants.js

@@ -87,13 +87,16 @@ function IOURequestStepParticipants({
  testID={IOURequestStepParticipants.displayName}
  includeSafeAreaPaddingBottom
  >
- <MoneyRequestParticipantsSelector
- participants={participants}
- onParticipantsAdded={addParticipant}
- onFinish={goToNextStep}
- iouType={iouType}
- iouRequestType={iouRequestType}
- />
+ {({didScreenTransitionEnd}) => (
+ <MoneyRequestParticipantsSelector
+ participants={participants}
+ onParticipantsAdded={addParticipant}
+ onFinish={goToNextStep}
+ iouType={iouType}
+ iouRequestType={iouRequestType}
+ didScreenTransitionEnd={didScreenTransitionEnd}
+ />
+ )}
  </StepScreenWrapper>
  );
 }