0

I have a component that renders a <FlatList /> and every item on that list is a <TextInput />.

What I want to achieve is basically jump between those TextInputs when they are submitted, using the Input ref.focus() method and onSubmitEditing props. The thing is that since the FlatList is dynamic and every item has his own key prop meaning that every component rendered in the list is a different instance, I can't find a way to save all the TextInput references and then use them to jump to the next TextInputs.

Expo Demo: https://snack.expo.io/@karljs/react-native-textinput-flatlist

    class Input extends Component {
      constructor (props) {
        super(props)
        this.inputRef = null;
      }

      render () {
        return (
          <View style={styles.row}>
            <Text>{this.props.name}</Text>
            <TextInput
              style={styles.input}
              ref={(ref) => this.inputRef = ref}
            />
            // onSubmitEditing={() => this.nextInput.focus() }}
          </View>
        )
      }
    }

    export default class App extends Component {
      render() {
        return (
          <View style={styles.container}>
            <FlatList
              data={[{name: 'John'}, {name: 'Paul'}]}
              renderItem={({item, index}) => <Input
                key={index}
                name={item.name}
              />}
            />     
          </View>
        );
      }
    }

Thanks!

Karl
  • 1
  • 2

1 Answers1

0

My way...

renderItem(data) {
const { item } = data;
return (
<View>
<TextInput
 ref={(input) => { this['input_' + item.iter] = input; }}
 onSubmitEditing={() => { this['input_' + (item.iter + 1)].focus(); }}
 blurOnSubmit={false}
 selectTextOnFocus
 keyboardType={'numeric'}
 defaultValue={0}
 placeholder="0"
 onChangeText={text => this.changeItem(text, item)}
/>
</View >)
}

<FlatList
 data={doc.products}
 renderItem={item => this.renderItem(item)}
 keyExtractor={item => item.iter.toString()}
 extraData={doc.products}
/>
nico
  • 1
  • 1