CODEWITHSUNDEEP
react-native
localdata01
localdata01

Reputation: 657

react native keyboard does not dismiss why?

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!

Upvotes: 1

Views: 348

Answers (1)

Kamal Pandey
Kamal Pandey

Reputation: 1596

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

Upvotes: 4

Related Questions