Skip to content

v0.7.1

Compare
Choose a tag to compare
@ammarahm-ed ammarahm-ed released this 26 Jun 08:28
· 178 commits to master since this release

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");