I am developing a page with React. My code is as here How to prevent mobile keyboard from closing when I click button in website?

basically: Just a list with an input field in the end for chat message and button to send it.

Thing is, when virtual keyboard is showing, the last chat messages are covered by the virtual kebyoard which is not good and user doesn't understand sees last message he/she sent.

Question here: How to understand when mobile virtual keyboard is shown, and how to get its height ? If I can get height, then dynamically I can set padding-bottom for my list of messages so user still sees everything