ZulipButton: Extend button touch target to 48px.

Made the use of hitSlop prop and passed it from
MentionedUserNotSubscribed to ZulipButton.

Touch target now extends to 48px by specifying
top and bottom properties of hitSlop prop to
6px each. Since the height of the button is 32,
so adding the hitSlop to 6 at both top and bottom
sums it up to 48.
Link to the doc - https://support.google.com/accessibility/android/answer/7101858?hl=en

Discussion of this in CZO [1]

[1] https://chat.zulip.org/#narrow/stream/48-mobile/topic/UI.20tweaks

Fixes part of #4224

src/common/ZulipButton.js

@@ -1,5 +1,5 @@
 /* @flow strict-local */
-import React, { PureComponent } from 'react';
+import React, { type ElementConfig, PureComponent } from 'react';
 import { Text, View, ActivityIndicator } from 'react-native';
 import type { TextStyle, ViewStyle } from 'react-native/Libraries/StyleSheet/StyleSheet';
 import TranslatedText from './TranslatedText';
@@ -103,6 +103,7 @@ type Props = $ReadOnly<{|
   text: LocalizableText,
   secondary: boolean,
   onPress: () => void | Promise<void>,
+  hitSlop?: $PropertyType<ElementConfig<typeof View>, 'hitSlop'>,
 |}>;
 
 /**
@@ -129,7 +130,8 @@ export default class ZulipButton extends PureComponent<Props> {
   };
 
   render() {
-    const { style, text, disabled, secondary, progress, onPress, Icon } = this.props;
+    const { style, text, disabled, secondary, progress, onPress, Icon, hitSlop } = this.props;
+
     const frameStyle = [
       styles.frame,
       // Prettier bug on nested ternary
@@ -159,7 +161,7 @@ export default class ZulipButton extends PureComponent<Props> {
     }
 
     return (
-      <View style={frameStyle}>
+      <View style={frameStyle} hitSlop={hitSlop}>
         <Touchable onPress={disabled ? undefined : onPress}>
           <View style={styles.buttonContent}>
             {!!Icon && <Icon style={iconStyle} size={25} />}

src/message/MentionedUserNotSubscribed.js

@@ -49,8 +49,6 @@ const styles = createStyleSheet({
 
     // Based on MarkUnreadButton.
     // TODO make these less ad hoc.
-    // TODO also make the actual touch target taller, like 48px.
-    //   (Can extend beyond the visual representation of the button itself.)
     borderWidth: 0,
     borderRadius: 16,
     height: 32,
@@ -81,6 +79,12 @@ class MentionedUserNotSubscribed extends PureComponent<Props> {
   }
   render() {
     const { user, height } = this.props;
+    const hitSlop = {
+      top: 6,
+      right: 0,
+      bottom: 6,
+      left: 0,
+    };
 
     return (
       <View style={[styles.wrapper, { bottom: height }]}>
@@ -97,6 +101,7 @@ class MentionedUserNotSubscribed extends PureComponent<Props> {
             textStyle={styles.buttonText}
             text="Subscribe"
             onPress={this.subscribeToStream}
+            hitSlop={hitSlop}
           />
         </TouchableOpacity>
       </View>