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

https://github.com/kirillzyusko/react-native-keyboard-controller/assets/41758677/e28def1a-6573-4833-bdc2-355a11ff524f

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:

https://github.com/kirillzyusko/react-native-keyboard-controller/assets/22820318/f48cd295-db4c-43eb-830d-70db363f8fa6

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?