v0.8.1

• Fix safe area top padding not filled by overlay.

v0.8.0

What's New

1. Complete rewrite of the library
2. Background interaction support

<ActionSheet backgroundInteractionEnabled={true} />

4. Improved ScrollView & FlatList handling.
5. Official support for react-native-web & expo projects
6. You can provide an array of snapPoints as a prop and action sheet will move between those points
7. New overdraw effect
8. More granular control over action sheet behaviour
9. Improved SheetManager api
10. You can now receive result from action sheet and send data to it asynchronously:

async function openExternalLink(link: string) {
  const canOpen = await SheetManager.show("confirm-sheet", {
    payload: {
      message: `Do you want to open ${link} in your phone browser?`,
    },
  });
  if (canOpen) {
    Linking.openUrl(link);
  }
}

New Documentation Website

Detailed guides & API reference of each features of the action sheet. Hosted with @vercel & built with Nextra by @shuding.

Breaking changes

v0.8.0 introduces some breaking changes. I tried to minimize them as much as possible but since this is a complete rewrite some of the features of this library have changed. Read the migration guide

v0.7.1

What's New

1. Now you can show the sheet without a Modal. Just set the isModal prop to false
2. This version introduces a better way to manage all the sheets in your app using a SheetProvider

Using the SheetProvider

Create your ActionSheet component and register it with a unique id. Remember that you do not need to render the ActionSheet in any components.

import React from "react";
import ActionSheet, { SheetManager,SheetProps,registerSheet } from "react-native-actions-sheet";

function MySheet(props:SheetProps) {

return <ActionSheet id={props.sheetId}>
  <View>
    <Text>Hello World</Text>
  </View>
</ActionSheet>;
}

// Register your Sheet component.
registerSheet('mysheet', MySheet);

export default MySheet;

Create a sheets.tsx or sheets.js file.

// Import all the sheets here as follows
import "mysheet.tsx"
export {};

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

import { SheetProvider } from "react-native-actions-sheet";
import "sheets.tsx"; // here

function App() {

  return <SheetProvider>
    {
      // your app components
    }
  </SheetProvider>;
}

Now you can open the ActionSheet from anywhere in the app.

SheetManager.show("mysheet");

v0.6.2

What's Changed

• Added children type to ActionSheetProps by @francesco-clementi-92 in #165

New Contributors

• @francesco-clementi-92 made their first contribution in #165

Full Changelog: v0.6.1...v0.6.2

v0.6.1

• Added testIDs prop that has test ids for various components of sheet to improve e2e testing.

v0.6.0

What's New

1. After using the ActionSheet in many projects, I have decided to add a tiny SheetManager class that makes it less tedious to show/hide and manage ActionSheets from across the app.

Showing the ActionSheet from anywhere in the app is now dead simple.

SheetManager.show("sheet_id");

<ActionSheet id="sheet_id" />;

The old ref methods are still there so nothing will break in your apps.

2. Top indicator in ActionSheet can now be styled with indicatorStyle prop.
3. Keyboard events warning has now been fixed.

Check the updated docs and Enjoy building something cool with this!

v0.5.8

• Fix Keyboard.removeListener deprecated warning

v0.5.7

• Export ActionSheetProps @arelstone
• Add keyboardHandlerEnabled prop @Jalson1982

v0.5.6

• Fix snapToOffset not working on iOS

v0.5.5

• Fix safe area padding not correct on ios
• mark visible as option on setModalVisible
• Fix bottom whitespace issue