Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

338
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!