Hola a todos y gracias de antemano.
Tengo una pantalla, en la que genero dinámicamente los TextInput (el número de textInput generados por defecto es 4), y desde el componente padre se puede indicar cuántos inputs se quieren tener en la vista.
He conseguido dinamizar la generación de inputs, pero necesito dinamizar las referencias y no encuentro la forma.
Tal y como está ahora, funciona perfectamente para 4 inputs, pero si lo creo desde el componente padre con 2 inputs, se rompe.
Este es el código:
import React, { useRef } from 'react'
import { TextInputProps, View, TextInput } from 'react-native'
interface iPinCode extends TextInputProps {
onComplete: (code: string) => void
length?: number
}
const PinCode: React.FunctionComponent<iPinCode> = ({ onComplete, length }) => {
const inputStyle = {
height: 75,
width: 50,
fontSize: 26,
color: '#FFF',
backgroundColor: '#4B4B4B',
borderRadius: 15,
padding: 8,
margin: 4,
}
const _getInputs = (length: number) => {
let inputs: JSX.Element[] = []
let pin: string[] = []
let refFirstInput = useRef()
let refSecondInput = useRef()
let refThirdInput = useRef()
let refFourthInput = useRef()
for (let i = 0; i < length; i++) {
inputs.push(
<TextInput
key={i}
style={[inputStyle, { textAlign: 'center' }]}
onChangeText={text => {
text.length >= 1 ? pin.splice(i, 0, text) : pin.splice(i, 1)
i === 0
? text.length > 0 && refSecondInput.current.focus()
: i === 1
? text.length > 0 && refThirdInput.current.focus()
: i === 2
&& text.length > 0 && refFourthInput.current.focus()
console.log('PIN: ', pin)
}}
value={pin[i]}
onKeyPress={({ nativeEvent }) => {
nativeEvent.key === 'Backspace' &&
i === 3 && refThirdInput.current.focus() ||
i === 2 && refSecondInput.current.focus() ||
i === 1 && refFirstInput.current.focus()
}}
secureTextEntry
keyboardType="numeric"
maxLength={1}
returnKeyType={i === 3 ? 'done' : 'next'}
onSubmitEditing={() => { onComplete(pin.join('')); console.log('PIN TO SEND: ', pin.join(''))}}
ref={
i === 0
? refFirstInput
: i === 1
? refSecondInput
: i === 2
? refThirdInput
: i === 3
&& refFourthInput
}
autoFocus={i === 0 && true}
/>
)
}
return (
<View style={{ flexDirection: 'row', justifyContent: 'center' }}>
{inputs}
</View>
)
}
return <>{_getInputs(length || 4)}</>
}
export default PinCode
Ahora funciona perfectamente con 4 entradas, pero falla con otro número de inputs.
Necesito saber como establecer refs dinámicas para pasarlas dentro del bucle for y usarlas en onChangeText y onKeyPress del componente TextInput.
He intentado crear nombres de variables dinámicas pero no funciona. Si pudiese utilizar el index del bucle for para crear referencias dinámicas, creo que estaría solucionado, pero no consigo hacerlo.
Muchas gracias.