Quiero crear un campo de entrada que devuelva el texto imputado en minúsculas. estoy usando expo
const [login, setLogin] = useState(''); //... <TextInput style={{backgroundColor:'#bbb'}} value={login} onChangeText={(val)=>setLogin(val.toLowerCase())} placeholder="email or username" ></TextInput>Obtengo un resultado extraño al probarlo en mi dispositivo.
mi entrada: 'K' => inicio de sesión = 'k'
mi entrada: 'k' => inicio de sesión = 'kkk'
mi entrada: 'k' => inicio de sesión = 'kkkkkkk'
Es posible que deba intentarlo varias veces para recrear mi resultado, ya que no sucede siempre. Cuando .toLowerCase() , funciona correctamente.
Hice un ejemplo ejecutable para que lo pruebes. Ejecutarlo en modo web funciona bien, pero cuando lo ejecuto en mi dispositivo, ocurre el mismo error que en mi proyecto.
Aquí hay un video de lo que me sucede cuando lo ejecuto en Android 10. Puede ver que no siempre sucede, pero a veces se registra como si hubiera presionado "q" tres veces cuando solo lo presioné. dos veces
Creo que te encuentras con un error react-native conocido, relacionado con las entradas de texto y las mayúsculas en la plataforma Android. Abra el problema de github #27449 .
Como solución, puede forzar la entrada de texto para usar el tipo de teclado visible-password en Android.
Ejemplo de trabajo para que usted pruebe:
import React, { useState } from 'react'; import { Text, View, StyleSheet, TextInput } from 'react-native'; import { Platform } from 'react-native'; export default function App() { const [login, setLogin] = useState(''); return ( <View style={styles.container}> <TextInput style={{backgroundColor:'#bbb'}} value={login} onChangeText={(val)=>setLogin(val.toLowerCase())} keyboardType={Platform.OS === 'ios' ? 'default' : 'visible-password'} placeholder="email or username" ></TextInput> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', padding: 80, }, });El crédito por la solución es para simon-davies-avtura