From 7dbf32229d0dec0ef04c86a0ec0d0e218355ef71 Mon Sep 17 00:00:00 2001
From: Dominic Go <18517029+dominicstop@users.noreply.github.com>
Date: Fri, 17 Jun 2022 19:15:50 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=AB=20Update:=20Example=20-=20Add=20`T?=
 =?UTF-8?q?est02Screen`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/src/App.tsx                    |  2 +
 example/src/examples/DebugControls.tsx | 10 +++-
 example/src/screens/Test02Screen.tsx   | 79 ++++++++++++++++++++++++++
 3 files changed, 90 insertions(+), 1 deletion(-)
 create mode 100644 example/src/screens/Test02Screen.tsx

diff --git a/example/src/App.tsx b/example/src/App.tsx
index b6f6aff..b940c83 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -6,6 +6,7 @@ import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
 import { HomeScreen } from './screens/HomeScreen';
 import { TestScreen } from './screens/Test01Screen';
+import { Test02Screen } from './screens/Test02Screen';
 
 import { SHARED_ENV } from './constants/SharedEnv';
 
@@ -50,6 +51,7 @@ export default function App() {
         <Stack.Navigator initialRouteName="Home">
           <Stack.Screen name="Home" component={HomeScreen} />
           <Stack.Screen name="Test" component={TestScreen} />
+          <Stack.Screen name="Test02" component={Test02Screen} />
         </Stack.Navigator>
       </NavigationContainer>
     );
diff --git a/example/src/examples/DebugControls.tsx b/example/src/examples/DebugControls.tsx
index dc6f2af..84e37c5 100644
--- a/example/src/examples/DebugControls.tsx
+++ b/example/src/examples/DebugControls.tsx
@@ -30,13 +30,21 @@ export function DebugControls(props: ContextMenuExampleProps) {
         }}
       />
       <CardButton
-        title={'Push: Test'}
+        title={'Push: Test 01'}
         subtitle={'Navigate to "Test" screen...'}
         onPress={() => {
           // @ts-ignore
           navigation.push('Test');
         }}
       />
+      <CardButton
+        title={'Push: Test 02'}
+        subtitle={'Navigate to "Test02" screen...'}
+        onPress={() => {
+          // @ts-ignore
+          navigation.push('Test02');
+        }}
+      />
     </ContextMenuCard>
   );
 };
\ No newline at end of file
diff --git a/example/src/screens/Test02Screen.tsx b/example/src/screens/Test02Screen.tsx
new file mode 100644
index 0000000..ec844b3
--- /dev/null
+++ b/example/src/screens/Test02Screen.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { View, Image, StyleSheet, Text } from 'react-native';
+
+import { ContextMenuView } from 'react-native-ios-context-menu';
+
+
+export const Test02Screen = (props) => {
+  const [isMessageLiked, setIsMessageLiked] = useState(false);
+
+  return (
+    <View style={styles.rootContainer}>
+      <View style={styles.messageContainer}>
+        <ContextMenuView 
+          style={styles.messageMenuContainer}
+          menuConfig={{
+            menuTitle: '',
+            menuItems: [{
+              actionKey: 'action-like',
+              actionTitle: isMessageLiked? 'Unlike' : 'Like',
+              icon: {
+                type: 'IMAGE_SYSTEM',
+                imageValue: {
+                  systemName: isMessageLiked ? 'heart.fill' : 'heart',
+                  paletteColors: ['']
+                },
+                imageOptions: {
+                  tint: 'red',
+                  renderingMode: 'alwaysOriginal',
+                },
+              }
+            }],
+          }}
+          onPressMenuItem={({nativeEvent}) => {
+            switch(nativeEvent.actionKey) {
+              case "action-like":
+                setIsMessageLiked((value) => !value);
+                break;
+            };
+          }}
+        >
+          <Image
+            style={styles.messageImage}
+            source={require('../assets/macos11_wallpaper.jpg')}
+            resizeMode={'cover'}
+          />
+        </ContextMenuView>
+        {isMessageLiked && (
+          <Text>
+            {'❤️'}
+          </Text>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  rootContainer: { 
+    flex: 1,
+    alignItems: 'flex-end',
+    justifyContent: 'flex-end',
+    paddingHorizontal: 15,
+    paddingVertical: 10,
+    paddingBottom: 20
+  },
+  messageContainer: {
+  },
+  messageMenuContainer: {
+    flex: 0,
+    backgroundColor: 'red',
+    borderRadius: 10,
+    overflow: 'hidden',
+  },
+  messageImage: {
+    width: 200,
+    height: 100,
+  },
+});
\ No newline at end of file