Skip to content

Basic usage ​

Import ActionSheet in your project.

tsx
import ActionSheet, { ActionSheetRef } from "react-native-actions-sheet";

Then create your ActionSheet inside any component and attach a ref to it.

tsx
function App() {
  const actionSheetRef = useRef<ActionSheetRef>(null);

  return (
    <ActionSheet gestureEnabled ref={actionSheetRef}>
      <Text>Hi, I am here.</Text>
    </ActionSheet>
  );
}

Present the ActionSheet by calling show method on the ref.

ts
actionSheetRef.current?.show();

And hide it by calling hide method on the ref.

ts
actionSheetRef.current?.hide();

WARNING

While the above is fully functional, it is not scalable when you have many ActionSheets in the app. It is recommended that you implement ActionSheets in your app using Sheet Manager for more scalability.

Released under the MIT License.