I have a few textInputs in a keyboardAvoidingView which works fine when I click on one. But if I do not click outside the view and dismiss it but instead click on another textInput inside the view it ruins the styling on the keyboardAvoidingView.
Here is my code:
import React, {useState} from 'react';import {KeyboardAvoidingView, Platform, View} from "react-native";import {TextInput} from "react-native-paper";import {styles} from "./styles/BasicInfoStyles";import SignUpFooter from "../../../components/SignUpFooter";import SignUpHeader from "../../../components/SignUpHeader";import AgeButton from "./components/AgeButton";function BasicInfo() { const {shell, ageAndGender, body} = styles; const [firstname, setFirstname] = useState(''); // const [age, setAge] = useState(''); const [gender, setGender] = useState(''); const [sexualOrientation, setSexualOrientation] = useState(''); const [height, setHeight] = useState(''); const setButtonDisabled = () => { if (!firstname || !sexualOrientation || !height) { return true } return false }; return (<View style={shell}><KeyboardAvoidingView style={{flex: 10}} behavior={Platform.OS === "ios" ? "padding" : "height"}><SignUpHeader title={`Enter a bit about\nyourself`} page={1}/><KeyboardAvoidingView style={body} behavior={Platform.OS === "ios" ? "padding" : "height"}><TextInput autoComplete mode="outlined" label="Firstname" value={firstname} onChangeText={firstname => setFirstname(firstname)} style={{maxHeight: 64, marginBottom: 32}} activeOutlineColor={"#000"} outlineColor={"#DBDBDB"} theme={{ colors: { text: "#000", placeholder: "#878787", background: "#FFF" } }} /><View style={ageAndGender}><AgeButton /><TextInput autoComplete mode="outlined" label="Gender" value={gender} onChangeText={gender => setGender(gender)} style={{maxHeight: 64, minWidth: '47%'}} activeOutlineColor={"#000"} outlineColor={"#DBDBDB"} theme={{ colors: { text: "#000", placeholder: "#878787", background: "#FFF" } }} /></View><TextInput autoComplete mode="outlined" label="Sexual Orientation" value={sexualOrientation} onChangeText={sexualOrientation => setSexualOrientation(sexualOrientation)} style={{maxHeight: 64, marginBottom: 32}} activeOutlineColor={"#000"} outlineColor={"#DBDBDB"} theme={{ colors: { text: "#000", placeholder: "#878787", background: "#FFF" } }} /><TextInput autoComplete mode="outlined" label="Height" value={height} onChangeText={height => setHeight(height)} style={{maxHeight: 64, marginBottom: 32}} activeOutlineColor={"#000"} outlineColor={"#DBDBDB"} theme={{ colors: { text: "#000", placeholder: "#878787", background: "#FFF" } }} /></KeyboardAvoidingView></KeyboardAvoidingView><SignUpFooter buttonTitle="Next" disabled={setButtonDisabled()} route="BasicInfo" title={`Basic\nInfo`} /></View> );}export default BasicInfo;const styles = StyleSheet.create({ shell: { flex: 1, marginRight: 32, marginLeft: 32, }, ageAndGender: { flexDirection: 'row', flexWrap: 'wrap', justifyContent: "space-between", alignItems: "center", marginBottom: 32, }, body: { flex: 6, marginBottom: 128 }})And here is an image example of what I mean:
Here the view works fine
Here the view doesnt
Any help as to why it does not work or to rerender the view onPress of another component would be great - thanks!