Automatically scroll ScrollView in KeyboardAvoidingView when I add a new TextInput

Question

I am working with a KeyboardAvoidingView and it's working perfectly fine except for one small issue. In the code below I have a TouchableOpacity that when clicked runs the function addName() which appends to an array and creates a new TextInput - basically when you click it, it adds a new TextInput to the ScrollView.

The KeyboardAvoidingView works perfectly fine except every time a new TextInput is added/rendered, I have to scroll down to see it. Do you know how I can make it automatically scroll to the bottom when a new TextInput is rendered?

Here is my code for the KeyboardAvoidingView:

<KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS == "ios" ? "padding" : "height"}
    >
      <HeaderComponent
        name={this.props.route.params.bill.barName + " Tab"}
        navigation={this.props.navigation}
        goHome={true}
        goHomePrompt={true}
      />

      <View
        style={{
          marginTop: 30,
          marginLeft: 10,
        }}
      >
        <Text
          style={{ color: "white", fontSize: 18 }}
          allowFontScaling={false}
        >
          Add people to split with...
        </Text>
      </View>

      <ScrollView keyboardShouldPersistTaps={"handled"}>
        {this.state.nameInput.map((value, index) => (
          <View style={styles.nameContainer} key={index}>
            <View
              style={{
                width: "90%",
              }}
            >
              <TextInput
                style={styles.textInputContainer}
                value={value}
                onChange={this.handleText(index)}
                placeholder={"Enter name..."}
                placeholderTextColor={"#333333"}
                maxLength={50}
              />
            </View>

            <View
              style={{
                width: "10%",
              }}
            >
              <TouchableOpacity
                onPress={() => this.handleDelete(index)}
              >
                <Icon name="cancel" type="material" color="red" />
              </TouchableOpacity>
            </View>
          </View>
        ))}

        <TouchableOpacity onPress={() => this.addName()}>
          <Text style={styles.addPerson}>+ Add Person</Text>
        </TouchableOpacity>
      </ScrollView>

      <View style={styles.bottomContainer}>
        <TouchableOpacity
          style={styles.continueButton}
          onPress={() => {
            // filters through array to make sure there are no empty strings
            let nameInput = this.state.nameInput.filter(
              (name) => name !== ""
            );

            if (
              nameInput.length > 1 &&
              new Set(nameInput).size === nameInput.length
            ) {
              this.setState({ nameInput, loading: false });
            } else {
              alert(
                "Please make sure there are at least two people and no duplicate names!"
              );
            }
          }}
        >
          <Text style={styles.continueButtonText} allowFontScaling={false}>
            Continue to Split Tab
          </Text>
        </TouchableOpacity>
      </View>
    </KeyboardAvoidingView>

And here is my code for the addName() function:

addName = () => {
    let nameInput = this.state.nameInput.concat("");
    this.setState({
      nameInput,
    });
};

Answer 1

此页面具有我正在寻找的解决方案： 是否可以将 ScrollView 滚动到底部？