diff --git a/native/roles/role-panel-entry.react.js b/native/roles/role-panel-entry.react.js
--- a/native/roles/role-panel-entry.react.js
+++ b/native/roles/role-panel-entry.react.js
@@ -1,10 +1,13 @@
// @flow
+import { useActionSheet } from '@expo/react-native-action-sheet';
import * as React from 'react';
-import { View, Text, TouchableOpacity } from 'react-native';
+import { View, Text, TouchableOpacity, Platform } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
import CommIcon from '../components/comm-icon.react.js';
import SWMansionIcon from '../components/swmansion-icon.react.js';
+import { useSelector } from '../redux/redux-utils.js';
import { useStyles } from '../themes/colors.js';
type RolePanelEntryProps = {
@@ -16,12 +19,59 @@
const { roleName, memberCount } = props;
const styles = useStyles(unboundStyles);
+ const options = React.useMemo(() => {
+ const availableOptions = ['Edit role'];
+
+ if (Platform.OS === 'ios') {
+ availableOptions.push('Cancel');
+ }
+
+ return availableOptions;
+ }, []);
+
+ const onOptionSelected = React.useCallback(
+ (index: ?number) => {
+ if (index === undefined || index === null || index === options.length) {
+ return;
+ }
+ },
+ [options.length],
+ );
+
+ const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);
+ const { showActionSheetWithOptions } = useActionSheet();
+ const insets = useSafeAreaInsets();
+
+ const showActionSheet = React.useCallback(() => {
+ const cancelButtonIndex = Platform.OS === 'ios' ? options.length - 1 : -1;
+ const containerStyle = {
+ paddingBottom: insets.bottom,
+ };
+
+ showActionSheetWithOptions(
+ {
+ options,
+ cancelButtonIndex,
+ containerStyle,
+ userInterfaceStyle: activeTheme ?? 'dark',
+ icons: [],
+ },
+ onOptionSelected,
+ );
+ }, [
+ options,
+ onOptionSelected,
+ insets.bottom,
+ activeTheme,
+ showActionSheetWithOptions,
+ ]);
+
const menuButton = React.useMemo(() => {
if (roleName === 'Admins') {
return ;
}
return (
-
+
);
- }, [roleName, styles.rolePanelEmptyMenuButton, styles.rolePanelMenuButton]);
+ }, [
+ roleName,
+ styles.rolePanelEmptyMenuButton,
+ styles.rolePanelMenuButton,
+ showActionSheet,
+ ]);
return (