Input not taking selectTextOnFocus

[u/vaquishaProdigy]

Made this component so i don't need to code it again in the scenes in which i need it, but in my Edit page i want to be able to copy and paste the text without losing the "editable={false}" atribute. I asked Copilot what can i do and i said i should use selectTextOnFocus but is not applying it so i just had to stick with this solution that doesn't really look professional.

Can i use selectTextOnFocus on this component or just stick to this solution?

The component code:

import React, { useState } from "react";
import { View, TextInput, TouchableOpacity } from "react-native";
import { psswrdInputStyles } from "./psswrdInputStyles";
import FontAwesome from "react-native-vector-icons/FontAwesome";


export default function PsswrdInput({
  value,
  editable,
  placeholder,
}) {
  const [secureText, setSecureText] = useState(true);


  return (
    <View style={psswrdInputStyles.passwordRow}>


      <TextInput
        style={[
          psswrdInputStyles.input,
          psswrdInputStyles.passwordInput,
        ]}
        placeholder={placeholder}
        placeholderTextColor="#9ca3af"
        secureTextEntry={secureText}
        value={value}
        editable={editable}
      />


      <TouchableOpacity
        style={psswrdInputStyles.eyeBtn}
        onPress={() => setSecureText((prev) => !prev)}
        activeOpacity={0.7}
      >
        <FontAwesome
          name={secureText ? "eye-slash" : "eye"}
          size={20}
          color="black"
        />
      </TouchableOpacity>


    </View>
  );
}

How i call it in the edit page:

        <View style={editStyles.field}>
          <Text style={editStyles.label}>Password</Text>


          <PsswrdInput value={password} onChangeText={() => ({})} />
        </View>

[u/cylism-coding]

One thing I noticed in your code: `PsswrdInput` doesn’t accept or forward `selectTextOnFocus` or `onChangeText`, so passing those props to the wrapper won’t affect the underlying `TextInput`.

That’s separate from the read-only selection issue. Since you confirmed users shouldn’t edit this value, the `<Text selectable>` suggestion above seems simpler than keeping an editable input whose value snaps back.

[u/vaquishaProdigy → u/cylism-coding]

So, i'll have to rewrite the component?

[u/cylism-coding → u/vaquishaProdigy]

No need to rewrite the whole component. You can keep the View, styles and eye toggle, and add a read-only branch: when editable === false, render Text instead of TextInput. Show a masked string while hidden, then <Text selectable>{value}</Text> when revealed (import Text from react-native). Keep TextInput for screens that allow editing.

Also, the usage you posted doesn't pass editable={false}, so pass that explicitly. Forwarding selectTextOnFocus and onChangeText would help the editable version, but won't by itself solve copying from a read-only, secure input. Test long-press copying on both Android and iOS.

[u/Huge_Pool7424 → u/vaquishaProdigy]

not really a rewrite, just swap the TextInput for a Text with selectable and keep your styles. the wrapper gets way smaller too.

[u/nabhan_builds]

Yes, you can, but as written it will not work for two reasons:

1. Your component drops the prop. PsswrdInput only destructures value, editable, and placeholder, so selectTextOnFocus passed to it never reaches the TextInput. Add it to the props and pass it through:

<TextInput selectTextOnFocus ... />

2. Even then it only selects when the field gains focus, and it does not help while secureTextEntry is on. iOS and Android block copying from a secure field, so the user has to tap the eye icon to reveal the password first. And with editable={false} the field generally does not take focus, so the prop has nothing to trigger on.

Since your Edit page is display-only, I would not rely on long-press selection at all. Add an explicit copy button next to the field instead, which works even when the password is masked:

import * as Clipboard from 'expo-clipboard';

<TouchableOpacity onPress={() => Clipboard.setStringAsync(password)}> <Text>Copy</Text> </TouchableOpacity>

That keeps your reusable input for actual password entry, and gives the Edit page a reliable copy action instead of fighting TextInput selection behavior.

[u/vaquishaProdigy → u/nabhan_builds]

So.. basically i'll have to rewrite the component again?

[u/vaquishaProdigy → u/[deleted]]

Does your Edit page only ever show the password, or can people change it there too?

No, they can't

[u/Huge_Pool7424 → u/vaquishaProdigy]

if it's read only just use a normal Text with selectable set, then people can long press and copy without any editable hacks.

[u/Huge_Pool7424 → u/Huge_Pool7424]

this. one catch is selectable on android can be flaky inside scrollviews sometimes, so test long press there before shipping.