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.