Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How To Use both 'adjustPan' and 'adjustResize' for 'windowSoftInputMode' in React Native Android app

Tags:

How can I use both 'adjustPan' and 'adjustResize' in AndroidManifest.xml react native app.

Use Case

My navigation is made upon ReactNavigation with StackNavigator and TabNavigator. I have a text box where the user can type any data. While performing this, the tab bar is displaying on the top of Keyboard. In order to block this i used 'adjustPan' and it worked fine.

On another screen, I have a registration with multiple text boxes. Here I cant scroll the entire screen unless and clicking 'tick' on the keyboard or manually click system back button. To solve this issue I found 'KeyboardAvoidingView' which is working fine. but to activate this need to change 'windowSoftInputMode' to 'adjustResize'.

In documentation, found that these two have entirely different property and I can't both together. could someone help me on this?

References:https://medium.freecodecamp.org/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580

like image 444
Anson Mathew Avatar asked Apr 12 '18 17:04

Anson Mathew


People also ask

What is the difference between adjustresize and adjustpan?

Google defines the difference as follows: adjustResize:The activity's main window is always resized to make room for the soft keyboard on screen. adjustPan:The activity's main window is not resized to make room for the soft keyboard.

How do I use adjustpan with screena?

For example, assuming you have a default windowSoftInputMode of adjustResize, and you want to use adjustPan within ScreenA, you can call AndroidKeyboardAdjust.setAdjustPan () when ScreenA mount, and reset the windowSoftInputMode to adjustResize on unmount by calling AndroidKeyboardAdjust.setAdjustResize ()

How does adjustpan work with the soft keyboard?

adjustPan:The activity's main window is not resized to make room for the soft keyboard. Rather, the contents of the window are automatically panned so that the current focus is never obscured by the keyboard and users can always see what they are typing.

How do I listen to keyboard events in React Native?

The Keyboard module, which isn’t documented on the React Native site, allows you to listen keyboard events emitted from the device. The events you’ll use are keyboardWillShow and keyboardWillHide, which return the length of time the animation will take and the ending position of the keyboard (among other information).


1 Answers

I found an npm package called react-native-android-keyboard-adjust, which allows us to switch the windowSoftInputMode on demand, this should be able to cater for your use case. However, the library seems to be not actively maintained and the installation documentation is a little bit out of date but for the most part, you can follow the instructions given by the README.md.

For the Update MainActivity.java in your project part, the recent versions of React Native should be able to auto-link the dependencies and there is no need to do this modification manually.

After the above steps, you can try to start your app. If you encountered an error related to something like The number of method references in a .dex file cannot exceed 64k, you can add the followings to your android/app/build.gradle file

android {
    ...

    defaultConfig {
        ...
        multiDexEnabled true
    }

    ...
}

After installing the package, you can call the methods provided by the library to change the windowSoftInputMode as you need.

For example, assuming you have a default windowSoftInputMode of adjustResize, and you want to use adjustPan within ScreenA, you can call AndroidKeyboardAdjust.setAdjustPan() when ScreenA mount, and reset the windowSoftInputMode to adjustResize on unmount by calling AndroidKeyboardAdjust.setAdjustResize()

like image 160
Ray Chan Avatar answered Sep 20 '22 11:09

Ray Chan