Estoy trabajando en un proyecto nativo de reacción. Tengo un campo de contraseña en la página de inicio de sesión y quiero agregar un icono de ojo en el extremo derecho del campo de entrada. Mi código actualmente se ve así:
<View><TextInput placeholder='Enter your Password' autoCorrect={false} secureTextEntry={true} textContentType='password'></TextInput></View>Este es un campo de entrada normal con un texto de marcador de posición.
Encuentre el siguiente código:
const [password, setPassword] = useState(''); const [isPasswordSecure, setIsPasswordSecure] = useState(true); <View style={styles.viewPassword}> <TextInput secureTextEntry={isPasswordSecure} style={styles.textInputStyle} right={ <TextInput.Icon name={() => <MaterialCommunityIcons name={isPasswordSecure ? "eye-off" : "eye"} size={28} color={COLORS.black} />} // where <Icon /> is any component from vector-icons or anything else onPress={() => { isPasswordSecure ? setIsPasswordSecure(false) : setIsPasswordSecure(true) }} /> } fontFamily={FONTS.ROBOTO_REGULAR} fontSize={Theme.FONT_18PX} selectionColor={COLORS.orange} underlineColor={COLORS.orange} label={StringsConstants.Password} value={password} onChangeText={text => setPassword(text)} underlineColorAndroid="transparent" theme={{ colors: { text: COLORS.black, primary: COLORS.orange, placeholder: COLORS.black } }} /> </View>¡Espero que te ayude!
puedes ponerlo y darle estilo así
<View> <TextInput placeholder='Enter your Password' autoCorrect={false} secureTextEntry={true} textContentType='password' /> <EyeIconOrImage style={{ position: 'absolute', right: 20, }} /> </View>