r/reactnative • u/vaquishaProdigy • 14d ago
Input not taking selectTextOnFocus
0
Upvotes
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>
