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:
Image may be NSFW.
Clik here to view.
Here the view works fine
Image may be NSFW.
Clik here to view.
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!
