[RN] Add remote video menu

react/features/base/dialog/components/native/styles.js

@@ -12,6 +12,47 @@ const DIALOG_BORDER_COLOR = 'rgba(255, 255, 255, 0.2)';
 export const FIELD_UNDERLINE = ColorPalette.transparent;
 export const PLACEHOLDER_COLOR = ColorPalette.lightGrey;
 
+/**
+ * Default styles for the items of a {@code BottomSheet}-based menu.
+ *
+ * These have been implemented as per the Material Design guidelines:
+ * {@link https://material.io/guidelines/components/bottom-sheets.html}.
+ */
+const bottomSheetItemStyles = createStyleSheet({
+    /**
+     * Container style for a generic item rendered in the menu.
+     */
+    style: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        height: 48
+    },
+
+    /**
+     * Style for the {@code Icon} element in a generic item of the menu.
+     */
+    iconStyle: {
+        color: ColorPalette.white,
+        fontSize: 24
+    },
+
+    /**
+     * Style for the label in a generic item rendered in the menu.
+     */
+    labelStyle: {
+        color: ColorPalette.white,
+        flexShrink: 1,
+        fontSize: 16,
+        marginLeft: 32,
+        opacity: 0.90
+    }
+});
+
+export const bottomSheetItemStylesCombined = {
+    ...bottomSheetItemStyles,
+    underlayColor: ColorPalette.overflowMenuItemUnderlay
+};
+
 /**
  * The React {@code Component} styles of {@code BottomSheet}. These have
  * been implemented as per the Material Design guidelines:

react/features/base/react/components/AbstractContainer.js

@@ -31,6 +31,12 @@ export type Props = {
      */
     onClick?: ?Function,
 
+    /**
+     * The event handler/listener to be invoked when this
+     * {@code AbstractContainer} is long pressed on React Native.
+     */
+    onLongPress?: ?Function,
+
     /**
      * The style (as in stylesheet) to be applied to this
      * {@code AbstractContainer}.

react/features/base/react/components/native/Container.js

@@ -27,6 +27,7 @@ export default class Container<P: Props> extends AbstractContainer<P> {
             accessibilityLabel,
             accessible,
             onClick,
+            onLongPress,
             touchFeedback = onClick,
             underlayColor,
             visible = true,
@@ -38,7 +39,7 @@ export default class Container<P: Props> extends AbstractContainer<P> {
             return null;
         }
 
-        const onClickOrTouchFeedback = onClick || touchFeedback;
+        const onClickOrTouchFeedback = onClick || onLongPress || touchFeedback;
         let element
             = super._render(
                 View,
@@ -57,6 +58,7 @@ export default class Container<P: Props> extends AbstractContainer<P> {
                     {
                         accessibilityLabel,
                         accessible,
+                        onLongPress,
                         onPress: onClick,
                         ...touchFeedback && { underlayColor }
                     },