DOCSEARCHbyAlgolia
Submit Docs

react-native-actions-sheet

repository·master·Indexed 24 days ago

https://github.com/ammarahm-ed/react-native-actions-sheet

A cross-platform (Android & iOS) ActionSheet for React Native featuring a flexible API, native performance, and zero dependencies. It supports highly customizable bottom sheets, background interaction for persistent UIs, and integration with @shopify/flash-list and @legendapp/list. Version 10.1.2 utilizes react-native-reanimated and react-native-safe-area-context for animations and layout.

Tokens
23.1K
Snippets
49
Records
127
Agent score
80%

What's inside react-native-actions-sheet

  1. Overview of react-native-actions-sheet

    master

    react-native-actions-sheet

    react-native-actions-sheet is a cross-platform (Android, iOS, and Web) ActionSheet library for React Native. It is designed to provide native performance with zero dependencies, allowing developers to render any custom content inside the sheet.

    Key Features:

    • Cross-platform support: Works on iOS, Android, and Web.
    • Native Performance: Uses native animations and gestures.
    • High Flexibility: A "Raw ActionSheet" approach allows you to add any component inside.
    • Advanced UI Support: Supports snap points, ScrollViews, and virtualization.
    • Input Handling: Supports TextInputs and keyboard interactions.
    • Device Compatibility: Works on tablets, iPads, and within Expo projects.
    • Management: Includes a Global SheetManager for controlling sheets.
    • Interaction: Supports background interaction settings.

  2. How the ActionSheet router works

    master

    The ActionSheet router allows for navigation between different screens (routes) within a single ActionSheet instance. Instead of opening and closing multiple separate ActionSheets to handle different user flows, you can use a single ActionSheet that swaps its content based on the active route. It functions similarly to standard navigation routers in React Native applications.

    // Concept: One ActionSheet instance managing multiple views via routes
<ActionSheet
  routes={routes}
  initialRoute="route-a"
/>

  7. Enable scrolling for external components using useScrollHandlers

    master

    For scrollable components not provided by the library (such as WebView or DatePicker), you must manually coordinate gestures. Use the useScrollHandlers hook from react-native-actions-sheet to get gesture handlers, and wrap your component in a NativeViewGestureHandler from react-native-gesture-handler. Pass the simultaneousHandlers from the hook to the NativeViewGestureHandler and spread the rest of the handlers onto your scrollable component.

    import {ScrollView} from 'react-native';
import ActionSheet, {useScrollHandlers} from 'react-native-actions-sheet';
import {NativeViewGestureHandler} from 'react-native-gesture-handler';

const Sheet = () => {
  const handlers = useScrollHandlers();
  return (
    <ActionSheet>
      <NativeViewGestureHandler
        simultaneousHandlers={handlers.simultaneousHandlers}>
        <ScrollView {...handlers}></ScrollView>
      </NativeViewGestureHandler>
    </ActionSheet>
  );
};

  9. Install required dependencies for react-native-actions-sheet

    master

    The library requires react-native-reanimated, react-native-gesture-handler, and react-native-safe-area-context to function. Ensure these are installed in your project.

    npm install react-native-reanimated react-native-gesture-handler react-native-safe-area-context
# or
yarn add react-native-reanimated react-native-gesture-handler react-native-safe-area-context
# or
pnpm add react-native-reanimated react-native-gesture-handler react-native-safe-area-context
# or
bun add react-native-reanimated react-native-gesture-handler react-native-safe-area-context

  11. Use LegendList inside ActionSheet

    master

    To use @legendapp/list (LegendList) inside an ActionSheet, you must pass the ScrollView component from react-native-actions-sheet to the renderScrollComponent prop of LegendList. This ensures that the list integrates correctly with the ActionSheet's scrolling and gesture handling mechanisms.

    import ActionSheet, {ScrollView} from 'react-native-actions-sheet';
import {LegendList} from '@legendapp/list';

const ExampleSheet = () => {
  return (
    <ActionSheet>
      <LegendList renderScrollComponent={props => <ScrollView {...props} />} />
    </ActionSheet>
  );
};

  12. Migrate to v10.0.0

    master

    Upgrading to v10.0.0 requires new peer dependencies and changes to how sheets are registered and how props are handled.

    Dependencies

    Install the following peer dependencies:

    npm install react-native-reanimated react-native-safe-area-context

    Registering Sheets

    Use the SheetRegister component to manage multiple sheets in one place. This is cleaner than previous methods.

    1. Create a Sheets component using SheetRegister.
    2. Wrap your app in SheetProvider and include the Sheets component.
    import {SheetRegister} from 'react-native-actions-sheet';
import ExampleSheet from 'example-sheet.tsx';

export const Sheets = () => {
  return <SheetRegister sheets={{'example-sheet': ExampleSheet}} />
}
    import {SheetProvider} from 'react-native-actions-sheet';
import {Sheets} from 'sheets.tsx';

function App() {
  return (
    <SheetProvider>
      <Sheets />
      {/* your app components */}
    </SheetProvider>
  );
}