CODEWITHSUNDEEP
androidreact-native
Quasar Wess
Quasar Wess

Reputation: 65

How to disable the keyboardAvoidingView behaviour in TextInput

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

enter image description here

enter image description here

Upvotes: 1

Views: 2975

Answers (4)

Georgehn66
Georgehn66

Reputation: 11

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

Upvotes: 0

Vigneshwaran
Vigneshwaran

Reputation: 1

    justifyContent: "space-around"

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

Upvotes: 0

Quasar Wess
Quasar Wess

Reputation: 65

Solution provided by Nikosssgr:

In AndroidManifest.xml

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

Upvotes: 1

Firdous nath
Firdous nath

Reputation: 1587

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,

Upvotes: 1

Related Questions