Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

341
Visualizações
React Native Focus a textinput inside Flatlist

I have a Flatlist component that renders TextInput and a button that dynamically adds a textinput in the list. The problem is that since the FlatList is dynamic and every textinput has its own ref, I cannot get a reference of a input. I want to get a reference of textinput which is inside the flatlist and focus it.

Sample Code :

<FlatList

    data={this.state.arrayHolder}
    ref={(list) => this.myFlatList = list}
    extraData={this.state.arrayHolder}
    keyExtractor={(index) => index.toString()}
    ItemSeparatorComponent={this.FlatListItemSeparator}
    renderItem={(index) => {

        return (
            <TouchableOpacity>
                <Stack>
                    <Stack>
                        <FormControl.Label>City</FormControl.Label>
                        <TouchableOpacity>
                            <Input
                                isDisabled="true"
                                variant="outline"
                                p={2}
                                placeholder="Choose City"
                                width="100%"
                                InputRightElement={
                                    <Icon
                                        size={20}
                                        name="chevron-down"
                                    />
                                } />
                        </TouchableOpacity>

                    </Stack>
                </Stack>

                <Stack>
                    <FormControl.Label>Field 1</FormControl.Label>
                    <Input blurOnSubmit={false} keyboardType='number-pad' ref={input => { this[index.item[index.index + 1].Field1] = input }} onSubmitEditing={() => { this[index.item[index.index + 1].Field2].focus(); }} onChangeText={(text) => this.addValues(text, index.index, "Field1")} />
                </Stack>

                <Stack>
                    <FormControl.Label>Field 2</FormControl.Label>
                    <Input blurOnSubmit={false} keyboardType='number-pad' ref={input => { this[index.item[index.index + 1].Field2] = input }} onSubmitEditing={() => { this[index.item[index.index + 1].Field3].focus(); }} onChangeText={(text) => this.addValues(text, index.index, "Field2")} />
                </Stack>

                <Stack>
                    <FormControl.Label>Field 3</FormControl.Label>
                    <Input blurOnSubmit={false} keyboardType='number-pad' ref={input => { this[index.item[index.index + 1].Field3] = input }} isDisabled={true} />
                </Stack>

            </TouchableOpacity>

        )
    }}
/>

I want to get reference of field 1 and focus it. The reference is dynamic and coming from index.

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda