💫 Update: Ex - Add Test08Screen

Author: dominicstop

example/src/constants/ExampleCardItems.ts

@@ -389,6 +389,10 @@ export const EXAMPLE_ITEMS: Array<ExampleItem> = (() => {
       type: 'screen',
       ...ROUTE_MAP.test07Screen,
     },
+    {
+      type: 'screen',
+      ...ROUTE_MAP.test08Screen,
+    },
   ];
 
   // if (SHARED_ENV.enableReactNavigation) {

example/src/constants/RouteItems.ts

@@ -8,6 +8,7 @@ import { Test04Screen } from "../screens/Test04Screen";
 import { Test05Screen } from "../screens/Test05Screen";
 import { Test06Screen } from "../screens/Test06Screen";
 import { Test07Screen } from "../screens/Test07Screen";
+import { Test08Screen } from "../screens/Test08Screen";
 
 import type { RouteKey } from "./RouteKeys";
 
@@ -50,6 +51,10 @@ export const ROUTE_ITEMS: Array<RouteEntry> = [
     routeKey: 'test07Screen',
     component: Test07Screen,
   },
+  {
+    routeKey: 'test08Screen',
+    component: Test08Screen,
+  },
   {
     routeKey: 'contextMenuTest01',
     component: ContextMenuViewTest01Screen,

example/src/constants/RouteKeys.ts

@@ -9,6 +9,7 @@ export const ROUTE_KEYS = {
   test05Screen: 'test05Screen',
   test06Screen: 'test06Screen',
   test07Screen: 'test07Screen',
+  test08Screen: 'test08Screen',
 };
 
 export type RouteKey = keyof (typeof ROUTE_KEYS);

example/src/screens/Test08Screen.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { StyleSheet, Text, View, ScrollView } from 'react-native';
+
+import { ContextMenuView } from 'react-native-ios-context-menu';
+
+// Repro for:
+// https://github.com/dominicstop/react-native-ios-context-menu/issues/102#issuecomment-2465444845
+
+function FlickerExample({ children }: { children: React.ReactElement }) {
+  return (
+    <ContextMenuView
+      style={styles.messageContainer}
+      previewConfig={{ 
+        previewType: "CUSTOM",
+        backgroundColor: 'rgba(0,0,0,0)',
+        borderRadius: 10,
+      }}
+      renderPreview={() => 
+        <View style={styles.previewContainer}>
+          {children}
+        </View>
+      }
+      menuConfig={{
+        menuTitle: "BasicUsageExample01",
+        menuItems: [
+          {
+            actionKey: "key-01",
+            actionTitle: "Action #1",
+          },
+          {
+            actionKey: "key-02",
+            actionTitle: "Action #2",
+          },
+          {
+            actionKey: "key-03",
+            actionTitle: "Action #3",
+          },
+        ],
+      }}
+    >
+      {children}
+    </ContextMenuView>
+  );
+}
+export const Test08Screen = () => {
+  return (
+    <ScrollView 
+      style={styles.rootContainer}
+      contentContainerStyle={styles.rootContainerContent}
+    >
+      <FlickerExample>
+        <Text style={styles.messageText}>
+          {'Hello'}
+        </Text>
+      </FlickerExample>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  rootContainer: { 
+    flex: 1,
+    backgroundColor: 'white',
+  },
+  rootContainerContent: {
+    alignItems: 'flex-end',
+    justifyContent: 'flex-end',
+    paddingHorizontal: 12,
+    paddingTop: 12,
+    paddingBottom: 24,
+  },
+  messageContainer: {
+    flex: 0,
+    backgroundColor: 'pink',
+    borderRadius: 10,
+    overflow: 'hidden',
+    paddingHorizontal: 10,
+    paddingVertical: 10,
+    marginBottom: 12,
+  },
+  previewContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 32,
+  },
+  messageText: {
+    fontSize: 16,
+  },
+});