Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Passing ref to a textInput wrapped in a component

$
0
0

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.


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>