KeyboardAwareScrollView on android is not as smooth as ios

[caothuyen]

Describe the bug When the keyboard opens, the content below is pushed up, not as smoothly as on iOS.

Code snippet

function LoginScreen() {
  return (
    <View style={styles.container}>
      <View style={styles.background}>
        <LinearGradient
          colors={["#114395", "#195DCE", "#1F6BF2", "#0A89E2", "#fff"]}
          locations={[0, 0.135, 0.36, 0.45, 0.625]}
          style={[styles.background, styles.backgroundLinear]}
        />
        <LogoLine style={[styles.logoLine, styles.background]} />
        <NetworkLine style={[styles.networkLine, styles.background]} />
      </View>

      <KeyboardAwareScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
        <View style={styles.content}>
          <Image source={require("assets/images/icon.png")} style={styles.logo} fadeDuration={0} />
          <Text style={styles.title}>Chào mừng đến với Quốc Duy</Text>
          <RenderForm />
          <TextInput style={{ height: 48, borderWidth: 1, borderColor: "red" }} placeholder="press input" />
          <TextInput style={{ height: 48, borderWidth: 1, borderColor: "red" }} placeholder="press input" />
          <TextInput style={{ height: 48, borderWidth: 1, borderColor: "red" }} placeholder="press input" />
        </View>
      </KeyboardAwareScrollView>
    </View>
  );
}

Expected behavior On android can be as smooth as ios

Screenshots

https://github.com/user-attachments/assets/b04e04df-ad9a-41fd-b6a6-1cfca10f6ee0

https://github.com/user-attachments/assets/4b7c5beb-ea86-4927-81e7-b62cea2f0883

I tested on real device and production environment but still not effective

• Desktop OS: MacOS 15.1.1
• Device: iPhone 14 Pro Max and Android pixel 6 pro
• OS: iOS 17.5 and android 12
• RN version: 0.76.3
• RN architecture: paper/fabric
• JS engine: Hermes
• Library version: 1.14.5

[caothuyen]

This code in RenderForm

function RenderForm() {
  const handleLogin = async (username, password) => {
    await Login(username, password);
  };

  return (
    <View style={styles.formContainer}>
      <FieldWrapper label="Tên đăng nhập">
        <Input iconLeft="fa-user" />
      </FieldWrapper>
      <FieldWrapper label="Mật khẩu">
        <Input iconLeft="fa-key" iconRight={<RenderShowPassword />} secureTextEntry />
      </FieldWrapper>
      <FieldWrapper label="Tên đăng nhập">
        <Input iconLeft="fa-user" />
      </FieldWrapper>
      <FieldWrapper label="Tên đăng nhập">
        <Input iconLeft="fa-user" />
      </FieldWrapper>
      <FieldWrapper label="Tên đăng nhập">
        <Input iconLeft="fa-user" />
      </FieldWrapper>
      <FieldWrapper label="Tên đăng nhập">
        <Input iconLeft="fa-user" />
      </FieldWrapper>
      <FieldWrapper label="Tên đăng nhập">
        <Input iconLeft="fa-user" />
      </FieldWrapper>
      <FieldWrapper label="Tên đăng nhập">
        <Input iconLeft="fa-user" />
      </FieldWrapper>
      <AnimPress onPress={() => handleLogin("*****", "*****")}>
        <View style={styles.buttonSubmit}>
          <Text style={styles.buttonSubmitText}>Đăng nhập</Text>
        </View>
      </AnimPress>
    </View>
  );
}

const FieldWrapper = memo(({ children, label }) => (
  <View style={styles.fieldWrapper}>
    <Text style={styles.fieldLabel}>{label}</Text>
    {children}
  </View>
));

const RenderShowPassword = memo(() => {
  return (
    <TouchableOpacity onPress={() => {}} activeOpacity={0.8}>
      <FaIcon icon="fa-eye" size={16} color={colors.dark_gray} />
    </TouchableOpacity>
  );
});

[kirillzyusko]

Hi @caothuyen

This is how animation looks on my Pixel 7 Pro (Android 15) - tested in example app:

https://github.com/user-attachments/assets/2ec200d5-4377-4f0f-ad9b-447bd1483849

I don't have any missing frames - would you mind to create a reproducible example (including all styles) so that I can copy/paste it into my example app?