I have 6 TextInputs and I am trying to switch through all of them (switching focus) when pressing the submit button on the keyboard. I have a functional component that uses a TextInput from react-native-paper inside of it. I want to pass a ref as prop when using this component. Unfortunately, I don´t know how.
My Component:
type ParticipantProps = { placeholder: React.ReactNode onChangeText: (text: string) => void ref: React.MutableRefObject<typeof TextInput> //This type is wrong} export default function ParticipantInput({ placeholder, onChangeText, ref }: ParticipantProps) { const [name, setName] = useState(""); const formatUserName = (textValue: string): string => { var upperCase: string = textValue.toUpperCase() setName(upperCase); return upperCase; } return (<View style={styles.inputContainer}><Text>{placeholder}</Text><TextInput ref={ref} value={name} onChangeText={(text) => { onChangeText(formatUserName(text)); }} maxLength={2} autoCorrect={false} autoCapitalize='characters' style={styles.textInput} underlineColor={Colors.secondary} activeUnderlineColor={Colors.secondary} theme={{ colors: { text: Colors.tint } }} /></View> )}
Where I want to use it:
<View style={styles.inputContainer}><ParticipantInput placeholder='Spieler 1' onChangeText={(name) => setPlayer(players.set(1, name))} /><ParticipantInput placeholder='Spieler 2' onChangeText={(name) => setPlayer(players.set(2, name))} /><ParticipantInput placeholder='Spieler 3' onChangeText={(name) => setPlayer(players.set(3, name))} /><ParticipantInput placeholder='Spieler 4' onChangeText={(name) => setPlayer(players.set(4, name))} /><ParticipantInput placeholder='Spieler 5' onChangeText={(name) => setPlayer(players.set(5, name))} /><ParticipantInput placeholder='Spieler 6' onChangeText={(name) => setPlayer(players.set(6, name))} /></View>
First of all, I dont know what type I have to give the ref prop.