react-nativenative-base

native base need keyboard over the content


For example, there is a footer that I want the keyboard to hide it. Now I have something like this:

enter image description here

enter image description here

What do i need to do?

PS: I use native-base.


Solution

  • You have to import { Keyboard } from "react-native"; and add listeners to it. Whenever the keyboard opens, hide the footer.

    Something like:

      componentDidMount () {
        this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
      }
    
      componentWillUnmount () {
        this.keyboardDidShowListener.remove();
        this.keyboardDidHideListener.remove();
      }
    
      _keyboardDidShow () {
        // change the state of showFooter to false
      }
    
      _keyboardDidHide () {
        // change the state of showFooter to true
      }
    

    Take a look at Keyboard Docs