Skip to content
Draft
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion src/components/FullScreenLoaderContext.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, {createContext, useContext, useState} from 'react';
import type {ReactNode} from 'react';
import {StyleSheet, View} from 'react-native';
import FullScreenLoadingIndicator from './FullscreenLoadingIndicator';

type FullScreenLoaderStateContextType = {
Expand Down Expand Up @@ -50,7 +51,14 @@ function FullScreenLoaderContextProvider({children}: FullScreenLoaderContextProv
<FullScreenLoaderActionsContext.Provider value={actionsContextValue}>
<FullScreenLoaderStateContext.Provider value={stateContextValue}>
{children}
{isLoaderVisible && <FullScreenLoadingIndicator />}
{isLoaderVisible && (
<View
pointerEvents="none"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@MelvinBot can you confirm there's no side effect of this on all platforms?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I investigated the cross-platform impact. The pointerEvents="none" change is safe across all platforms:

Cross-platform behavior:

  • iOS/Android (native): The RN View prop pointerEvents="none" prevents the view and all its descendants from being touch targets. Well-documented RN behavior.
  • Web (React Native Web): Translates to CSS pointer-events: none — same effect, well-supported in all modern browsers.

Why it's safe for all current usage:
All consumers of the full-screen loader (IOURequestStepScan, IOURequestStepOdometerImage, AttachmentPickerWithMenuItems, and useFilesValidation) use it purely as a visual indicator during transitions where no user interaction with the React Native layer is expected — either a native picker is open above the RN view hierarchy, or background file processing (HEIC conversion) is running.

One latent concern (not currently triggered):
FullScreenLoadingIndicator supports a shouldUseGoBackButton prop that renders a tappable "Go Back" button after a timeout. This prop is not passed in the context provider (defaults to false), so it's not an issue today. If someone were to add it in the future, the button would be unreachable due to pointerEvents="none". But that would require an intentional code change and would be caught in review.

No regressions expected on Android, web, or iOS.

style={StyleSheet.absoluteFillObject}
>
<FullScreenLoadingIndicator />
</View>
)}
</FullScreenLoaderStateContext.Provider>
</FullScreenLoaderActionsContext.Provider>
);
Expand Down
Loading