How to use KeyboardAvoidingView to remove image whenever keypad opens in react native? i am built a app login page and that login page has i img at the top which is a logo so when ever i am entering my email to the login page keyboard opens and than the logo img and the login form mess each other up and it looks bad

So how can i remove the image when ever the keyboard opens? i tried to use KeyboardAvoidingView but it didn't work i think i don't used it properly so can anyone can tell how to use it properly in my case?

import { StyleSheet, Text, View, Image, TextInput, Button, } from 'react-native'
import React from 'react'
import logo from '../../../../assets/Instagram_Logo.png';
import { containerFull, hr80, logo1 } from '../../../CommonCss/PageCss';
import { formbtn, formHead, formInput, formTextLinkCenter, formTextLinkRight } from '../../../CommonCss/FormCss';

const Login = ({ navigation }) => {
  return (
    <View style={containerFull}>
      <Image source={logo} style={logo1} />
      <Text style={formHead}>Login</Text>
      <TextInput placeholder='Enter your email' placeholderTextColor="grey" style={formInput} />
      <TextInput placeholder='Password' placeholderTextColor="grey" style={formInput} secureTextEntry={true} />
      <Text style={formTextLinkRight}
        onPress={() => navigation.navigate('forgetpassword_email')}>Forget Password?</Text>
      <Text style={formbtn}
        onPress={() => navigation.navigate('mainpage')}>Submit</Text>
      <View style={hr80}></View>
      <Text style={formTextLinkCenter}>Don't have an account?
        <Text style={{ color: 'white' }} onPress={() => navigation.navigate('signup_email')}> SignUp</Text></Text>
    </View>
  )
}

export default Login

const styles = StyleSheet.create({})

CodePudding user response：

You can take one state variable and manage it for your image show hide using keyboard event listener.

const [isKeyboardVisible, setKeyboardVisible] = useState(false);

useEffect(() => {
   const keyboardDidShowListener = 
    Keyboard.addListener(
  'keyboardDidShow',
  () => {
    setKeyboardVisible(true); // or some other action
  }
);
const keyboardDidHideListener = Keyboard.addListener(
  'keyboardDidHide',
  () => {
    setKeyboardVisible(false); // or some other action
  }
);

return () => {
  keyboardDidHideListener.remove();
  keyboardDidShowListener.remove();
};
}, []);


return (
 <View style={containerFull}>
  { !isKeyboardVisible&& (<Image source={logo} style={logo1} />)}
  <Text style={formHead}>Login</Text>
  <TextInput placeholder='Enter your email' placeholderTextColor="grey" style={formInput} />
  <TextInput placeholder='Password' placeholderTextColor="grey" style={formInput} secureTextEntry={true} />
  <Text style={formTextLinkRight}
    onPress={() => navigation.navigate('forgetpassword_email')}>Forget Password?</Text>
  <Text style={formbtn}
    onPress={() => navigation.navigate('mainpage')}>Submit</Text>
  <View style={hr80}></View>
  <Text style={formTextLinkCenter}>Don't have an account?
    <Text style={{ color: 'white' }} onPress={() => navigation.navigate('signup_email')}> SignUp</Text></Text>
</View>
)