Android TextInput jumps too high.

[truongnguyen3]

Describe the bug I try to playground react-native-keyboard-controller with KeyboardAwareScrollView component and see this issue, I am not sure it's a bug or I am doing it's wrong.

Code snippet

import React from 'react';
import {
  StyleSheet,
  Text,
  TextInputProps,
  TextInput as TextInputRN,
  View,
} from 'react-native';
import {
  KeyboardAwareScrollView,
  KeyboardProvider,
} from 'react-native-keyboard-controller';

const TextInput = (props: TextInputProps) => {
  return (
    <TextInputRN
      placeholderTextColor="#6c6c6c"
      style={styles.textInput}
      multiline
      numberOfLines={2}
      testID={props.placeholder}
      {...props}
      placeholder={`${props.placeholder} (${
        props.keyboardType === 'default' ? 'text' : 'numeric'
      })`}
    />
  );
};

function Header() {
  return (
    <View
      style={{
        height: 200,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#DCA47C',
      }}>
      <Text>Header</Text>
    </View>
  );
}

function Footer() {
  return (
    <View
      style={{
        height: 50,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#698474',
      }}>
      <Text>Footer</Text>
    </View>
  );
}

function TableView() {
  return (
    <KeyboardAwareScrollView
      bottomOffset={0}
      style={styles.container}
      contentContainerStyle={styles.content}>
      {new Array(10).fill(0).map((_, i) => (
        <TextInput
          key={i}
          placeholder={`TextInput#${i}`}
          keyboardType={i % 2 === 0 ? 'numeric' : 'default'}
        />
      ))}
    </KeyboardAwareScrollView>
  );
}

function Main() {
  return (
    <View style={{
      flex: 1
      }}>
      <Header />
      <TableView />
      <Footer />
    </View>
  );
}

export default function AwareScrollView() {
  return (
    <KeyboardProvider>
      <Main />
    </KeyboardProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: 16,
  },
  content: {
    paddingTop: 50,
  },
  textInput: {
    width: '100%',
    minHeight: 50,
    maxHeight: 200,
    // marginBottom: 50,
    marginBottom: 5,
    borderColor: 'black',
    borderWidth: 2,
    marginRight: 160,
    borderRadius: 10,
    color: 'black',
    paddingHorizontal: 12,
  },
});

Repo for reproducing https://github.com/truongnguyen3/rn-keyboard-issue

To Reproduce Steps to reproduce the behavior:

1. Clone and run the app
2. Click on each text input and try
3. See error

Expected behavior Like iOS behavior, scroll view should scroll to text input sufficient.

Screenshots

https://github.com/kirillzyusko/react-native-keyboard-controller/assets/148203070/4c9fc925-273b-4577-bde5-b5485fee2825

https://github.com/kirillzyusko/react-native-keyboard-controller/assets/148203070/d7566118-d41f-4723-91bd-a4122940f389

Smartphone (please complete the following information):

• Desktop OS: MacOS 14.5
• Device: Android Pixel, Samsung 5A.
• OS: Android 13, 14
• RN version:0.72.15
• RN architecture: Paper
• JS engine: Hermes
• Library version: 1.12.5

[nduyvu1511]

I have the same issue on Android. I have two screens, A and B, both using KeyboardAwareScrollView. After using navigation.replace from screen A to screen B, the TextInput jumps higher than the status bar. However, when using navigation.navigate, it works well.

[kirillzyusko]

@nduyvu1511 which value for windowSoftInputMode do you have in AndroidManifest.xml?

Probably different that adjustResize? If yes, then I guess it's kind of expected behavior. You can read about default hook behavior https://kirillzyusko.github.io/react-native-keyboard-controller/docs/guides/building-own-hook to figure out how to switch input mode in your app. And I guess I need to use hooks that don't modify windowSoftInputMode in my components 🤔

[nduyvu1511]

@nduyvu1511 which value for windowSoftInputMode do you have in AndroidManifest.xml?

Probably different that adjustResize? If yes, then I guess it's kind of expected behavior. You can read about default hook behavior https://kirillzyusko.github.io/react-native-keyboard-controller/docs/guides/building-own-hook to figure out how to switch input mode in your app. And I guess I need to use hooks that don't modify windowSoftInputMode in my components 🤔

Thanks for your answer, I'll take a look at this

[kirillzyusko]

@truongnguyen3 regarding your example - I quickly pasted your code sample to the example app and there everything works fine:

https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/b821e63d-a5a3-43bf-96e8-ad7245da0172

But thank you for providing a full reproduction example project 🙏 I'll try to clone it and see where is the problem!

[truongnguyen3]

@kirillzyusko Thanks for your time. I will double-check the example app as well.

[kirillzyusko]

@truongnguyen3 I fixed the bug in https://github.com/kirillzyusko/react-native-keyboard-controller/pull/501 - can you check if this fix actually fixes the problem for you?

[truongnguyen3]

@kirillzyusko It fixed my issue. Thanks.

[nduyvu1511]

@kirillzyusko I forgot to answer, I fixed my issue, thanks.