How to disable the keyboardAvoidingView behaviour in TextInput

Question

I am working on a react native project made using react native cli. The problem is that the TextInput gets highlighted when the keyboard is visible/active & it squeezes the view and mess up the layout which reminded me of KeyboardAvoidingView behaviour. Even though I don't use KeyboardAvoidingView in this project because all text inputs are in the upper half of the screen so they won't get covered by the keyboard.

<TextInput style={styles.inputText} multiline={false} onSubmitEditing={() => Keyboard.dismiss()} autoCapitalize="none" autoCorrect={false} keyboardType="number-pad" onChangeText={numberInputHandler} value={enteredValue}/> inputText: { borderBottomColor: "white", borderBottomWidth: 2, width: "30%", position: "absolute", bottom: Dimensions.get("window").height / 5, left: Dimensions.get("window").width / 5, color: "white", fontSize: Dimensions.get("window").height * 0.03, fontFamily: "Lato-Regular" }

React Native Ver 0.61.5

Testing was done on an Android emulator and an Android physical device

Just Add android:windowSoftInputMode="stateHidden|stateVisible|adjustPan" into your ManifistFile in that activity where you want Keyboard do not change any behaviour — Muhammad Yaseen
– Muhammad Yaseen, Commented Mar 5, 2020 at 11:14

Firdous nath · Accepted Answer · 2020-03-05 10:24:20Z

As I can see you are using absolute positioning where bottom uses Dimension api to get the height. The problem occurs due to this. Try giving static height rather then fetching from Dimension because when keyboard appears visible window gets shrink causing react to re-render because height changes.

position: "absolute", bottom: Dimensions.get("window").height / 5,

same behaviour after I changed position to relative and commented bottom and left, the keyboard appearing always tries to squeeze the view and moves up the footer instead of hiding it, the same code behaves normally in an expo managed project but behaves this way in non-expo react native (this problem appeared when i copied my code from my initial expo project, and replaced the expo modules

Quasar Wess · Accepted Answer · 2020-03-05 11:17:22Z

Solution provided by Nikosssgr:

In AndroidManifest.xml

android:windowSoftInputMode="adjustResize" changed it to "adjustNothing"

UGandhi · Accepted Answer · 2023-09-09 06:15:48Z

 justifyContent: "space-around"

Please add this to the View which contains the TextInputs. This solution works for me.

Georgehn66 · Accepted Answer · 2024-07-09 08:23:42Z

If you are using React Native Expo and specifically using Expo Go app, I found a workaround, so no need to touch your manifest file. Basically there's a thing when you placed your components inside a ScrollView, suddenly, the keyboard no longer pushes your components up, so if that the behavior you are looking for try this!.

import { View, Dimensions, Platform } from 'react-native' import React from 'react' import { useSafeAreaInsets } from 'react-native-safe-area-context' import { ScrollView } from 'react-native-gesture-handler' const { width, height } = Dimensions.get("window") type Props = { children: React.ReactElement[] } export default function SafeAreaNoSoftInput({ children }: Props) { const { top, bottom } = useSafeAreaInsets() return ( <ScrollView pointerEvents='box-none' style={{ flex: 1 }} > <View pointerEvents='box-none' style={{ width: width, height: Platform.OS === 'android' ? height - bottom : (height - top - bottom), backgroundColor: 'pink', borderWidth: 3, borderColor: 'red' }} > {children} </View> </ScrollView> ) }

You can adjust the height of the parent view as you need. Now you just wrap your components with this method and you are good to keep coding!!!.

Before somebody comes and yell at me for my approach, I mainly came up with this because I need the softInput to be "adjustResize", mainly because Im using other libraries that require that, so this approach can work for you if you are in the same situation.

¡¡Hopefully helps!! Happy Coding

Collectives™ on Stack Overflow

How to disable the keyboardAvoidingView behaviour in TextInput

4 Answers 4

1 Comment

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Related