3. After a long press - delete an entry

src/arena-mobile-ui/components/Pressable/index.js

@@ -11,10 +11,14 @@ const Pressable = ({
   onLongPress = EMPTY_FN,
   accessibilityState = EMPTY_OBJECT,
   children,
+  pressedColor,
 }) => {
   const customStyle = useCallback(
     ({pressed}) => {
-      return StyleSheet.compose(style || {}, {opacity: pressed ? 0.5 : 1});
+      return StyleSheet.compose(style || {}, {
+        opacity: pressed ? 0.5 : 1,
+        backgroundColor: pressedColor && pressed ? pressedColor : 'transparent',
+      });
     },
     [style],
   );

src/screens/Form/components/EntityPage/components/TableEntity/components/Row/index.js

@@ -1,12 +1,27 @@
-import React, {useCallback, useMemo} from 'react';
+import React, {useCallback, useMemo, useState} from 'react';
+import {useTranslation} from 'react-i18next';
+import {useDispatch, useSelector} from 'react-redux';
 
-import Pressable from 'arena-mobile-ui/components/Pressable';
+import useNodeDefNameOrLabel from 'arena-mobile-ui/hooks/useNodeDefNameOrLabel';
+import {alert} from 'arena-mobile-ui/utils';
+import {selectors as formSelectors, actions as formActions} from 'state/form';
 
+import Pressable from 'arena-mobile-ui/components/Pressable';
+import * as colors from 'arena-mobile-ui/colors';
 import Cell from '../Cell';
 
 import styles from './styles';
 
 const Row = ({item: parentNode, headers, getWidth, onPress}) => {
+  const {t} = useTranslation();
+  const dispatch = useDispatch();
+  const parentEntityNodeDef = useSelector(formSelectors.getParentEntityNodeDef);
+  const parentLabel = useNodeDefNameOrLabel({nodeDef: parentEntityNodeDef});
+  const isRecordLocked = useSelector(formSelectors.isRecordLocked);
+  const parentEntityKeyString = useSelector(state =>
+    formSelectors.getEntityKey(state, parentNode),
+  );
+
   const renderCells = useMemo(() => {
     return headers.map(nodeDef => (
       <Cell
@@ -23,8 +38,28 @@ const Row = ({item: parentNode, headers, getWidth, onPress}) => {
     [onPress, parentNode],
   );
 
+  const handleDeleteEntityNode = useCallback(() => {
+    if (isRecordLocked) return;
+    alert({
+      title: t('Form:deleteNode.alert.title'),
+      message: t('Form:deleteNode.alert.message', {
+        name: `${parentLabel} [${parentEntityKeyString}]`,
+      }),
+      acceptText: t('Form:deleteNode.alert.accept'),
+      dismissText: t('Form:deleteNode.alert.dismiss'),
+      onAccept: () => {
+        dispatch(formActions.deleteNodeEntity({node: parentNode}));
+      },
+      onDismiss: () => null,
+    });
+  }, [dispatch, parentEntityKeyString, parentLabel, parentNode, t]);
+
   return (
-    <Pressable onPress={handlePress} style={styles.container}>
+    <Pressable
+      onPress={handlePress}
+      style={styles.container}
+      onLongPress={handleDeleteEntityNode}
+      pressedColor={colors.alert}>
       {renderCells}
     </Pressable>
   );

src/screens/Form/components/EntityPage/components/TableEntity/components/Row/styles.js

@@ -1,8 +1,11 @@
 import {StyleSheet} from 'react-native';
 
+import * as colors from 'arena-mobile-ui/colors';
+
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
+    backgroundColor: colors.backgroundLight,
   },
 });