i am trying to use Keyboard.dismiss() inside of a TouchableWithoutFeedback element and for some reason, no matter where i place this TouchableWithoutFeedback element, the keyboard doesn't dismiss when tapping on areas outside the TextInput, but it does dismiss when tapping the keyboard itself! why does this happen and how do i fix it? p.s. it worked fine on a different project

Message for Stack Overflow staff: many of my threads are being locked for "not being clear" even though i am being very thorough in each and every one of them DO NOT LOCK THIS THREAD

the code:

return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss()}>
<View style={styles.mainView}>

  <View style={styles.topSearchView}>
    <Image source={require("../../assets/NewSearchIcon.png")} style={styles.searchIcon} />
    <TextInput
      placeholder="Search for food you like..."
      onChangeText={searchedCoursesHandler}
      value={searchedCourses}
      onFocus={() => { setInputBorderOnFocus(true) }}
      style={{
        borderColor: inputBorderOnFocus === true ? "#428463" : "grey",
        borderWidth: 2,
        width: 260,
        height: 50,
        marginLeft: 10,
        fontSize: 18,
        padding: 5,
        borderRadius: 8,
        fontSize: 16
      }}
    />
    <TouchableOpacity
      onPress={() => { setSearchedCourses("") }}
      style={styles.deleteInputTouchable}
    >
      <Image source={require("../../assets/newXicon.png")} style={styles.xButtonIcon} />
    </TouchableOpacity>
  </View>

   


  <View style={styles.flatListView}>
    <FlatList
      data={searchedCourses}
      renderItem={({ item }) => (
        <TouchableOpacity
          onPress={() => {
            navigation.navigate('item profile', {
              item: item,
            });
          }}
        >
          <View style={styles.flatListItemView}>
            <Image source={{ uri: item.img }} style={styles.flatListImg} />
            <Text>{item.name}</Text>
            <Text>{item.price}$</Text>
          </View>
        </TouchableOpacity>
      )}
      horizontal={true}
    />
  </View>



  {
    searchedCourses.length < 1 &&
    <Image source={require("../../assets/NewPastaImage.png")} style={styles.pastaIcon} />
  }


</View>
</TouchableWithoutFeedback>

);

enter code here

CodePudding user response：

Change This <TouchableWithoutFeedback onPress={Keyboard.dismiss()}>

into this

<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>