Fancy Action Sheet for React Native

Introduction

Fancy Action Sheet is a customizable, flexible (and better looking) action sheet component for React Native. This component is easy to integrate, highly customizable, and comes with support for both standard and destructive actions.

Installation

Install the package via NPM:

npm install fancy-action-sheet

..or via Yarn:

yarn add fancy-action-sheet

Dependencies

React Native

This package was created to be used exclusively with a React Native app project.

Specifically, this package requires the following peer dependencies to be installed in your project:

React: >=17.0.0 React Native: >=0.68.0

Since this package is used within a React Native project these depencencies should already be installed. ⚠️ Only install them manually if they are NOT already installed for some reason:

npm install react react-native

Usage

Wrap your app in the FancyActionSheetProvider and use the useFancyActionSheet hook to control the action sheet.

Basic Example

import React from 'react';
import { Button } from 'react-native';
import { FancyActionSheetProvider, useFancyActionSheet } from 'fancy-action-sheet';

const App = () => (
  <FancyActionSheetProvider>
    <HomeScreen />
  </FancyActionSheetProvider>
);

const HomeScreen = () => {
  const { showFancyActionSheet } = useFancyActionSheet();

  const handleShowActionSheet = () => {
    showFancyActionSheet({
      title: 'Choose an Option',
      message: 'Please select one of the options below:',
      options: [
        { id: '1', name: 'Option 1' },
        { id: '2', name: 'Option 2' },
        { id: '3', name: 'Delete' },
      ],
      destructiveOptionId: '3',
      onOptionPress: (option) => console.log(`Selected: ${option.name}`),
    });
  };

  return <Button title="Show Action Sheet" onPress={handleShowActionSheet} />;
};

export default App;

Configuration

Features

• Fully customizable styles for action sheet, buttons, and overlays.
• Support for both standard and destructive action buttons.
• Easy integration using React Context.
• Works seamlessly with React Native's modal system.

Reference links

• React Native

Contributing

Contributions are welcome! 🎉

• Submit Pull Requests: If you’ve improved the code or added new features, feel free to submit a pull request.
• Report Issues: Found a bug or want to suggest a feature? Open an issue on the GitHub Issues page.

About the author

Hi. I'm Kelvin Graddick also known as KG.codes. I'm a software developer / programmer, app + website developer, and content creator. I'm all about digital creation. Learn more about me on my website: KG.codes.

Support my work

Let’s connect! You can simply support my work by connecting on these platforms:

..or if you'd like to support monetarily:

Your support helps me dedicate more time to building useful open-source tools like this one. ❤️

License

This project is licensed under the MIT License.