CODEWITHSUNDEEP
react-nativeexpo
localdata01
localdata01

Reputation: 657

react native keyboard dismiss not working

can anyone explain me why keyboard dismiss not works ? No errors and nothing happens.

In my last project it works, but not there. What do I am wrong?

Code:

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Text, TextInput, TouchableOpacity, KeyboardAvoidingView, ScrollView, Dimensions, Keyboard } from 'react-native';
import { AntDesign } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';

const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;

const Home = () => {
  const [searchInput, setSearchInput] = useState('');
  
  return (
    <KeyboardAvoidingView onPress={() => Keyboard.dismiss()} style={styles.container}>
      <LinearGradient
        style={styles.header}
        colors={['blue', 'red', 'orange']}
      >
        <View style={{alignItems: 'flex-end'}}>
          <TouchableOpacity>
            <AntDesign style={{textAlign: 'right'}} name="pluscircleo" size={42} color="#fff" />
          </TouchableOpacity>
        </View>
        <View style={styles.headerBottom}>
          <Text style={styles.headerText}>Treffpunkt</Text>
          <TextInput
            placeholder="Gebe deinen Code ein"
            value={searchInput}
            onChangeText={value => setSearchInput(value)}
            style={styles.searchInput}
          />
        </View>
      </LinearGradient>
    </KeyboardAvoidingView>
  )
};

Upvotes: 0

Views: 984

Answers (1)

nipuna-g
nipuna-g

Reputation: 6652

As Konstantin had mentioned in the comment, KeyboardAvoidingView does not have an onPress event.

You can have a child element before the gradient that will handle the press for you.

You can refer to the expo example here

<KeyboardAvoidingView
  style={styles.container}>
  <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
    <LinearGradient
      style={styles.header}
      colors={['blue', 'red', 'orange']}>
      <View style={{ alignItems: 'flex-end' }}>
        ...
      </View>
    </LinearGradient>
  </TouchableWithoutFeedback>
</KeyboardAvoidingView>

Upvotes: 1

Related Questions