I am having some problems with the KeyboardAvoidingView on iOS. The problem is that I cannot really reproduce the error. I am using the KeyboardAvoidingView in a relatively normal setting to secure that inputs aren't hidden behind the keyboard, but on some particular devices it keeps bugging out and basically pushes everything thats included in the View off the screen. Example:
<Header
marginTop={screenWidth / 10}
paddingHorizontal={10}
onPress={false}
source={require("../../assets/images/arrowback.png")}
text={ I18n.t("VERIFY_TITLE")}
/>
{loading ? (
<AppIndicator height={screenHeight} position={"absolute"} />
) : null}
<View
style={[sameStyle.flexOne, { paddingHorizontal: 20 }]}
>
<KeyboardAvoidingView>
<ScrollView
pointerEvents={loading ? "none" : "auto"}
showsVerticalScrollIndicator={false}
style={sameStyle.flexOne}
>
<Button
opacity={opacity}
disabled={false}
onPress={this.sendVerifyEmail}
shapeViewWidth={"48%"}
shapeView2Width={"48%"}
marginBottom={35}
marginTop={50}
name={I18n.t("SEND_VERIFY_MAIL_BUTTON")}
/>
{/* <DescriptionText
marginTop={15}
desc={I18n.t("VERIFY_MAIL_HINT")}
/> */}
<Title
marginTop={40}
title={I18n.t("VERIFY_MAIL_TITLE")}
fontFamily={Font.REGULAR}
/>
<DescriptionText
marginTop={15}
desc={I18n.t("VERIFY_MAIL_DESC")}
/>
<InputWithIcon
keyboardType={"numeric"}
returnKeyType={"send"}
marginTop={20}
maxLength={60}
label={'Code'}
value={this.state.code.toString()}
onChangeText={(text) => this.setState({ code: text })}
onSubmitEditing={this.sendVerifyCode}
/>
<Button
opacity={opacity}
disabled={this.state.code == 0 || this.state.code == null}
onPress={this.sendVerifyCode}
shapeViewWidth={"48%"}
shapeView2Width={"48%"}
marginBottom={50}
marginTop={50}
name={I18n.t("COMMON_SEND_BUTTON")}
/>
</ScrollView>
</KeyboardAvoidingView>
</View>```
On most devices the component renders completely as expected, but on some particular phones it looks like this:
[Excuse the text, but basically the screen is empty apart from the Header][1]
[1]: https://i.stack.imgur.com/nmzub.png
Because of legacy code we are sadly still using React-Native 0.59
This particular user is using an iPhone 12 on iOS 16, but we have also had Users with this problem using iPhone Xs and also on other versions such as 15.3.6 etc. Like I said, on some devices with exactly the same specs it is working fine, on others it's not. Any help is appreciated.