React Native Actions Sheet Not Working with Expo Router

[rafaelbarross]

React Native Actions Sheet Not Working with Expo Router

Problem Description

The react-native-actions-sheet library is not functioning properly when used with Expo Router in app directory structure. Sheets registered with registerSheet are not displaying when triggered via SheetManager.show().

Environment

• Expo SDK: Latest version
• Expo Router: Using app directory structure
• react-native-actions-sheet: Latest version
• React Native: Latest version compatible with Expo

Reproduction Steps

1. Set up an Expo app with app router structure
2. Register sheets using registerSheet in a sheets.tsx file
3. Import sheets.tsx in the root _layout.tsx file
4. Wrap the app with SheetProvider in the root layout
5. Attempt to show a sheet using SheetManager.show()

Expected Behavior

The registered sheet should display when SheetManager.show() is called.

Actual Behavior

No sheet appears when SheetManager.show() is called. No visible error is shown in the console, but the action sheet fails to render.

Potential Causes

1. Context Isolation: Expo Router creates isolated contexts for different parts of the navigation tree. This may be preventing the SheetProvider context from being accessible across the application.

2. Multiple Provider Instances: The app directory structure might be causing multiple instances of SheetProvider to be created, causing context conflicts.

3. Navigation Framework Interference: The combination of drawer navigation, tab navigation, and stack navigation with Expo Router might be interfering with the proper mounting of action sheets.

4. Component Lifecycle Issues: The lifecycle of components in the app router structure may not align with the expectations of react-native-actions-sheet.

Suggested Solutions to Try

1. Move all sheet-related code to a separate component that's mounted directly under the root provider
2. Try using the legacy @react-navigation/native directly instead of Expo Router for specific sections
3. Investigate using a different modal solution that's more compatible with Expo Router
4. Consider creating a custom implementation of action sheets using the standard React Native Modal component
5. Check for compatibility issues between the latest versions of all libraries involved

Additional Notes

This issue appears to be specific to the combination of Expo Router app directory structure and react-native-actions-sheet. It may be a deeper architectural issue related to how React contexts work with the nested navigation structure of Expo Router.