Keyboard closed on click on button in react native

Question

I have creating a comment modal in which user can add comment. This section has a list of comments and a text input field to enter comments and a button to submit comment but the problem is the I enter something in text input and then press button to submit comment but first time it closes the keyboard and then I need to press button again to add the text into the array.

My problem is why I need to press two times. Why on first time my keyboard got closed.

  <KeyboardAvoidingView
    style={{
      display: "flex",
      height: Dimensions.get("window").height,
      width: Dimensions.get("window").width,
    }}
    behavior={Platform.OS === "ios" ? "padding" : "height"}
  >
    <SafeAreaView
      style={{
        backgroundColor: "transparent",
        flex: 1,
      }}
    >
      <View
        style={{ flex: 0.4, backgroundColor: "#000", opacity: 0.2 }}
      ></View>

      <View
        style={{
          flex: 0.6,
          backgroundColor: Colors.dark.text,
          borderRadius: 20,
        }}
      >
        <View
          style={{
            flexDirection: "row",
            marginTop: "3%",
            paddingVertical: height * 0.005,
            marginVertical: "4%",
            borderTopRightRadius: 10,
            borderTopLeftRadius: 10,
            paddingHorizontal: "3%",
          }}
        >
          <View style={{ flexDirection: "column", width: width * 0.8 }}>
            <Text
              style={{
                fontFamily: "Roboto_700Bold",
                fontSize: 10,
                color: Colors.light.text,
                opacity: 0.4,
              }}
            >
              COMMENTS
            </Text>

            <Text
              style={{
                fontFamily: "Roboto_700Bold",
                fontSize: 20,
                marginTop: height * 0.01,
              }}
            >
              {title}
            </Text>
          </View>

          <TouchableOpacity
            onPress={() => setCommentVisible(false)}
            style={{
              width: width * 0.15,
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <SvgRedCross />
          </TouchableOpacity>
        </View>

        <View
          style={{
            flex: 0.002,
            backgroundColor: Colors.light.postText,
            opacity: 0.2,
          }}
        >
          <Text></Text>
        </View>

        <View style={{ flex: 0.87 }}>
          <FlatList
            data={allComment}
            showsVerticalScrollIndicator={false}
            keyExtractor={(item, index) => item.id}
            key={(item, index) => item.qId}
            renderItem={({ item, index }) => (
              <View>
                <View style={{ flexDirection: "column", padding: "3%" }}>
                  <Text
                    style={{
                      color: "#151617",
                      fontFamily: "Roboto_700Bold",
                      fontSize: 14,
                    }}
                  >
                    {item.name}{" "}
                  </Text>
                  <Text
                    style={{
                      color: "#151617",
                      fontFamily: "Roboto_400Regular",
                      fontSize: 13,
                    }}
                  >
                    {item.comment}{" "}
                  </Text>
                </View>

                <View
                  style={{
                    height: 0.5,
                    backgroundColor: Colors.light.postText,
                    opacity: 0.2,

                    marginTop: "3%",
                  }}
                >
                  <Text></Text>
                </View>
              </View>
            )}
            style={{}}
            pagingEnabled={false}
            showsHorizontalScrollIndicator={false}
          />
        </View>

        <View
          style={{
            height: height * 0.08,
            elevation: 2,
            backgroundColor: "#fff",
            flexDirection: "row",
            alignItems: "center",
            borderColor: Colors.light.tabSelection,
            shadowColor: Colors.light.tabSelection,
            shadowOffset: {
              width: 0,
              height: -3,
            },
            shadowRadius: 1,
            shadowOpacity: 0.4,
            position: "absolute",
            bottom: 0,
            flex: 0.2,
          }}
        >
          <TextInput
            style={{
              fontWeight: "300",
              fontStyle: "normal",
              fontSize: 13,
              fontFamily: "Roboto_400Regular",
              paddingLeft: "5%",
              paddingLeft: "5%",
              color:
                theme === true
                  ? Colors.dark.postDateText
                  : Colors.light.postDateText,
              width: "80%",
            }}
            value={comment}
            onChangeText={(value) => {
              setComment(value);
            }}
            maxLength={150}
            clearButtonMode="always"
            multiline={true}
            placeholder="Write your comments here..."
            placeholderTextColor={Colors.light.postDateText}
            onSubmitEditing={() => Keyboard.dismiss()}
          />
           
          //button code to submit comment
          <TouchableOpacity
            onPress={() => {
              addComment(comment);
              // Keyboard.dismiss();
            }}
            style={{ width: "20%", marginLeft: 10 }}
          >
            <SvgCommentArrow />
          </TouchableOpacity>
        </View>
      </View>
    </SafeAreaView>
  </KeyboardAvoidingView>

Answer 1

It may happened due to not specifying the keyboard type in the textinput props https://reactnative.dev/docs/textinput#keyboardtype. also refer this https://reactnative.dev/docs/keyboard