🆕 Add: Example - ContextMenuAuxPreviewExample13

example/src/examples/ContextMenuAuxPreviewExample13.tsx

@@ -0,0 +1,68 @@
+/* eslint-disable react-native/no-inline-styles */
+import * as React from 'react';
+import { Alert, View, Text, StyleSheet } from 'react-native';
+
+import { ContextMenuView } from 'react-native-ios-context-menu';
+
+import type { ContextMenuExampleProps } from './SharedExampleTypes';
+import { ContextMenuCard } from '../components/ContextMenuCard';
+
+
+export function ContextMenuAuxPreviewExample13(props: ContextMenuExampleProps) {
+  return (
+    <ContextMenuView
+      style={props.style}
+      menuConfig={{
+        menuTitle: 'ContextMenuAuxPreviewExample13',
+        menuItems: [{
+          actionKey  : 'key-01',
+          actionTitle: 'Action #1',
+          actionSubtitle: 'Dummy action'
+        }],
+      }}
+      auxiliaryPreviewConfig={{
+        transitionEntranceDelay: 'RECOMMENDED',
+        marginPreview: 30,
+      }}
+      renderAuxillaryPreview={() => (
+        <View style={[styles.auxRootContainer, {
+          alignItems: 'center',
+          justifyContent: 'center',
+        }]}>
+          <Text style={styles.textLabel}>
+            Distance from Preview
+          </Text>
+        </View>
+      )}
+      onPressMenuItem={({nativeEvent}) => {
+        Alert.alert(
+          'onPressMenuItem Event',
+          `actionKey: ${nativeEvent.actionKey} - actionTitle: ${nativeEvent.actionTitle}`
+        );
+      }}
+    >
+      <ContextMenuCard
+        index={props.index}
+        title={'ContextMenuAuxPreviewExample13'}
+        subtitle={'EXPERIMENTAL - Aux. Preview'}
+        description={[
+          `Basic 'ContextMenuView' w/ a auxillary preview that has custom margins`,
+          `MenuAuxiliaryPreviewConfig.marginPreview`
+        ]}
+      />
+    </ContextMenuView>
+  );
+};
+
+const styles = StyleSheet.create({
+  auxRootContainer: {
+    backgroundColor: 'white',
+    borderRadius: 10,
+    padding: 10,
+    width: 200,
+  },
+  textLabel: {
+    fontSize: 18,
+    fontWeight: '600',
+  },
+});

example/src/screens/HomeScreen.tsx

@@ -34,6 +34,7 @@ import { ContextMenuAuxPreviewExample09 } from '../examples/ContextMenuAuxPrevie
 import { ContextMenuAuxPreviewExample10 } from '../examples/ContextMenuAuxPreviewExample10';
 import { ContextMenuAuxPreviewExample11 } from '../examples/ContextMenuAuxPreviewExample11';
 import { ContextMenuAuxPreviewExample12 } from '../examples/ContextMenuAuxPreviewExample12';
+import { ContextMenuAuxPreviewExample13 } from '../examples/ContextMenuAuxPreviewExample13';
 
 import { ContextMenuViewTest01 } from '../examples/ContextMenuViewTest01';
 import { ContextMenuViewTest02 } from '../examples/ContextMenuViewTest02';
@@ -88,6 +89,7 @@ const EXAMPLE_COMPONENTS = [
   ContextMenuAuxPreviewExample10,
   ContextMenuAuxPreviewExample11,
   ContextMenuAuxPreviewExample12,
+  ContextMenuAuxPreviewExample13,
   ContextMenuViewTest01,
   ContextMenuViewTest02,
   ContextMenuViewTest03,