Skip to content
This repository is currently being migrated. It's locked while the migration is in progress.

Created custom action sheet to replace expo action sheet library#13447

Open
matthew-df wants to merge 3 commits into
developfrom
task/13219-replaced-action-sheet
Open

Created custom action sheet to replace expo action sheet library#13447
matthew-df wants to merge 3 commits into
developfrom
task/13219-replaced-action-sheet

Conversation

@matthew-df
Copy link
Copy Markdown
Contributor

@matthew-df matthew-df commented May 11, 2026

There is no requirement to implement the suggestions but please respond to Copilot review comments in some way. Unaddressed comments will prevent the PR from moving to the QA process.

Description of Change

This updated replaces the expo action sheet npm package with a custom made action sheet instead. Content and visuals should be the same as before.

Target Release Date

Link to Issue

Closes #13219

Code testing

  • Unit tests have been created or updated to cover this change
  • End to end (Detox) tests have been added or updated as needed

Pre-QA Artifacts

Include all artifacts or select not applicable and explain below.

  • Screenshots or screen recording at factory default settings (before and after, if applicable) in portrait orientation
  • Screenshots in landscape orientation
  • Screenshots at 2x text size
  • Screen recording of interaction using VoiceOver (iOS) and/or TalkBack (Android)
  • Visual artifacts not applicable to this PR (explain why below)

Android Before

Screenshot_20260512_074039

Android After

Screenshot_20260512_071842 Screenshot_20260512_071918 Screenshot_20260512_071934 Screenshot_20260512_072014

iOS Before

IMG_1931

iOS After

IMG_1929 IMG_1930

Screen Reader

Screen_Recording_20260512_072144_VA.mp4
How to capture these

Screenshots & Video

2x text size

  • iOS Dynamic Type: Settings > Accessibility > Display & Text Size > Larger Text. Toggle ON, move slider.
  • Android Font Scale: Settings > Accessibility > Display size and text. Adjust Font size and Display size sliders.

VoiceOver / TalkBack (best on actual hardware)

Test Context for QA

How does a user get here?

Feature Flags

Risk Assessment:

  • Low (UI polish, copy change, isolated component)
  • Medium (New feature, non-core path)
  • High (Changes to Core Features: Login, Claims, Rx, Secure Messaging, major updates to a backend service, etc.)

What should QA pay extra attention to?

All action sheets. Content and order should should be the same as before. Visual difference should be minimal.

Test Review

Test User(s)


Checklist for QA

QA Engineer: Check off the items below as you test

  • Shared Test Script executed (post results as a PR comment)
  • Feature-specific verification based on QA Test Context above
  • Tested on iOS
  • Tested on Android

Run a build for this branch

Copilot AI review requested due to automatic review settings May 11, 2026 22:25
@matthew-df matthew-df requested a review from a team as a code owner May 11, 2026 22:25
@matthew-df matthew-df temporarily deployed to bypass-package-lock May 11, 2026 22:27 — with GitHub Actions Inactive
@flagship-mobile-app flagship-mobile-app Bot requested a review from a team May 11, 2026 22:27
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR replaces the @expo/react-native-action-sheet dependency with an in-repo ActionSheet implementation, wiring it into the app root and updating call sites/tests to use the new hook/provider.

Changes:

  • Removed @expo/react-native-action-sheet from dependencies/lockfiles and removed connectActionSheet usage.
  • Added components/ActionSheet (context/provider + useActionSheet) using ActionSheetIOS on iOS and a custom Modal on Android.
  • Updated useShowActionSheet and Jest mocks to import from components/ActionSheet.

Reviewed changes

Copilot reviewed 12 out of 14 changed files in this pull request and generated 6 comments.

Show a summary per file
File Description
VAMobile/package.json Removes @expo/react-native-action-sheet dependency.
VAMobile/yarn.lock Removes action sheet package entry / updates lockfile accordingly.
VAMobile/ios/Podfile.lock Updates iOS pod lockfile (includes react-native-webview version bump).
VAMobile/src/App.tsx Replaces Expo provider/HOC with in-app ActionSheetProvider placement.
VAMobile/src/utils/hooks/index.tsx Switches useActionSheet import and updates action sheet option typing.
VAMobile/src/components/index.ts Re-exports ActionSheet module from components barrel.
VAMobile/src/components/ActionSheet/ActionSheetContext.tsx New provider/context + Android modal implementation.
VAMobile/src/components/ActionSheet/useActionSheet.ts New hook to access ActionSheet context.
VAMobile/src/components/ActionSheet/index.ts New public exports for the ActionSheet module.
VAMobile/src/store/api/api.test.ts Updates Jest mock module path for useActionSheet.
VAMobile/src/screens/PaymentsScreen/Debts/DebtsScreen.test.tsx Updates Jest mock module path for useActionSheet.
VAMobile/src/screens/HealthScreen/SecureMessaging/StartNewMessage/Attachments/Attachments.test.tsx Updates Jest mock module path for useActionSheet.
VAMobile/src/screens/HealthScreen/Appointments/UpcomingAppointments/UpcomingAppointmentDetails.test.tsx Updates Jest mock module path for useActionSheet.
VAMobile/src/screens/BenefitsScreen/ClaimsScreen/ClaimDetailsScreen/ClaimStatus/ClaimFileUpload/SelectFile/SelectFile.test.tsx Updates Jest mock module path for useActionSheet.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread VAMobile/src/components/ActionSheet/ActionSheetContext.tsx Outdated
Comment thread VAMobile/src/components/ActionSheet/ActionSheetContext.tsx Outdated
Comment thread VAMobile/src/components/ActionSheet/ActionSheetContext.tsx
Comment thread VAMobile/src/components/ActionSheet/ActionSheetContext.tsx
Comment thread VAMobile/src/utils/hooks/index.tsx
Comment on lines +9 to +21
export interface ActionSheetOptions {
options: string[]
title?: string
message?: string
cancelButtonIndex?: number
destructiveButtonIndex?: number
userInterfaceStyle?: 'dark' | 'light'
titleTextStyle?: React.CSSProperties
messageTextStyle?: React.CSSProperties
textStyle?: React.CSSProperties
destructiveColor?: string
containerStyle?: React.CSSProperties
}
@flagship-mobile-app flagship-mobile-app Bot added the package-scan-complete npm package scanning complete label May 12, 2026
@matthew-df matthew-df deployed to bypass-package-lock May 12, 2026 14:55 — with GitHub Actions Active
@matthew-df matthew-df changed the title WIP: Created custom action sheet to replace expo action sheet library Created custom action sheet to replace expo action sheet library May 12, 2026
Copy link
Copy Markdown
Contributor

@rgdonovan rgdonovan left a comment

Choose a reason for hiding this comment

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

LGTM

@digitalken digitalken self-assigned this May 13, 2026
Copy link
Copy Markdown
Contributor

@digitalken digitalken left a comment

Choose a reason for hiding this comment

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

Approved.

2. Accessibility

Reference: Accessibility Testing Plan

  • All interactive elements are reachable and operable via VoiceOver (iOS)
  • All interactive elements are reachable and operable via TalkBack (Android)
  • Screen reader announces elements in a logical reading order
  • Headings are properly leveled (no skipped levels)
  • Actionable elements have meaningful accessible labels (no bare "Button", "Link", etc.)
  • Focus is managed correctly after navigation or modal dismiss
  • Color is not the sole means of conveying information

6. Platform Parity

  • Tested on iOS (simulator or device)
  • Tested on Android (emulator or device)
  • Behavior is consistent across platforms (or platform-specific behavior is intentional and documented)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package-scan-complete npm package scanning complete

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Replace React-Native-Action-Sheet with a homegrown component solution

4 participants