I am trying to create a responsive KeyboardAvoidingView however I am struggling to have this work with flexBox. This is the layout I am hoping for:
And this is the layout I get:
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 }})Any help on where im going wrong with styling would be great. It works fine for larger screens but on smaller screens it becomes cramped - thanks :)