23

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

Anson Mathew
  • 420
  • 3
  • 10

2 Answers2

3

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()

Ray Chan
  • 1,050
  • 9
  • 18
0

As of 2023, the best choice is react-native-avoid-softinput. react-native-android-keyboard-adjust isn't supported anymore. You can use AvoidSoftInput.setAdjustPan and AvoidSoftInput.setAdjustResize.

I use custom hook to disable my default behavior on some screens.

import { useCallback } from 'react'
import { AvoidSoftInput } from 'react-native-avoid-softinput'
import { useFocusEffect } from '@react-navigation/native'
import { Platform } from 'react-native'


function useAndroidKeyboardAdjustNothing() {
    useFocusEffect(
        useCallback(() => {
            if (Platform.OS === 'android') {
                AvoidSoftInput.setAdjustNothing()
                AvoidSoftInput.setEnabled(true)
            }
            return () => {
                if (Platform.OS === 'android') {
                    AvoidSoftInput.setEnabled(false)
                    AvoidSoftInput.setAdjustResize()
                }
            }
        }, []),
    )
}
Stanislav Mayorov
  • 4,298
  • 5
  • 21
  • 44