💫 Update: Example - Add Test02Screen

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>
     );

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>
   );
 };

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,
+  },
+});