KeyboardAvoidingView Problems on iOS

Viewed 16

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.
1 Answers

Since you cannot describe exactly, try this setting:

import { useHeaderHeight } from "@react-navigation/stack";

In your component

const headerHeight = useHeaderHeight();
<KeyboardAvoidingView
            keyboardVerticalOffset={headerHeight}
            behavior={Platform.OS === "ios" ? "padding" : "height"}
>
Related