add preview builder (#46)

* add preview builder

* pass preview as prop

Author: nucleartux

example/App.js

@@ -49,6 +49,17 @@ const App = () => {
       }} previewBackgroundColor="transparent">
         <View style={[styles.rectangle, {backgroundColor: color, borderRadius: circle ? 999 : 0}]} />
       </ContextMenu>
+      <ContextMenu
+        title={'Custom Preview'}
+        actions={[
+          {
+            title: 'Test Item',
+          },
+        ]}
+        previewBackgroundColor="transparent"
+        preview={<View style={[styles.rectangle, {backgroundColor: 'green'}]} />}>
+        <View style={[styles.rectangle, {backgroundColor: 'red'}]} />
+      </ContextMenu>
       <View style={{color: 'red', height: 100, width: 100}} />
     </SafeAreaView>
   );

index.d.ts

@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { NativeSyntheticEvent, ViewProps, ViewStyle } from 'react-native';
 
 export interface ContextMenuAction {
@@ -54,6 +54,10 @@ export interface ContextMenuProps extends ViewProps {
 	 * The background color of the preview. This is displayed underneath your view. Set this to transparent (or another color) if the default causes issues.
 	 */
 	previewBackgroundColor?: ViewStyle["backgroundColor"];
+	/**
+	 * Custom preview component.
+	 */
+	preview?: React.ReactNode;
 }
 
 export default class ContextMenu extends Component<ContextMenuProps> { }

index.js

@@ -1,5 +1,15 @@
-import { requireNativeComponent } from 'react-native';
+import React from "react";
+import { requireNativeComponent, View } from "react-native";
 
-const ContextMenu = requireNativeComponent('ContextMenu', null);
+const NativeContextMenu = requireNativeComponent("ContextMenu", null);
+
+const ContextMenu = (props) => {
+  return (
+    <NativeContextMenu {...props}>
+      <View>{props.children}</View>
+      {props.preview}
+    </NativeContextMenu>
+  );
+};
 
 export default ContextMenu;

ios/ContextMenuView.h

@@ -18,5 +18,6 @@
 @property (nullable, nonatomic, copy) NSArray<ContextMenuAction*>* actions;
 
 @property (nullable, nonatomic, copy) UIColor* previewBackgroundColor;
+@property (nonatomic, weak) UIView *customView;
 
 @end

ios/ContextMenuView.m

@@ -21,11 +21,20 @@ @implementation ContextMenuView {
 
 - (void)insertReactSubview:(UIView *)subview atIndex:(NSInteger)atIndex
 {
-  [super insertReactSubview:subview atIndex:atIndex];
   if (@available(iOS 13.0, *)) {
-    UIContextMenuInteraction* contextInteraction = [[UIContextMenuInteraction alloc] initWithDelegate:self];
+    if (atIndex == 0) {
+      [super insertReactSubview:subview atIndex:atIndex];
 
-    [subview addInteraction:contextInteraction];
+      UIContextMenuInteraction* contextInteraction = [[UIContextMenuInteraction alloc] initWithDelegate:self];
+
+      [subview addInteraction:contextInteraction];
+    }
+
+    if (atIndex == 1) {
+      self.customView = subview;
+    }
+  } else {
+    [super insertReactSubview:subview atIndex:atIndex];
   }
 }
 
@@ -45,7 +54,12 @@ - (void)layoutSubviews
 }
 
 - (nullable UIContextMenuConfiguration *)contextMenuInteraction:(nonnull UIContextMenuInteraction *)interaction configurationForMenuAtLocation:(CGPoint)location API_AVAILABLE(ios(13.0)) {
-  return [UIContextMenuConfiguration configurationWithIdentifier:nil previewProvider:nil actionProvider:^UIMenu * _Nullable(NSArray<UIMenuElement *> * _Nonnull suggestedActions) {
+  return [UIContextMenuConfiguration configurationWithIdentifier:nil previewProvider: self.customView == nil ? nil : ^(){
+        UIViewController* viewController = [[UIViewController alloc] init];
+        viewController.preferredContentSize = self.customView.frame.size;
+        viewController.view = self.customView;
+        return viewController;
+    } actionProvider:^UIMenu * _Nullable(NSArray<UIMenuElement *> * _Nonnull suggestedActions) {
     NSMutableArray* actions = [[NSMutableArray alloc] init];
 
     [self.actions enumerateObjectsUsingBlock:^(ContextMenuAction* thisAction, NSUInteger idx, BOOL *stop) {