Wrong keyboard height on Samsung device

[4yki]

Describe the bug
Hi! I have a problem with Samsung keyboard sizing. Seems like the height of keyboard is incorrect, because it overlaps my content when it should not. Pls see the attached screenshots and code snippet. I use KeyboardAvoidingView to wrap content that should be animated with keyboard. I might have doing something wrong, but on my Pixel everything works as expected. Also you can see that on Samsung there is additional "options" bar which height seems is not added to the height of keyboard. I'd appreciate any help on that. Thx

Code snippet

import React from 'react';
import { ScrollView, View } from 'react-native';

import { SystemBars } from 'react-native-edge-to-edge';
import { KeyboardAvoidingView, KeyboardGestureArea } from 'react-native-keyboard-controller';
import { createStyleSheet, useStyles } from 'react-native-unistyles';

import { useAppTranslation } from '@/utils';
import { AppButton, AppText } from '@/view/components';

import { PhoneNumberInput } from './components';
import { useScreen } from './useScreen';

export const SignInScreen = () => {
  const { styles, theme } = useStyles(styleSheet);
  const { t } = useAppTranslation();
  const {
    inputRef,
    onContinuePress,
    onNumberChanged,
    number,
    onPrivacyPress,
    onTermsPress,
    error,
    disabled,
    profileStatus
  } = useScreen();

  const tc = t('sign_up.terms_and_conditions', { ns: 'auth' });
  const pp = t('sign_up.privacy_policies', { ns: 'auth' });
  const tcText = t('sign_up.confirm_tc_pp', { ns: 'auth' });
  const splits = tcText.split('{{text}}');

  return (
    <>
      <SystemBars style="dark" />
      <View style={styles.container}>
        <KeyboardGestureArea interpolator="ios" style={styles.gestureArea}>
          <ScrollView
            contentContainerStyle={styles.content}
            bounces={false}
            keyboardShouldPersistTaps={'handled'}>
            <View style={styles.header}>
              <AppText style={styles.text} variant="headlineM">
                {t('sign_up_or_login', { ns: 'auth' })}
              </AppText>
              <AppText style={styles.text} variant="bodyM">
                {t('sign_up.body', { ns: 'auth' })}
              </AppText>
            </View>
            <PhoneNumberInput
              ref={inputRef}
              onNumberChanged={onNumberChanged}
              defaultNumber={number}
              error={error}
              profileStatus={profileStatus}
            />
          </ScrollView>
        </KeyboardGestureArea>

        <KeyboardAvoidingView
          contentContainerStyle={styles.footer}
          behavior="position"
          keyboardVerticalOffset={theme.spacing.l}>
          <AppText style={styles.text} variant="captionS">
            {splits[0]}
            <AppText style={styles.highlighted} variant="captionM" onPress={onTermsPress}>
              {tc}
            </AppText>
            {splits[1]}
            <AppText style={styles.highlighted} variant="captionM" onPress={onPrivacyPress}>
              {pp}
            </AppText>
            {splits[2]}
          </AppText>
          <AppButton
            title={t('continue', { ns: 'common' })}
            onPress={onContinuePress}
            disabled={disabled}
          />
        </KeyboardAvoidingView>
      </View>
    </>
  );
};

const styleSheet = createStyleSheet(({ spacing, colors }, rt) => {
  return {
    container: {
      flex: 1,
      paddingHorizontal: spacing.l,
      paddingBottom: rt.insets.bottom ? rt.insets.bottom + spacing.s : spacing.l
    },
    gestureArea: { flex: 1 },
    header: { rowGap: spacing.s },
    content: {
      paddingTop: spacing.xl * 3,
      rowGap: spacing.l
    },
    footer: {
      rowGap: spacing.m
    },
    text: {
      textAlign: 'center'
    },
    highlighted: { color: colors.primary }
  };
});

Repo for reproducing
Code snippet provided

Expected behavior
Keyboard should not overlap content

Screenshots
Samsung keyboard:

Pixel (Gboard) keyboard:

Smartphone (please complete the following information):

• Device: Samsung
• OS: Android 14
• RN version: 0.77.1
• Expo: 52.0.39
• RN architecture: new arch
• JS engine: Hermes
• Library version: 1.16.8

Additional context
Add any other context about the problem here.

[4yki]

Sorry, did a better investigation and see that I messed up with styling. Closing...

[kirillzyusko]

Awesome @4yki 😎

Glad you figured out where the problem is 👍

(initially I thought it could be a navigation bar height problem - like it is not considered to be a height)