Add Single Tap to Trigger Functionality (#53)

* Fix deps on fresh clone

* Fixup deps

* Working single tap functionality

* Update name a bit

* Add single tap for android

* Bump version

* Update documentation

Author: mpiannucci

README.md

@@ -67,3 +67,7 @@ Optional. When the popop is opened and the user cancels.
 ###### `previewBackgroundColor`
 
 Optional. The background color of the preview. This is displayed underneath your view. Set this to transparent (or another color) if the default causes issues.
+
+###### `dropdownMenuMode`
+
+Optional. When set to `true`, the context menu is triggered with a single tap instead of a long press, and a preview is not show and no blur occurs. Uses the iOS 14 Menu API and a simple tap listener on android. 

example/App.js

@@ -38,7 +38,7 @@ const App = () => {
           disabled: true,
         },
       ]} onPress={(event) => {
-        const {index, name} = event.nativeEvent;
+        const { index, name } = event.nativeEvent;
         if (index == 0) {
           setColor(name.toLowerCase());
         } else {
@@ -47,8 +47,25 @@ const App = () => {
       }} onCancel={() => {
         console.warn('CANCELLED')
       }} previewBackgroundColor="transparent">
-        <View style={[styles.rectangle, {backgroundColor: color, borderRadius: circle ? 999 : 0}]} />
+        <View style={[styles.rectangle, { backgroundColor: color, borderRadius: circle ? 999 : 0 }]} />
       </ContextMenu>
+
+      <View style={styles.spacer} />
+
+      <ContextMenu
+        title={'Dropdown Menu'}
+        actions={[
+          {
+            title: 'Test Item',
+          }
+        ]}
+        dropdownMenuMode={true}
+      >
+        <View style={[styles.rectangle, { backgroundColor: 'purple' }]} />
+      </ContextMenu>
+
+      <View style={styles.spacer} />
+
       <ContextMenu
         title={'Custom Preview'}
         actions={[
@@ -57,23 +74,25 @@ const App = () => {
           },
         ]}
         previewBackgroundColor="transparent"
-        preview={<View style={[styles.rectangle, {backgroundColor: 'green'}]} />}>
-        <View style={[styles.rectangle, {backgroundColor: 'red'}]} />
+        preview={<View style={[styles.rectangle, { backgroundColor: 'green' }]} />}>
+        <View style={[styles.rectangle, { backgroundColor: 'red' }]} />
       </ContextMenu>
-      <View style={{color: 'red', height: 100, width: 100}} />
     </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
+    justifyContent: 'flex-start',
     alignItems: 'center'
   },
   rectangle: {
-    width: 200, 
+    width: 200,
     height: 200,
+  },
+  spacer: {
+    height: 16,
   }
 });
 

example/android/app/src/main/AndroidManifest.xml

@@ -9,7 +9,8 @@
       android:icon="@mipmap/ic_launcher"
       android:roundIcon="@mipmap/ic_launcher_round"
       android:allowBackup="false"
-      android:theme="@style/AppTheme">
+      android:theme="@style/AppTheme"
+        android:usesCleartextTraffic="true">
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"