title: How do I show components below textinput when keyboard is open in react native?
body: <p>I want the tags below the interests textbox to display while the keyboard is open. The chip components are the tags input from the react native paper library. I've tried using <code>scrollview</code>, <code>keyboardavoidingview</code>, and <code>keyboardawarescrollview</code> to get the tags to display while the keyboard is open but none of the views fixed the issue. What would I be missing or doing wrong?</p>
  
  <pre><code>  GetTags = () =&gt; {
      const tagsComponent = [];
      if (typeof this.state.interests !== "undefined") {
        for (let i = 0; i &lt; this.state.interests.length; i++) {
          tagsComponent.push(
            &lt;Chip
              key={i}
              style={{ margin: 3 }}
              onClose={() =&gt; {
                this.setState(prevState =&gt; ({
                  interests: prevState.interests.filter(
                    x =&gt; x !== prevState.interests[i]
                  )
                }));
              }}
            &gt;
              {this.state.interests[i]}
            &lt;/Chip&gt;
          );
        }
      }
      return tagsComponent;
    };
  
    render() {
      const displayTags = this.GetTags();
      return (
        &lt;ScrollView style={{ marginTop: 20 }} keyboardShouldPersistTaps="always"&gt;
          &lt;View
            style={{
              flex: 1,
              alignItems: "center",
              justifyContent: "center"
            }}
          &gt;
            {this.state.profile ? (
              &lt;Avatar
                size="xlarge"
                rounded
                source={{ uri: this.state.profile }}
                showEditButton
                onEditPress={() =&gt; this.onChooseImageUpload()}
              /&gt;
            ) : (
              &lt;Avatar
                {...this.state.avatarError}
                size="xlarge"
                rounded
                icon={{
                  name: "user",
                  type: "font-awesome"
                }}
                showEditButton
                onEditPress={() =&gt; this.onChooseImageUpload()}
              /&gt;
            )}
            &lt;Text
              style={{
                fontWeight: "500",
                fontSize: 20,
                marginTop: 8,
                marginRight: "70%",
                color: "#5b5b5b"
              }}
            &gt;
              About me
            &lt;/Text&gt;
            &lt;TextInput
              style={{
                borderColor: Themes.layoutTheme,
                borderWidth: 1,
                width: "100%",
                marginTop: 5,
                padding: 5,
                textAlignVertical: "top"
              }}
              multiline
              numberOfLines={7}
              placeholder="Type something about yourself..."
              onChangeText={text =&gt; this.setState({ bio: text })}
              value={this.state.bio}
            /&gt;
            &lt;View style={{ flexDirection: "row" }}&gt;
              &lt;Text
                style={{
                  fontWeight: "500",
                  fontSize: 20,
                  marginTop: 22,
                  color: "#5b5b5b"
                }}
              &gt;
                Interests
              &lt;/Text&gt;
              &lt;RNPTextInput
                ref={input}
                style={{
                  height: 45,
                  marginTop: 10,
                  marginRight: 82,
                  marginLeft: 10
                }}
                underlineColor={Themes.primaryTheme}
                placeholder="Example: Skydiving,"
                theme={{ colors: { primary: Themes.primaryTheme } }}
                onChangeText={text =&gt; {
                  if (text.endsWith(",")) {
                    const newText = text.replace(",", "");
                    if (typeof this.state.interests === "undefined") {
                      this.setState({ interests: [newText] });
                    } else {
                      this.setState(prevState =&gt; ({
                        interests: [...prevState.interests, newText]
                      }));
                    }
                    input.current.clear();
                  }
                }}
              /&gt;
            &lt;/View&gt;
            &lt;View
              style={{
                marginTop: 15,
                flexDirection: "row",
                flexWrap: "wrap",
                alignItems: "flex-start"
              }}
            &gt;
              {displayTags}
            &lt;/View&gt;
            {this.state.loading ? (
              &lt;Progress.Bar
                style={{ marginTop: 25 }}
                indeterminate
                color={Themes.primaryTheme}
              /&gt;
            ) : (
              &lt;Button
                raised
                containerStyle={{
                  width: "25%",
                  marginTop: 20
                }}
                buttonStyle={{ backgroundColor: Themes.primaryTheme }}
                title="Save"
                onPress={() =&gt; {
                  if (fireStoreDB.getAvatar == null) {
                    this.setState({
                      avatarError: {
                        containerStyle: { borderWidth: 1, borderColor: "red" }
                      }
                    });
                  } else {
                    fireStoreDB
                      .updateProfile(this.state.bio, this.state.interests)
                      .then(() =&gt; this.props.navigation.navigate("Home"));
                  }
                }}
              /&gt;
            )}
          &lt;/View&gt;
        &lt;/ScrollView&gt;
      );
    }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/oa53T.png" width="400" />
  <img src="https://i.stack.imgur.com/mKMHo.png" width="400" /></p>