react native keyboard does not dismiss why? - react-native

Question

I have a keyboardavoidingview with flex 1 with an onPress function that should dismiss the keyboard but nothing happens.
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, useWindowDimensions, KeyboardAvoidingView, Keyboard } from 'react-native';
import { TouchableOpacity, ScrollView, TextInput } from 'react-native-gesture-handler';
import { AntDesign } from '#expo/vector-icons';
const Home = ({ navigation }) => {
const width = useWindowDimensions().width;
const height = useWindowDimensions().height;
return (
<KeyboardAvoidingView onPress={Keyboard.dismiss} style={styles.container}>
<View style={styles.header}>
<View style={styles.headerTop}>
<TouchableOpacity>
<AntDesign name="pluscircleo" size={42} color="#fff" />
</TouchableOpacity>
</View>
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<Text style={styles.title}>Restaurant</Text>
</View>
<View style={styles.inputContainer}>
<TextInput style={styles.input} placeholder="Find Restuarants" />
</View>
</View>
<StatusBar backgroundColor="#fff" />
</KeyboardAvoidingView>
)
};
const styles = StyleSheet.create({
container: {
flex: 1
},
header: {
backgroundColor: 'red',
},
headerTop: {
paddingTop: 30,
},
title: {
fontSize: 22,
color: '#fff',
},
inputContainer: {
justifyContent: 'center',
alignItems: 'center',
margin: 10
},
input: {
color: '#333',
borderColor: '#fff',
borderRadius: 5,
padding: 6,
backgroundColor: '#fff',
width: 290
}
});
export default Home;
if I delete keyboard.dismiss and add console.log('test') then again nothing happens.
Where is my issue?
thanks for your help!

Answer 1

You should wrap the KeyboardAvoidingView with TouchableWithoutFeedback and remove onPress from the KeyboardAvoidingView and put it in the TouchableWithoutFeedback
import { StyleSheet, Text, View, useWindowDimensions, KeyboardAvoidingView, Keyboard, Platform, Alert, TouchableWithoutFeedback } from 'react-native';
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<KeyboardAvoidingView style={styles.container}>
</KeybaordAvoidingView />
</TouchableWithoutFeedback>
Link here