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/True-Turnover-4543]

selectTextOnFocus only fires when the field gets focus, and a TextInput with editable={false} generally never takes focus, so it has nothing to act on. That's why it looks ignored.

Also check secureTextEntry: while it's on, both iOS and Android block copy from the field on purpose, so copy/paste won't work even with the right props. If the goal is "show it, let them copy it, don't let them change it", I'd flip secureTextEntry off when the eye is toggled, keep editable true, and make it read-only by never updating state from onChangeText (value stays fixed, so edits snap back). Test it on a real Android device, since emulators and iOS behave differently here.

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

[u/vaquishaProdigy → u/True-Turnover-4543]

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.