feat(navigation) two actions screen header buttons ui updates

react/features/mobile/navigation/components/HeaderNavigationButton.js

@@ -2,38 +2,77 @@
 
 import React from 'react';
 import { TouchableOpacity } from 'react-native-gesture-handler';
+import { Text, TouchableRipple } from 'react-native-paper';
 
 import { Icon } from '../../../base/icons';
+import BaseTheme from '../../../base/ui/components/BaseTheme';
 import styles from '../../../conference/components/native/styles';
 
 type Props = {
 
+    /**
+     * Is the button disabled?
+     */
+    disabled?: boolean,
+
+    /**
+     * Label of the button.
+     */
+    label?: string,
+
     /**
      * Callback to invoke when the {@code HeaderNavigationButton} is clicked/pressed.
      */
-    onPress: Function,
+    onPress?: Function,
 
     /**
      * The ImageSource to be rendered as image.
      */
-    src: Object,
+    src?: Object,
 
     /**
-     * The component's external style.
+     * Header has two actions.
      */
-    style?: Object
+    twoActions?: boolean
 }
 
-const HeaderNavigationButton = ({ onPress, src, style }: Props) => (
-    <TouchableOpacity
-        onPress = { onPress }
-        style = { styles.headerNavigationButton } >
-        <Icon
-            size = { 20 }
-            src = { src }
-            style = { [ styles.headerNavigationIcon, style ] } />
-    </TouchableOpacity>
-);
+const HeaderNavigationButton
+    = ({
+        disabled,
+        label,
+        onPress,
+        src,
+        twoActions
+    }: Props) =>
+        (
+            <>
+                {
+                    src ? (
+                        <TouchableOpacity
+                            onPress = { onPress }
+                            style = { styles.headerNavigationButton }>
+                            <Icon
+                                size = { 20 }
+                                src = { src }
+                                style = { styles.headerNavigationIcon } />
+                        </TouchableOpacity>
+                    ) : (
+                        <TouchableRipple
+                            disabled = { disabled }
+                            onPress = { onPress }
+                            rippleColor = { BaseTheme.palette.screen01Header }>
+                            <Text
+                                style = {
+                                    twoActions
+                                        ? styles.headerNavigationTextBold
+                                        : styles.headerNavigationText
+                                }>
+                                { label }
+                            </Text>
+                        </TouchableRipple>
+                    )}
+            </>
+        );
 
 
 export default HeaderNavigationButton;