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.

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

bad practice to use KeyboardAvoidingView in input component. #3

Open
TariQMah opened this issue Sep 4, 2024 · 3 comments
Open

bad practice to use KeyboardAvoidingView in input component. #3

TariQMah opened this issue Sep 4, 2024 · 3 comments

Comments

@TariQMah
Copy link

TariQMah commented Sep 4, 2024

I encountered an issue on iOS where, upon opening the keyboard to enter text, the view would scroll infinitely. After spending about two days debugging, I discovered that the problem was caused by the KeyboardAvoidingView in the input component.

Problem Explanation
KeyboardAvoidingView should be applied to the entire screen if you have multiple input fields. However, in our case, KeyboardAvoidingView was used within the InputField component. This setup caused the component to experience an infinite scroll issue when the keyboard was open.

Solution
To resolve this problem, you should:

Remove KeyboardAvoidingView from components/InputField.tsx: It should not be used in individual input components.
Wrap KeyboardAvoidingView around your entire screen: Apply it at a higher level in your component hierarchy where it can effectively manage the layout for all input fields.
This adjustment ensures that KeyboardAvoidingView correctly handles the keyboard appearance and view adjustment without causing the infinite scroll issue.

@Yubraj977
Copy link

Thanks for the information but don't make pull request we are following the turorials.

@pitops
Copy link

pitops commented Sep 16, 2024

I dont think Adrian even tested this.

Remove it from the input field component. And wrap the scrollview in sign up page for example.

<KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      className="flex-1"
      enabled>
      <ScrollView className="flex-1 bg-white">
      ....
</KeyboardAvoidingView>

@AbolfazlAdhami
Copy link

I use this structure for inputfiled and worked in ios and also android

<KeyboardAvoidingView behavior={"height"}>
.....

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants