⭐️ Example - Add ContextMenuViewExample12

example/src/App.tsx

@@ -14,6 +14,7 @@ import { ContextMenuViewExample08 } from './examples/ContextMenuViewExample08';
 import { ContextMenuViewExample09 } from './examples/ContextMenuViewExample09';
 import { ContextMenuViewExample10 } from './examples/ContextMenuViewExample10';
 import { ContextMenuViewExample11 } from './examples/ContextMenuViewExample11';
+import { ContextMenuViewExample12 } from './examples/ContextMenuViewExample12';
 
 
 type ExampleListItem = {
@@ -33,6 +34,7 @@ const EXAMPLE_COMPONENTS = [
   ContextMenuViewExample09,
   ContextMenuViewExample10,
   ContextMenuViewExample11,
+  ContextMenuViewExample12,
 ];
 
 const EXAMPLE_ITEMS: ExampleListItem[] = EXAMPLE_COMPONENTS.map((item, index) => ({

example/src/examples/ContextMenuViewExample12.tsx

@@ -0,0 +1,90 @@
+/* eslint-disable react-native/no-inline-styles */
+import * as React from 'react';
+import { Text, View } from 'react-native';
+
+import { ContextMenuView } from 'react-native-ios-context-menu';
+
+import type { ContextMenuExampleProps } from './SharedExampleTypes';
+import { ContextMenuCard } from '../components/ContextMenuCard';
+
+
+export function ContextMenuViewExample12(props: ContextMenuExampleProps) {
+    const [timer, setTimer] = React.useState(0);
+  const increment = React.useRef(null);
+
+  const handleStart = () => {
+    increment.current = setInterval(() => {
+      setTimer((prevTimer) => prevTimer + 1);
+    }, 1000);
+  };
+
+  const handleStop = () => {
+    clearInterval(increment.current);
+  };
+
+  const handleReset = () => {
+    clearInterval(increment.current);
+    setTimer(0);
+  };
+
+  return (
+    <ContextMenuView
+      style={props.style}
+      menuConfig={{
+        menuTitle: 'ContextMenuViewSimpleExample12',
+        menuItems: [{
+          actionKey     : 'add',
+          actionTitle   : `Add 100`,
+          icon: {
+            iconType : 'SYSTEM',
+            iconValue: 'plus',
+          }
+        }, (timer > 0) && {
+          actionKey     : 'reset',
+          actionTitle   : `Reset Counter`,
+          menuAttributes: ['destructive'],
+          icon: {
+            iconType : 'SYSTEM',
+            iconValue: 'trash',
+          }
+        }],
+      }}
+      previewConfig={{
+        previewType: 'CUSTOM',
+        backgroundColor: 'white'
+      }}
+      renderPreview={() => (
+        <View style={{ padding: 20 }}>
+          <Text style={{fontSize: 32}}>
+            {`Counter: ${timer}`}
+          </Text>
+          <Text style={{fontSize: 32}}>
+            {(timer % 2 === 0)? 'EVEN' : 'The number is: ODD'}
+          </Text>
+        </View>
+      )}
+      onMenuDidShow={() => handleStart()}
+      onMenuDidHide={() => handleStop()}
+      onPressMenuItem={({nativeEvent}) => {
+        switch (nativeEvent.actionKey) {
+          case 'add':
+            setTimer((prevTimer) => prevTimer + 100);
+            break;
+
+          case 'reset':
+            handleReset();
+            break;
+        };
+      }}
+    >
+      <ContextMenuCard
+        index={props.index}
+        title={'ContextMenuViewExample12'}
+        description={[
+          `Another custom preview example.`,
+          `Show counter in the context menu preview, and configure menu with a action to add 100 to the counter, and another action to reset the counter.`
+        ]}
+      />
+    </ContextMenuView>
+  );
+};