keyboard pushes up the divs on mobile views with React - ios

Question

I have this message thread component that has a header, content and a textarea and everytime. The issue here is in mobile views, when I want to type a message the keyboard on IOS (Iphones) pushes the divs up so the header would be hidden, I don't want this behavior, for Android it doesn't behave like this. This app is using React and scss and the code is this:
<div className="message-thread-wrapper d-flex flex-column">
<div className="messages-header d-flex flex-row justify-content-between align-items-center">
<Icon
className="back-btn d-lg-none"
icon="chevron-left"
onClick={(e) => {
e.stopPropagation();
actions.closeMessage();
}}
/>
<h5 className="messages-title text-truncate">
{participant.firstname && participant.lastname ? `${participant.firstname} ${participant.lastname}` : participant.name}
</h5>
<div className="messages-header-right d-flex flex-row align-items-center">
<Icon
className="settings-btn"
icon="settings"
onClick={(e) => {
e.stopPropagation();
this.toggleDeleteMenu();
}}
/>
}
<Icon
className="close-btn-cross d-none d-lg-block"
icon="cross"
onClick={(e) => {
e.stopPropagation();
this.setState(
{isMinimized: false},
actions.closeMessage
);
}}
/>
</div>
</div>
{showDeleteMenu &&
<DeleteMenu onClick={this.archiveMessage} onClickOutside={this.toggleDeleteMenu}/>
}
{
this.renderMessages()
}
<div
className="bottom-actions d-flex flex-row flex-nowrap justify-content-between align-items-center">
<TextArea
ref={ref => this.messageInput = ref}
className="input blue d-block"
name="msgText"
placeholder="Type your message..."
.
.
.
.
autoFocus
/>
<Button
className={`send-btn circle ${IS_SAFARI ? 'safari-fix-button' : ''}`}
icon="paper-plane"
onClick={this.onSendMessage}
/>
</div>
}
</div>
and the scss file:
.message-thread-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0;
z-index: 950;
.messages-header {
padding: 19px 16px 14px 16px;
width: 100%;
flex-basis: 57px;
color: white;
pointer-events: none;
position:sticky;
.back-btn {
pointer-events: auto;
}
.close-btn-cross {
width: 18px;
height: 18px;
pointer-events: auto;
}
.settings-btn {
width: 25px;
height: 26px;
pointer-events: auto;
}
}
.delete-menu {
border-radius: 2px;
background-color: white;
position: absolute;
top: 53px;
right: 0px;
z-index: 1;
.menu-arrow {
width: 15px;
height: 15px;
position: absolute;
top: 0;
right: 0;
background: white;
border-right: none;
border-bottom: none;
}
a {
padding: 18px;
font-size: 16px;
line-height: 1.5;
text-decoration: none;
z-index: 1;
cursor: pointer;
}
}
.messages-content {
height: 100%;
padding: 16px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
.dateline {
margin: 28px 0 11px 0;
line-height: 1.33;
text-align: center;
}
}
.bottom-actions {
bottom: 0;
width: 100%;
max-height: 130px;
min-height: 70px;
overflow-y: hidden;
padding: 0 0 0 24px;
background-color: white;
box-shadow: 0 -1px 3px 0 #d9dbdc;
.form-group-wrapper {
padding-top: 10px;
width: 100%;
align-self: stretch;
overflow: auto;
&.text-area-wrapper {
padding-right: 71px;
textarea {
min-height: 48px;
}
.form-bar {
display: none;
}
}
}
.button.circle {
width: 34px;
height: 34px;
padding: 9px 12px 9px 8px;
position: fixed;
right: 26px;
&.safari-fix-button {
bottom: 22px;
}
}
}
}
Note I deleted the properties that are not important for this question so it won't be too long.
This is how it currently behaves:
Iphone:
Android - Pixel 2XL:
I would appreciate if Any could help me. Thank you in advance!