v0.7.1
What's New
- Now you can show the sheet without a Modal. Just set the
isModal
prop tofalse
- 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");