Bug with Screen component's keyboard avoiding behaviour

[dakshshah96]

Describe the bug

I was trying to use the Screen component in my Ignite app and noticed that the keyboard avoiding behaviour for text inputs doesn't work perfectly. On focusing on a text input, there is a slight scroll which takes place but not enough to view the text input.

The behaviour I noticed also exists in the Ignite boilerplate app, so I'll skip adding a reproducible example here in favour of a screen recording of the boilerplate app.

https://user-images.githubusercontent.com/7896438/211507890-0aeabca5-f3a3-43b3-a8f2-f74218c7aa36.MP4

Ignite version

8.4.5

Additional info

System
  platform           darwin
  arch               arm64
  cpu                10 cores      Apple M1 Max
  directory          boilerplate   /Users/daksh/Documents/Projects/IgniteTest/boilerplate

JavaScript (and globally-installed packages)
  node                  16.15.0                                   /Users/daksh/Library/pnpm/node
  npm                   7.24.2                                    /Users/daksh/Documents/Projects/IgniteTest/node_modules/.bin/npm
    corepack            0.10.0
    npm                 8.18.0
  yarn                  1.22.19                                   /opt/homebrew/bin/yarn
    apk-mitm            1.1.0
    aws-cdk             2.15.0
    cordova-res         0.15.4
    create-next-app     12.0.8
    create-vue          3.4.0
    dependents          0.2.0
    eas-cli             3.1.1
    eslint              8.16.0
    expo-cli            6.0.8
    lerna               4.0.0
    madge               5.0.1
    netlify-cli         9.12.3
    npm-check-updates   12.5.2
    vercel              28.2.2
  pnpm                  7.22.0                                    /opt/homebrew/bin/pnpm
                        <no pnpm global package info available>
  expo                  46.0.19                                   managed

Ignite
  ignite-cli         8.4.5        /Users/daksh/.npm/_npx/e31027f3785124a8/node_modules/.bin/ignite
  ignite src         build        /Users/daksh/.npm/_npx/e31027f3785124a8/node_modules/ignite-cli/build

Android
  java               19.0.1       /usr/bin/java
  android home       -            /Users/daksh/Library/Android/sdk

iOS
  xcode              14.2
  cocoapods          1.11.3       /opt/homebrew/bin/pod

Tools
  git                git version 2.39.0   /opt/homebrew/bin/git

[flexbox]

@dakshshah96

On focusing on text input, there is a slight scroll that takes place but not enough to view the text input.

Welcome to the react native world 🙌

Keyboard management is hard, there are many ways to solve the issue You can start with the official way KeyboardAvoidingView

but in reality, I suggest you bookmark this article https://www.netguru.com/blog/avoid-keyboard-react-native

[LinFeiLong]

Hi @dakshshah96 , as suggested in the link from @flexbox , I use this one the most https://github.com/APSL/react-native-keyboard-aware-scroll-view

[MateuszRostkowski]

@dakshshah96 it should work better when you add keyboardVerticalOffset={100} to the Screen component

[Kiura]

@flexbox @carlinisaacson @cdanwards no idea who to tag exactly, just tagged a few so we can get an answer... If the keyboard is not working properly by default, why not add APSL/react-native-keyboard-aware-scroll-view instead of KeyboardAvoidingView? or at least give the option to set a prop? Currently, I have no issues, but remember this bugging me so much, so I had to change the UI to avoid weird behaviour.