I have added a picture on bottom. Now my keyboard is not opening

Question

I have added a picture on the bottom of the mobile screen with style as:

bottomView: {
    position: 'absolute',
    bottom: 0, 
},

Above this picture, I have my sign-in form, but because the picture is at the absolute position, it is not letting the keyboard open. I don't want to make this picture relative as it will disturb the picture. Can anyone help me in such a way that I want to keep the picture on the bottom too but want to open the keyboard as well.

Complete code is:

import React from "react";
import { Image, StyleSheet, Text, View ,TextInput,KeyboardAvoidingView} from "react-native";
import Authentication_Button from "./Authentication_Button";
import { SocialIcon } from 'react-native-elements'


const Login = () => {

    const [email, setEmail] = React.useState('');
    const [password, setPassword] = React.useState('');
    return(
        
      <KeyboardAvoidingView   behavior={Platform.OS === "ios" ? "padding" : "height"}
      style={styles.container} enabled>
        {/* <View style={styles.container}> */}
          <Image source={require('./assets/Logo.png')} style={styles.logo}/>     
                     
          <TextInput
              label="Email"
              value={email}
              onChangeText={email => setEmail(email)}
              style={styles.TXT_INPUT}
              placeholder="Email"
          />
          <TextInput
              label="Password"
              value={password}
              onChangeText={password => setPassword(password)}
              style={styles.TXT_INPUT}
              placeholder="Password"
          />
          <View style={styles.auth}>
            <Authentication_Button title={"Login"} backGroundColor={"#2c88d1"}  textColor = {"#FFFFFF"} borderColor={"#2c88d1"}/>
            
            <Authentication_Button title={"Signup"} backGroundColor={"#FFFFFF"}  textColor = {"#2c88d1"} borderColor={"#2c88d1"}/>
          </View>
          <Text>- OR -</Text>
          <Text>Sign in with </Text>
          

          <SocialIcon
                raised={true}
                type='google'
                style={{backgroundColor:"#2c88d1"}}
            />
          

          <KeyboardAvoidingView style={styles.bottomView}>
            <Image source={require('./assets/footLogin.png')} />
          </KeyboardAvoidingView>

        {/* </View> */}
        </KeyboardAvoidingView>

   )
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor:"#effdfe",
    justifyContent:"center",
    alignItems:"center",
    padding:20
  },
  logo :{
    width:150,
    height:150,
    resizeMode:'cover'
  },
  TXT_INPUT:{
    marginBottom:10,
    marginTop:10,
    borderRadius:12,
    borderWidth:1.4,
    width:"85%",
    paddingVertical:14,
    backgroundColor:"#ffffff",
    color:"#000000",
    fontSize:18
  },  

  auth:{
    marginTop:10,
    marginBottom:10,
    width:"85%",
  },
  bottomView: {
    marginTop:'5%',
    position: 'absolute', //Here is the trick
    bottom: 1, //Here is the trick
  },
});

export default Login;

Answer 1

So the issue has been resolved. The issue was that the footer image was basically on top ofthe text input fields so as soon I changed the positions, it started to work!