Refactor PasswordInput.js to use Pressable for show/hide button with …

…comments

src/common/PasswordInput.js

@@ -5,8 +5,9 @@ import { View, Pressable } from 'react-native';
 
 import Input from './Input';
 import type { Props as InputProps } from './Input';
-import { BRAND_COLOR, createStyleSheet } from '../styles';
 import ZulipTextIntl from './ZulipTextIntl';
+import { createStyleSheet } from '../styles';
+import Touchable from './Touchable';
 
 const styles = createStyleSheet({
   container: {
@@ -20,20 +21,13 @@ const styles = createStyleSheet({
     justifyContent: 'center',
   },
   showPasswordButtonText: {
-    margin: 8,
-    color: BRAND_COLOR,
+    fontWeight: 'bold',
   },
 });
 
-// Prettier wants a ", >" here, which is silly.
-// prettier-ignore
-type Props = $ReadOnly<$Diff<InputProps,
-  // "mixed" here is a way of spelling "no matter *what* type
-  // `InputProps` allows for these, don't allow them here."
-  {| secureTextEntry: mixed, autoCorrect: mixed, autoCapitalize: mixed, _: mixed |}>>;
-
 /**
- * A password input component using Input internally.
+ * PasswordInput component to handle password visibility toggle.
+ *
  * Provides a 'show'/'hide' button to show the password.
  *
  * All props are passed through to `Input`.  See `Input` for descriptions.
@@ -47,13 +41,8 @@ export default function PasswordInput(props: Props): Node {
 
   return (
     <View style={styles.container}>
-      <Input
-        {...props}
-        style={styles.input}
-        secureTextEntry={isHidden}
-        autoCorrect={false}
-        autoCapitalize="none"
-      />
+      <Input {...props} secureTextEntry={isHidden} autoCorrect={false} autoCapitalize="none" />
+      {/* Using Pressable instead of Touchable for better performance and compatibility */}
       <Pressable style={styles.showPasswordButton} onPress={handleShow}>
         <ZulipTextIntl style={styles.showPasswordButtonText} text={isHidden ? 'show' : 'hide'} />
       </Pressable>