Usage with SheetManager

SheetManager is great because it helps you save lots of development time. One great feature is that you can reuse the same ActionSheet in the app and don't have to create or define it in multiple places. Another is that you don't have to write boilerplate for every ActionSheet component. Everything just works.

Import ActionSheet.

import ActionSheet from 'react-native-actions-sheet';

Create your ActionSheet component and export it.

function ExampleSheet() {
  return (
    <ActionSheet>
      <View>
        <Text>Hello World</Text>
      </View>
    </ActionSheet>
  );
}
 
export default ExampleSheet;

Create a sheets.tsx file and import your sheet then register it.

import {registerSheet} from 'react-native-actions-sheet';
import ExampleSheet from 'example-sheet.tsx';
 
registerSheet('example-sheet', ExampleSheet);
 
// We extend some of the types here to give us great intellisense
// across the app for all registered sheets.
declare module 'react-native-actions-sheet' {
  interface Sheets {
    'example-sheet': SheetDefinition;
  }
}
 
export {};

In App.js import sheets.tsx and wrap your app in SheetProvider.

import {SheetProvider} from 'react-native-actions-sheet';
import 'sheets.tsx';
 
function App() {
  return (
    <SheetProvider>
      {
        // your app components
      }
    </SheetProvider>
  );
}

Open the ActionSheet from anywhere in the app.

SheetManager.show('example-sheet');

Hide the ActionSheet

SheetManager.hide('example-sheet');

Last updated on January 29, 2024