Hide the bottom image view when showing keyboard react-native

You can use Keyboard in ReactNative to listen for changes of keyboard and hide your image when the keyboard is visible.

check below sample code

import * as React from "react";
import { View, Keyboard, TextInput, Image } from "react-native";

export default class App extends React.Component {
  state = {
    isKeyboadVisible: false,
    text: ""
  };

  componentDidMount() {
    this.keyboardDidShowListener = Keyboard.addListener(
      "keyboardDidShow",
      this._keyboardDidShow
    );
    this.keyboardDidHideListener = Keyboard.addListener(
      "keyboardDidHide",
      this._keyboardDidHide
    );
  }

  componentWillUnmount() {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }

  _keyboardDidShow = () => {
    this.setState({
      isKeyboadVisible: true
    });
  };

  _keyboardDidHide = () => {
    this.setState({
      isKeyboadVisible: false
    });
  };

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <TextInput
          style={{
            height: 40,
            width: "80%",
            borderColor: "red",
            borderWidth: 1,
            marginBottom: 10
          }}
          onChangeText={text => this.setState({ text })}
          value={this.state.text}
        />
        {!this.state.isKeyboadVisible && (
          <Image
            style={{ width: 100, height: 100 }}
            source={{ uri: "https://reactnative.dev/img/tiny_logo.png" }}
          />
        )}
      </View>
    );
  }
}

Change the above code according to your requirements.

Hope this helps you. Feel free for doubts.

You need to using ScrollView to wrapper your view. Therefore, when you click to input component, keyboard will overlap your picture. https://reactnative.dev/docs/using-a-scrollview#__docusaurus

Another solution is try to using KeyboardAvoidingView https://reactnative.dev/docs/keyboardavoidingview