Reputation: 65
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
Upvotes: 1
Views: 2975
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
Reputation: 1
justifyContent: "space-around"
Please add this to the View
which contains the TextInputs
. This solution works for me.
Upvotes: 0
Reputation: 65
Solution provided by Nikosssgr:
In AndroidManifest.xml
android:windowSoftInputMode="adjustResize" changed it to "adjustNothing"
Upvotes: 1
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