Keyboard closed on click on button in react native - reactjs

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