React Hide Component when Mobile Keyboard open

user_12840259 0
Viewed 1333

I'm wondering if there is a way to hide React components (Ex. Bottom Navigation Bar Component) while the mobile (Andriod, iOS, etc. ) Keyboard is open on the screen.

Currently I'm doing it with a:

@media (max-height: 400px) {
    .navclass {
        display: none;
    }
}

but am wondering if there is a JS Event or similar.

reactjs node.js mobile
1 Answers

When am input element is focused on devices of inbuilt keyboards, the keyboards pops up.
ReactJS allows you to write Normal JavaScript in your code.so what you can do is to

this.state = {
    isNavVisible: true
}

You can now pass this dynamically as a prop on the components and set it to the style of the wrappers element as an inline style in the components main file.

You can then write a function on your inputs or elements that takes focus:

const disableNav = () => {
    if(windows.innerWidth <= 400){
          this.setState({isNavVisible: false})
    }
}
user_116593010
Related