ActionSheet is a cross-platform React Native component that uses the native UIActionSheet on iOS and a JS implementation on Android. Almost a drop in replacement for ActionSheetIOS except it cannot be called statically.
npm install @expo/react-native-action-sheet
import ActionSheetProvider & connectActionSheet
import { ActionSheetProvider, connectActionSheet } from '@expo/react-native-action-sheet';wrap your top-level component with <ActionSheetProvider />
class AppContainer extends React.Component {
render() {
return (
<ActionSheetProvider>
<App />
</ActionSheetProvider>
);
}
}decorate the component you want to use the action sheet with @connectActionSheet
@connectActionSheet
class App extends React.Component { /* ... */ }access actionSheet method as this.props.showActionSheetWithOptions
_onOpenActionSheet = () => {
// Same interface as https://facebook.github.io/react-native/docs/actionsheetios.html
let options = ['Delete', 'Save', 'Cancel'];
let destructiveButtonIndex = 0;
let cancelButtonIndex = 2;
this.props.showActionSheetWithOptions({
options,
cancelButtonIndex,
destructiveButtonIndex,
},
(buttonIndex) => {
// Do something here depending on the button index selected
});
}Try it in Expo: https://expo.io/@community/react-native-action-sheet-example
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent