React Native: I press text input and keyboard is appears and is automatically dismissed once when using Keyboard.addListener

Question

I was trying to remove a view from the screen when the keyboard appears so everything can fit on the screen.

After the keyboard is initially dismissed the first time - with the keyboardDidHide code commented out - it will not automatically dismiss it again.

Here is the code part of the code. I am using Formik for the form.

What am I doing wrong?

  const [keyboardUp, setKeyboardUp] = React.useState(false);

  Keyboard.addListener("keyboardDidShow", _keyboardDidShow);
  Keyboard.addListener("keyboardDidHide", _keyboardDidHide);
  
  
  React.useEffect(() => {
      Keyboard.addListener("keyboardDidShow", _keyboardDidShow);
      Keyboard.addListener("keyboardDidHide", _keyboardDidHide);

      // cleanup function
      return () => {
        Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
        Keyboard.removeListener("keyboardDidHide", _keyboardDidHide);
      };
    }, []);

    const _keyboardDidShow = () => {
      setKeyboardUp(true);
    };

    const _keyboardDidHide = () => {
      setKeyboardUp(false);
    };


  const LoginForm=()=>{
    let input_height=40;
    
    return (
          <Formik 
            style={{ backgroundColor:"blue" }}
            initialValues={{email:'',password:''}}
            onSubmit={(values)=> {

              let username = values.email;
              let p = values.password;
              
              signIn({ username,p })
            
            }}
            >
          
              {(props)=>(
                <View style={{width:"100%", height:"45%", justifyContent:"center",alignItems:"center"}}>

                    <TextInput style={{width:"75%", borderColor: "#1d3557", borderWidth:1, height:input_height, margin:"2%", paddingLeft:"3%", backgroundColor:"white", borderColor:"grey", borderRadius:8}}
                               placeholder='email' onChangeText={props.handleChange('email')} value={props.values.title} />

                    <TextInput style={{width:"75%", height:input_height, borderColor: "#1d3557", borderWidth:1, margin:"2%", paddingLeft:"3%", backgroundColor:"white", borderColor:"grey", borderRadius:8}}
                               placeholder='password' onChangeText={props.handleChange('password')} value={props.values.password} />
                

                  <TouchableOpacity style={{backgroundColor:"#008b9a", justifyContent:"center", marginTop:"8%", alignItems:"center", width:"75%", height:40, borderRadius:16}} 
                                    onPress={props.handleSubmit}>
                      <Text style={{fontSize:16, fontWeight:"bold"}}>LOGIN</Text>
                  </TouchableOpacity>

                </View>
              )}
  
          </Formik>
    );
  }

Answer 1

I'm seeing on the docs that they add the listeners inside of useEffect from react. Can u try this way?

import React, { useEffect } from "react";
import { Keyboard, TextInput, StyleSheet } from "react-native";

const Example = () => {

  useEffect(() => {
    Keyboard.addListener("keyboardDidShow", _keyboardDidShow);
    Keyboard.addListener("keyboardDidHide", _keyboardDidHide);

    // cleanup function
    return () => {
      Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
      Keyboard.removeListener("keyboardDidHide", _keyboardDidHide);
    };
  }, []);

  const _keyboardDidShow = () => {
    alert("Keyboard Shown");
  };

  const _keyboardDidHide = () => {
    alert("Keyboard Hidden");
  };

  return <TextInput style={s.input} placeholder='Click here ...' onSubmitEditing={Keyboard.dismiss} />;
}

const s = StyleSheet.create({
   input:{
    margin:60,
    padding: 10,
    borderWidth: 0.5,
    borderRadius: 4,
    backgroundColor: "#fff"
   }
})

export default Example;

Answer 2

If this doesn't work,

Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
Keyboard.removeListener("keyboardDidHide", _keyboardDidHide);

Do this

const a = Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
const b = Keyboard.removeListener("keyboardDidHide", _keyboardDidHide);

return a.remove(),b.remove();