Keyboard hides signin form on some Android devices

[lucj]

Hi, first of all thanks for this basic form, it's really neat. I followed your medium article as well and set up a great skeleton for my (first) react native app.

I have a problem with the signin / signup / forgot forms though. On Android devices the keyboard hides the forms:

• sometimes partially leaving a little room for the Login button (Redmi note 6 Pro)
• sometimes totally (for instance on Samsung S7)

On iPhone XR it's working like a charm :)

Any idea how this could be fixed ?

Screenshot on the Redmi note 6 pro

Screenshot on the Samsung Galaxy S7

[lucj]

It seems to be linked to some kind of area coming with the keyboard and located just at the top of that one. If I specified a type: TYPES.Number I do not have the problem. Is that possible to have the most simple keyboard as an available option ?

[MosesEsan]

It seems to be linked to some kind of area coming with the keyboard and located just at the top of that one. If I specified a type: TYPES.Number I do not have the problem. Is that possible to have the most simple keyboard as an available option ?

Hi, thanks for pointing it out, I won’t be able to look into it until tomorrow, it should be an easy fix, it’s a problem I have encountered before when using keyboards on Android.

[lucj]

Thanks @MosesEsan . BTW, is there a way to prevent the automated cap lock on the first letter on the username for the signin ?

[lucj]

Looking into it, this seems to come from the search / suggestion panel that appears on top of the keyboard. Not sure how this one should be disabled though.

In my use case I would need a keyboard to enter email address only but even setting the type to 'email-address' still shows this keyboard additional view.

[MosesEsan]

Looking into it, this seems to come from the search / suggestion panel that appears on top of the keyboard. Not sure how this one should be disabled though.

In my use case I would need a keyboard to enter email address only but even setting the type to 'email-address' still shows this keyboard additional view.

The KeyboardAvoidingView needs to be optimized for Android

For the auto cap lock, you can add autoCapitalize to your field object,

{name: "", autoCapitalize: 'none', ....}

The field object accepts any of the TextInput prop

https://reactnative.dev/docs/textinput#autocapitalize

[lucj]

Hmm, this is strange. If I change the type to 'email-address' (it provides the correct keyboard to enter an email) it's working fine. But using autoCapitalize: 'none' on this same field has no effect on iOS and Android as well.

const fields = [
 {name: 'username', label: 'Email Address', required: true, type: 'email-address', autoCapitalize: 'none'},
 {name: 'password', label: 'Password', required: true, secure: false }
];

[lucj]

KeyboardAvoidingView issue can be solved using this code in Form.js

    const offset = {
      navBarHeight: (Platform.OS === 'ios') ? 64 : -178,
    };

    return (
        <FormContext.Provider value={value}>
            <KeyboardAvoidingView
            behavior="padding"
            style={[{flex: 1}, props.style]}
            keyboardVerticalOffset={offset.navBarHeight}>

Not sure it will work on every devices though but it's fine on iPhone XR, Redmi note 6 Pro, and not optimal but really ok on Samsung S7.

[lucj]

Any chance those changes are part of the next 1.1.7 npm release ? :)

[lucj]

Hi, any update on that one ?

[lucj]

Hi, I saw you released 1.1.9, does this one includes the fix for the Android's KeyboardAvoidingView ?

[lucj]

Hi @MosesEsan I saw this issue is present on 1.1.9. I can create a PR with the above fix if you think this one is a correct way to better handle Android keyboard.

[lucj]

Hi, would you have any other suggestions for this issue ? It makes the form non usable on many Android devices.

[iuri]

Luc, I solved this problem and other issues (i.e. labels displaying and focus hiding), by removing/disabling scroll's props from the

... structure, and placing strucutre/block to the entire screen.

Thus, the default keyboard moves up the entire screen and not only the frame of the form and its elements. Plus, the display gets precisely where the focus props is active. That solved my scenario. I hope it helps.

Furthermore, you have access to the entire source code within /node-modules/react-native-basic-form/ In my case I amended specifically /react-native-basic-form/core/Forms.js and /react-native-basic-form/helpers/TextInput.js

You can amend/fix react-native-basic-form sources and suggest enhancements to Moses to apply them in the core package.

btw, @MosesEsan, I've done a few amends there. Let me know if you would like that I share them with you. Or.... is there a way to customize react-native-basic-form directly from my new custom package? Meaning, how would I assign props and styles within my package?
I tried so, but my code didn't overwrite yours somehow.

Best wishes, I

[lucj]

@iuri a PR with your changes would be so great :)