Input with autocomplete email is partially hidden behind keyboard

[Holalko]

Describe the bug
Input is hidden behind keyboard autocomplete when set to "email"

Code snippet

<View style={{ flex: 1 }}>
  <KeyboardProvider>
      <KeyboardAwareScrollView>
          <View style={{ height: 800, backgroundColor: 'lightblue' }} />
          <Text>Input:</Text>
          <TextInput
            style={{ height: 44, borderStyle: 'solid', borderWidth: 1, borderColor: 'black' }}
            autoComplete="email" // or textContentType="emailAddress"
          />
          <View style={{ height: 800, backgroundColor: 'lightblue' }} />
      </KeyboardAwareScrollView>
  </KeyboardProvider>
</View>

Repo for reproducing
I would be highly appreciate if you can provide repository for reproducing your issue. It can significantly reduce the time for discovering and fixing the problem.

To Reproduce

1. click on input
2. see input partially hidden

Expected behavior
Input is fully visible

Screenshots

RPReplay_Final1714726544.MP4

Smartphone (please complete the following information):

• Device: iPhone 14
• OS: 17.4.1
• RN version: 0.71.10
• Expo version: 48.0.19
• RN architecture: old
• JS engine: Hermes
• Library version: 1.11.7
• react-native-reanimated: 2.14.4

Additional context
It works correctly without autocomplete hint

EDIT:

I tried to console.log the useKeyboardHandler and it seems it fires start twice but the scroll only reflects the first

This are the logs from single input focus

 LOG  onStart {"duration":250,"progress":1,"height":291,"target":9075,"eventName":"13onKeyboardMoveStart"}
 LOG  onEnd {"duration":250,"progress":1,"height":291,"target":9075,"eventName":"13onKeyboardMoveEnd"}
 LOG  onStart {"duration":250,"progress":1,"height":336,"target":9075,"eventName":"13onKeyboardMoveStart"}
 LOG  onEnd {"duration":250,"progress":1,"height":336,"target":9075,"eventName":"13onKeyboardMoveEnd"}

[kirillzyusko]

Hey @Holalko

I tried to paste your code into my example app, but everything works fine there and I always have a constant offset between keybaord and TextInput:

RPReplay_Final1714739181.MP4

Am I missing anything?

[Holalko]

Thanks @kirillzyusko .. so i guess its an issue with our setup or something.. we use expo, nativewind.. will try to create an example app

[kirillzyusko]

@Holalko thank you ❤️

[Holalko]

@kirillzyusko so i have created a simple repro

https://github.com/Holalko/react-native-keyboard-controller-repro-example

The issue is still there but its much harder to reproduce - but in our production repo this happens more often and sometimes the offset is a lot bigger than just few pixels

Video on google cuz too big for GH: https://drive.google.com/file/d/14d_5YyHsGBn6zIp3eInjAsR4R3FrzhwB/view?usp=sharing

You can see the issue at 0:26 or 1:13

[kirillzyusko]

Thanks @Holalko 🙏

I'll test your example app tomorrow - let's see if I can reproduce it 👀

[kirillzyusko]

@Holalko I cloned your repo did everything as per your guide (excluding npm i - it failed so I used yarn), but I'm not able to reproduce the issue: https://youtu.be/mZUrr9zPERo (tested on iPhone 11 Pro, iOS 17.4.1)

Maybe I'm missing something? Can you reproduce it on simulator as well?

[kirillzyusko]

@Holalko potentially it could be fixed by #557

The fix was deployed in 1.13.2 version. Can you please check and let me know whether the problem has been fixed or still present?

[Holalko]

Thanks @kirillzyusko , will take a look and let you know

[kirillzyusko]

@Holalko did you have a chance to check? 👀