Unlock the Power of Action Sheets in React Native

What are Action Sheets?

Action sheets are a vital component in mobile app development, allowing users to interact with your app in a more intuitive way. By using the react-native-action-sheet module, we can create an iOS-like action sheet in React Native that’s both customizable and user-friendly.

Getting Started with Expo

To begin, let’s initialize our project using Expo. Run the following terminal command and choose the “minimal” option:

npx expo init my-app

Then, install the react-native-action-sheet package using npm or yarn:

npm install react-native-action-sheet

yarn add react-native-action-sheet

Building a Basic Action Sheet

Create a new file called ActionButton.js and add the following code to render a simple Button component:

import React from 'eact';
import { Button, View } from 'eact-native';

const ActionButton = () => {
  return (
    
      
    
  );
};

export default ActionButton;

Replace the code in App.js with the ActionButton module, and wrap your components within ActionSheetProvider tags. This tells React that our app will consist of an action sheet:

import React from 'eact';
import { ActionSheetProvider } from 'eact-native-action-sheet';
import ActionButton from './ActionButton';

const App = () => {
  return (
    
      
    
  );
};

export default App;

Connecting to the Action Sheet API

To connect React Native’s action sheet API with our project, append the following code snippet in ActionSheet.js:

import React, { useState } from 'eact';
import { useActionSheet } from 'eact-native-action-sheet';

const ActionSheet = () => {
  const [options, setOptions] = useState([
    { title: 'Option 1' },
    { title: 'Option 2' },
    { title: 'Option 3' },
  ]);

  const showSheet = useActionSheet();

  const handlePress = () => {
    showSheet({
      options,
      cancelButtonIndex: 2,
      destructiveButtonIndex: 0,
      onPress: (buttonIndex) => {
        console.log(`Button index ${buttonIndex} pressed`);
      },
    });
  };

  return (
    
      
    
  );
};

export default ActionSheet;

Customizing Your Action Sheets

Want to take your action sheets to the next level? Learn how to alter the look and feel of your action sheet by:

• Displaying icons using the icons property
• Adding images instead of icons
• Using the title and message arguments to display a title or message within your menu
• Applying custom CSS styles using textStyle, titleTextStyle, containerStyle, and seperatorStyle

Try out the associated Expo Snack for this project and start building your own action sheets today!