Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug with Screen component's keyboard avoiding behaviour #2351

Open
dakshshah96 opened this issue Jan 10, 2023 · 4 comments · May be fixed by #2583
Open

Bug with Screen component's keyboard avoiding behaviour #2351

dakshshah96 opened this issue Jan 10, 2023 · 4 comments · May be fixed by #2583
Assignees
@mazenchami
Labels
bug
Milestone
Ignite v10

Comments

@dakshshah96
Copy link

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.

RPReplay_Final1673341309.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
Copy link
Collaborator

flexbox commented Jan 10, 2023 •
edited

@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
Copy link

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
Copy link

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

@Kiura
Copy link

Kiura commented Apr 14, 2023

@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.

@abtonc abtonc linked a pull request Dec 9, 2023 that will close this issue
Open
2 tasks
@frankcalise frankcalise added this to the Ignite v10 milestone Feb 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mazenchami mazenchami

Labels
bug
Projects
None yet
Milestone
Ignite v10
Development

Successfully merging a pull request may close this issue.

fix(boilerplate): add header height calculation to keyboard avoidance abtonc/ignite
7 participants
@flexbox @frankcalise @Kiura @LinFeiLong @dakshshah96 @mazenchami @MateuszRostkowski