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
Open
Created custom action sheet to replace expo action sheet library#13447matthew-df wants to merge 3 commits into
matthew-df wants to merge 3 commits into
Conversation
Contributor
There was a problem hiding this comment.
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-sheetfrom dependencies/lockfiles and removedconnectActionSheetusage. - Added
components/ActionSheet(context/provider +useActionSheet) usingActionSheetIOSon iOS and a customModalon Android. - Updated
useShowActionSheetand Jest mocks to import fromcomponents/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 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 | ||
| } |
digitalken
approved these changes
May 13, 2026
Contributor
digitalken
left a comment
There was a problem hiding this comment.
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)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
Pre-QA Artifacts
Include all artifacts or select not applicable and explain below.
Android Before
Android After
iOS Before
iOS After
Screen Reader
Screen_Recording_20260512_072144_VA.mp4
How to capture these
Screenshots & Video
2x text size
Settings > Accessibility > Display & Text Size > Larger Text.Toggle ON, move slider.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:
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
Run a build for this branch