Understanding Action Sheets in React Native
Action sheets are a fundamental UI pattern in mobile applications, providing users with a focused set of choices that appear from the bottom of the screen. In React Native development, implementing action sheets requires understanding both the native platform capabilities and the cross-platform approaches available to developers.
Whether you need simple confirmation dialogs or complex selection interfaces, action sheets serve as an essential component in your React Native toolkit. The platform offers multiple approaches, from native iOS APIs to third-party libraries, each with distinct advantages and trade-offs that developers must consider when building production-ready applications.
When to Use Action Sheets
Action sheets excel in specific use cases where presenting a focused set of options enhances user workflow:
-
Destructive action confirmations - Isolating delete or remove operations to prevent accidental data loss. For example, when a user attempts to delete a contact, an action sheet presents "Cancel" and "Delete" as distinct options, with "Delete" visually distinguished through red coloring and position. This pattern, recommended by Apple's Human Interface Guidelines, significantly reduces accidental data loss by creating a deliberate pause before irreversible actions.
-
Context-specific selections - Presenting options tied to a particular element or action. When users tap an attachment icon, an action sheet might reveal options for taking a photo, selecting from the gallery, or accessing documents. This keeps the interface clean while providing discoverable access to functionality without cluttering the primary screen with permanent buttons.
-
Secondary actions - Exposing functionality without cluttering the primary screen. Rather than hiding options in menus or settings, action sheets make them conveniently available while maintaining visual focus on primary content. This approach balances discoverability with interface simplicity.
These patterns work together with our mobile app development services to create cohesive user experiences across your entire application. For a deeper understanding of user-centered design principles, explore our comprehensive UX research guide to ensure your action sheets meet genuine user needs.
Native ActionSheetIOS API
React Native includes a built-in API for displaying iOS-native action sheets through the ActionSheetIOS module. This component leverages the platform's native UIKit UIActionSheet class, ensuring that iOS users receive an experience consistent with other applications on their device.
Key Methods
The API provides three primary methods:
showActionSheetWithOptions()- Display an action sheet with customizable optionsdismissActionSheet()- Programmatically hide the action sheetshowShareActionSheetWithOptions()- Present the native iOS share sheet
For detailed API documentation, refer to the React Native ActionSheetIOS reference.
1import { ActionSheetIOS } from 'react-native';2 3ActionSheetIOS.showActionSheetWithOptions(4 {5 options: ['Cancel', 'Delete', 'Share'],6 destructiveButtonIndex: 1,7 cancelButtonIndex: 0,8 tintColor: '#007AFF',9 userInterfaceStyle: 'dark',10 },11 (buttonIndex) => {12 if (buttonIndex === 1) {13 // Handle delete action14 } else if (buttonIndex === 2) {15 // Handle share action16 }17 }18);Building Custom Action Sheets with react-native-actions-sheet
The react-native-actions-sheet library provides a comprehensive solution for implementing action sheets in React Native applications. Unlike the native API, this library offers true cross-platform support with consistent behavior on both iOS and Android, extensive customization options, and a declarative component-based API that integrates naturally with React's rendering model.
Key Features
- Cross-platform support - Consistent behavior on iOS and Android
- Zero dependencies - Lightweight implementation without additional packages
- Component-based API - Natural integration with React's rendering model
- Global SheetManager - Simplify management across large applications
- Gesture support - Native-feeling swipe-to-dismiss interactions
- Keyboard handling - Automatic adjustment for on-screen keyboards
Explore the complete library capabilities in the react-native-actions-sheet documentation. For UI design best practices that complement these technical implementations, see our comprehensive UI design guide.
Everything you need for production-ready action sheets
Scrollable Content
Support for ScrollView and virtualized lists like FlashList for large option sets
Snap Points
Define multiple display positions for flexible user interactions
Keyboard Support
Automatic positioning when virtual keyboards appear
Safe Area Handling
Proper display on devices with notches and home indicators
Custom Animations
Bounce effects, spring configurations, and overlay styles
Background Interaction
Configurable overlay behavior and tap handling
Installation and Basic Setup
Getting started requires adding the package and wrapping your application with the SheetProvider component. This sets up the infrastructure needed for action sheets to function correctly across your application.
Install the package using your preferred package manager, then configure your app root to include the provider. The zero-dependency approach keeps your bundle size minimal while delivering full functionality.
1npm install react-native-actions-sheet2# or3yarn add react-native-actions-sheet1import { SheetProvider } from 'react-native-actions-sheet';2 3function App() {4 return (5 <SheetProvider>6 <YourMainComponent />7 </SheetProvider>8 );9}Creating Your First Action Sheet
Building a custom action sheet involves placing the ActionSheet component, attaching a ref for programmatic control, and populating it with content. This component-based approach allows unlimited flexibility in styling and functionality.
The ref-based pattern gives you complete control over the sheet's visibility and behavior, enabling seamless integration with your existing state management and navigation patterns. This approach works particularly well when action sheets need to respond to complex application state or user interactions.
1import React, { useRef } from 'react';2import { View, Text, Button, StyleSheet, TouchableOpacity } from 'react-native';3import ActionSheet, { ActionSheetRef } from 'react-native-actions-sheet';4 5function ExampleComponent() {6 const actionSheetRef = useRef<ActionSheetRef>(null);7 8 const showActionSheet = () => actionSheetRef.current?.show();9 const hideActionSheet = () => actionSheetRef.current?.hide();10 11 return (12 <View style={styles.container}>13 <Button title="Show Options" onPress={showActionSheet} />14 15 <ActionSheet16 ref={actionSheetRef}17 gestureEnabled={true}18 bounceOnOpen={true}19 overlayColor="rgba(0, 0, 0, 0.5)"20 >21 <View style={styles.sheetContent}>22 <Text style={styles.title}>Select an Option</Text>23 24 <TouchableOpacity style={styles.option} onPress={hideActionSheet}>25 <Text style={styles.optionText}>Edit</Text>26 </TouchableOpacity>27 28 <TouchableOpacity style={styles.option} onPress={hideActionSheet}>29 <Text style={styles.optionText}>Share</Text>30 </TouchableOpacity>31 32 <TouchableOpacity style={[styles.option, styles.destructive]} onPress={hideActionSheet}>33 <Text style={[styles.optionText, styles.destructiveText]}>Delete</Text>34 </TouchableOpacity>35 36 <TouchableOpacity style={styles.cancel} onPress={hideActionSheet}>37 <Text style={styles.cancelText}>Cancel</Text>38 </TouchableOpacity>39 </View>40 </ActionSheet>41 </View>42 );43}Advanced Customization and Features
Scrollable Content and List Integration
Action sheets frequently need to display lists that may exceed available screen space. The library supports standard ScrollView components and virtualized lists for large datasets, ensuring smooth performance even with extensive option sets.
For applications displaying hundreds of items, integration with virtualization libraries like FlashList enables performant scrolling without memory issues. This approach is essential for data-intensive applications like contact pickers or category selectors. See LogRocket's implementation guide for practical patterns.
For accessibility considerations when building scrollable interfaces, review our guide on making navigation menus better for UX which shares similar principles for accessible list interactions.
1import { ScrollView, TouchableOpacity } from 'react-native';2 3<ActionSheet ref={actionSheetRef}>4 <ScrollView style={styles.scrollContent}>5 {options.map((option, index) => (6 <TouchableOpacity7 key={index}8 style={styles.listOption}9 onPress={() => handleSelection(index)}10 >11 <Text style={styles.listOptionText}>{option.label}</Text>12 </TouchableOpacity>13 ))}14 </ScrollView>15</ActionSheet>Keyboard Handling and Safe Areas
Mobile applications must handle keyboard appearance gracefully. The library provides built-in handling for keyboard events, automatically adjusting the sheet's position when the keyboard appears. The keyboardShouldPersistTaps="handled" prop is essential when action sheets contain text inputs, ensuring that taps on input fields register correctly even while the keyboard is visible.
The library also respects device safe areas, ensuring that action sheets display properly on modern devices with notches, home indicators, and dynamic island displays. This automatic handling eliminates the need for manual calculations or conditional styling based on device type.
1<ActionSheet2 ref={actionSheetRef}3 keyboardShouldPersistTaps="handled"4 enableRouterBackHandler={true}5>6 <View style={styles.inputContainer}>7 <TextInput8 style={styles.textInput}9 placeholder="Enter your choice"10 onChangeText={setText}11 />12 <Button title="Submit" onPress={handleSubmit} />13 </View>14</ActionSheet>Gesture Control and Animations
Modern mobile interfaces rely on gesture interactions. The library provides gesture support allowing users to dismiss action sheets by swiping down. Configure gesture behavior using gestureEnabled to enable swipe-to-dismiss, bounceOnOpen for a subtle bounce effect when the sheet appears, springOffset to control the bounce distance, and defaultOverlayOpacity to adjust the darkness of the background overlay.
These animation and gesture options enable you to fine-tune the tactile feel of action sheets to match platform conventions or brand guidelines, creating a polished and professional user experience.
1<ActionSheet2 ref={actionSheetRef}3 gestureEnabled={true}4 bounceOnOpen={true}5 springOffset={50}6 defaultOverlayOpacity={0.4}7>8 {/* Content */}9</ActionSheet>Using SheetManager for Global Control
For applications with multiple action sheets, managing refs can become complex. The SheetManager utility provides a global approach to action sheet management, eliminating the need for refs while enabling action sheet control from anywhere in your application.
Registering and Displaying Sheets Globally
The SheetManager approach involves registering action sheets with unique identifiers and displaying them through the manager rather than local refs. This pattern proves particularly valuable in larger applications where action sheets might be triggered from deeply nested components or different modules.
This global approach also simplifies data passing between components. Rather than managing complex prop drilling or context, you can pass data when displaying the sheet and access it through the useSheetPayload hook within the action sheet component. Combined with our React Native development expertise, this pattern enables scalable action sheet architectures. For understanding component architecture patterns, explore our guide on designing social interfaces.
1import { registerSheet, SheetManager } from 'react-native-actions-sheet';2 3// Register a sheet globally4registerSheet('example-sheet', ExampleSheetComponent);5 6// Display the sheet from anywhere7SheetManager.show('example-sheet', {8 payload: { /* data to pass */ }9});10 11// Hide the sheet12SheetManager.hide('example-sheet');Best Practices for Action Sheet Design
Creating effective action sheets requires attention to both functional and visual design:
-
Focused content - Keep action sheets limited to a single task or decision. Presenting too many options creates cognitive load and reduces usability. When options naturally group into categories, consider using multiple action sheets or alternative navigation patterns.
-
Clear visual hierarchy - Distinguish primary actions from destructive operations through color, positioning, and typography. Consistent use of these visual cues helps users quickly identify options and reduces accidental selections.
-
Consistent positioning - The cancel button should always remain in a consistent position, typically at the bottom of the sheet, to serve as a reliable escape path users can trust.
-
Accessibility - Proper labels, touch targets (44pt minimum), and screen reader support ensure action sheets work for all users. Test with VoiceOver on iOS and TalkBack on Android to verify accessibility.
Following these patterns ensures action sheets feel natural to users while providing clear, accessible interfaces that enhance rather than hinder your application's usability. For broader accessibility guidelines, learn about addressing accessibility concerns with fluid type.
Frequently Asked Questions
What is the difference between action sheets and modals?
Action sheets are designed for quick, decisive interactions with limited options, while modals typically display more complex content and can contain entire views or forms.
Can react-native-actions-sheet be used with Expo?
Yes, the library works with both Expo and vanilla React Native projects without any special configuration.
How do I pass data to a global action sheet?
Use the payload parameter in SheetManager.show() and access it with the useSheetPayload hook within the action sheet component.
Is keyboard handling automatic?
The library provides automatic keyboard handling, but you should configure keyboardShouldPersistTaps for input fields within action sheets.
Conclusion
Building custom React Native action sheets requires understanding the trade-offs between native APIs and cross-platform solutions. While the native ActionSheetIOS API provides straightforward iOS implementation, its limitations make it unsuitable for production cross-platform applications.
Third-party libraries like react-native-actions-sheet offer the flexibility, consistency, and features needed for polished mobile experiences. Key considerations include:
- Simple applications - Use the library's basic component approach with local refs
- Complex applications - Leverage the global SheetManager pattern for scalable management
- Always prioritize - Styling, accessibility, and user experience patterns
By mastering these techniques, developers can create action sheets that provide seamless, intuitive interactions across all supported platforms. These patterns integrate naturally with broader mobile UX design principles to deliver cohesive, professional applications.
Ready to implement action sheets in your React Native application? Our development team can help you build polished, cross-platform mobile experiences that delight users. For teams looking to streamline their development workflow, explore our guide on building with Gulp to optimize your build processes.