title: My views are going out on when device resolution changes in react native
body: <p><strong>Problem:</strong></p>
  
  <p>I have created a react native application in there I have codded a screen like this.</p>
  
  <pre><code> &lt;View style={styles.patientView}&gt;
        &lt;View
          style={[
            styles.patientContainer,
            {height: (dimensions.window.height * 2.9) / 4},
          ]}&gt;
          &lt;AppText styles={styles.patientFormTitle}&gt;
            {strings('new-patient.form-title')}
          &lt;/AppText&gt;
          &lt;View style={styles.formContainer}&gt;
            &lt;NewPatientForm
              navigate={() =&gt; _privacyNavigate(props.navigation)}
              onpress={_onPress}
              mobileNo={props.mobileNo}
              loadding={props.loadding}
              createpa={props.createpatient}
              location={location}
            /&gt;
          &lt;/View&gt;
        &lt;/View&gt;
  
        &lt;View style={styles.hr} /&gt;
        &lt;View style={styles.patientBottomContainer}&gt;
          &lt;View style={styles.patientBottomView}&gt;
            &lt;TouchableOpacity onPress={() =&gt; _navigate(props.navigation)}&gt;
              &lt;AppText styles={styles.bottomLinkText}&gt;
                {strings('new-patient.bottom-link')}
              &lt;/AppText&gt;
            &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      &lt;/View&gt;
  </code></pre>
  
  <p>This is my new patient form code.</p>
  
  <pre><code>import React from 'react';
  import {
    View,
    TextInput,
    TouchableOpacity,
    ScrollView,
    Image,
  } from 'react-native';
  import {Picker} from '@react-native-community/picker';
  import CheckBox from '@react-native-community/checkbox';
  import styles from './newpatientstyles';
  import Icon from 'react-native-vector-icons/FontAwesome';
  import {Formik} from 'formik';
  import * as Yup from 'yup';
  import {connect} from 'react-redux';
  import {patientActions} from '_store/actions';
  import {strings} from '_translations/i18n';
  import AppText from '_components/appText';
  import spinner from '_assets/img/spinner.gif';
  
  const NewPatient = (props) =&gt; {
    const {navigate, mobileNo, onpress, loadding, createpa, location} = props;
    return (
      &lt;ScrollView style={{flex: 1}}&gt;
        &lt;Formik
          initialValues={{
            firstname: '',
            lastname: '',
            address: '',
            age: '',
            gender: '',
            mobileNo: mobileNo,
            privacy: false,
          }}
          validationSchema={Yup.object({
            firstname: Yup.string().required(strings('new-patient.f-validation')),
            lastname: Yup.string().required(strings('new-patient.l-validation')),
            address: Yup.string().required(strings('new-patient.a-validation')),
            age: Yup.string().required(strings('new-patient.ag-valiation')),
            gender: Yup.string().required(strings('new-patient.g-validation')),
            mobileNo: Yup.string()
              .min(10, strings('new-patient.m-validation'))
              .required(strings('new-patient.m-validation')),
            privacy: Yup.boolean().oneOf(
              [true],
              strings('new-patient.privacy-validation'),
            ),
          })}
          enableReinitialize={mobileNo}
          onSubmit={(values, formikActions) =&gt; {
            onpress(values, createpa, location);
            setTimeout(() =&gt; {
              formikActions.setSubmitting(false);
            }, 500);
          }}&gt;
          {(formprops) =&gt; (
            &lt;View&gt;
              &lt;View
                style={
                  !formprops.values.firstname &amp;&amp; !formprops.errors.firstname
                    ? styles.inputView
                    : formprops.values.firstname &amp;&amp;
                      !formprops.errors.firstname &amp;&amp;
                      formprops.touched.firstname
                    ? styles.validInputView
                    : formprops.errors.firstname &amp;&amp; formprops.touched.firstname
                    ? styles.inputViewError
                    : styles.inputView
                }&gt;
                &lt;TextInput
                  style={styles.textField}
                  placeholder={strings('new-patient.f-placeholder')}
                  placeholderTextColor="#bbbbbb"
                  value={formprops.values.firstname}
                  onChangeText={formprops.handleChange('firstname')}
                  onBlur={formprops.handleBlur('firstname')}
                  keyboardType="default"
                /&gt;
                {formprops.errors.firstname &amp;&amp; formprops.touched.firstname ? (
                  &lt;Icon name="times" size={20} style={styles.errorIcon} /&gt;
                ) : null}
                {!formprops.errors.firstname &amp;&amp;
                formprops.values.firstname &amp;&amp;
                formprops.touched.firstname ? (
                  &lt;Icon name="check" size={20} style={styles.validIcon} /&gt;
                ) : null}
              &lt;/View&gt;
              {formprops.touched.firstname &amp;&amp; formprops.errors.firstname ? (
                &lt;View style={styles.errorMessage}&gt;
                  &lt;AppText styles={styles.errorMessageText}&gt;
                    {formprops.errors.firstname}
                  &lt;/AppText&gt;
                &lt;/View&gt;
              ) : null}
              &lt;View
                style={
                  !formprops.values.lastname &amp;&amp; !formprops.errors.lastname
                    ? styles.inputView
                    : formprops.values.lastname &amp;&amp;
                      !formprops.errors.lastname &amp;&amp;
                      formprops.touched.lastname
                    ? styles.validInputView
                    : formprops.errors.lastname &amp;&amp; formprops.touched.lastname
                    ? styles.inputViewError
                    : styles.inputView
                }&gt;
                &lt;TextInput
                  style={styles.textField}
                  placeholder={strings('new-patient.l-placeholder')}
                  placeholderTextColor="#bbbbbb"
                  value={formprops.values.lastname}
                  onChangeText={formprops.handleChange('lastname')}
                  onBlur={formprops.handleBlur('lastname')}
                  keyboardType="default"
                /&gt;
                {formprops.errors.lastname &amp;&amp; formprops.touched.lastname ? (
                  &lt;Icon name="times" size={20} style={styles.errorIcon} /&gt;
                ) : null}
                {!formprops.errors.lastname &amp;&amp;
                formprops.values.lastname &amp;&amp;
                formprops.touched.lastname ? (
                  &lt;Icon name="check" size={20} style={styles.validIcon} /&gt;
                ) : null}
              &lt;/View&gt;
              {formprops.touched.lastname &amp;&amp; formprops.errors.lastname ? (
                &lt;View style={styles.errorMessage}&gt;
                  &lt;AppText styles={styles.errorMessageText}&gt;
                    {formprops.errors.lastname}
                  &lt;/AppText&gt;
                &lt;/View&gt;
              ) : null}
              &lt;View
                style={
                  !formprops.values.address &amp;&amp; !formprops.errors.address
                    ? styles.inputView
                    : formprops.values.address &amp;&amp;
                      !formprops.errors.address &amp;&amp;
                      formprops.touched.address
                    ? styles.validInputView
                    : formprops.errors.address &amp;&amp; formprops.touched.address
                    ? styles.inputViewError
                    : styles.inputView
                }&gt;
                &lt;TextInput
                  style={styles.textField}
                  placeholder={strings('new-patient.ad-placeholder')}
                  placeholderTextColor="#bbbbbb"
                  value={formprops.values.address}
                  onChangeText={formprops.handleChange('address')}
                  onBlur={formprops.handleBlur('address')}
                  keyboardType="default"
                /&gt;
                {formprops.errors.address &amp;&amp; formprops.touched.address ? (
                  &lt;Icon name="times" size={20} style={styles.errorIcon} /&gt;
                ) : null}
                {!formprops.errors.address &amp;&amp;
                formprops.values.address &amp;&amp;
                formprops.touched.address ? (
                  &lt;Icon name="check" size={20} style={styles.validIcon} /&gt;
                ) : null}
              &lt;/View&gt;
              {formprops.touched.address &amp;&amp; formprops.errors.address ? (
                &lt;View style={styles.errorMessage}&gt;
                  &lt;AppText styles={styles.errorMessageText}&gt;
                    {formprops.errors.address}
                  &lt;/AppText&gt;
                &lt;/View&gt;
              ) : null}
              &lt;View
                style={
                  !formprops.values.age &amp;&amp; !formprops.errors.age
                    ? styles.inputView
                    : formprops.values.age &amp;&amp;
                      !formprops.errors.age &amp;&amp;
                      formprops.touched.age
                    ? styles.validInputView
                    : formprops.errors.age &amp;&amp; formprops.touched.age
                    ? styles.inputViewError
                    : styles.inputView
                }&gt;
                &lt;TextInput
                  style={styles.textField}
                  placeholder={strings('new-patient.a-placeholder')}
                  placeholderTextColor="#bbbbbb"
                  value={formprops.values.age}
                  onChangeText={formprops.handleChange('age')}
                  onBlur={formprops.handleBlur('age')}
                  keyboardType="numeric"
                /&gt;
                {formprops.errors.age &amp;&amp; formprops.touched.age ? (
                  &lt;Icon name="times" size={20} style={styles.errorIcon} /&gt;
                ) : null}
                {!formprops.errors.age &amp;&amp;
                formprops.values.age &amp;&amp;
                formprops.touched.age ? (
                  &lt;Icon name="check" size={20} style={styles.validIcon} /&gt;
                ) : null}
              &lt;/View&gt;
              {formprops.touched.age &amp;&amp; formprops.errors.age ? (
                &lt;View style={styles.errorMessage}&gt;
                  &lt;AppText styles={styles.errorMessageText}&gt;
                    {formprops.errors.age}
                  &lt;/AppText&gt;
                &lt;/View&gt;
              ) : null}
              &lt;View
                style={
                  !formprops.values.gender
                    ? styles.inputView
                    : styles.validInputView
                }&gt;
                &lt;Picker
                  selectedValue={formprops.values.gender}
                  style={styles.picker}
                  mode="dropdown"
                  onValueChange={(itemValue, itemIndex) =&gt;
                    formprops.setFieldValue('gender', itemValue)
                  }&gt;
                  &lt;Picker.Item
                    label={strings('new-patient.s-placeholder')}
                    value="0"
                    color="#bbbbbb"
                  /&gt;
                  &lt;Picker.Item
                    label={strings('new-patient.male')}
                    value={strings('new-patient.male')}
                  /&gt;
                  &lt;Picker.Item
                    label={strings('new-patient.female')}
                    value={strings('new-patient.female')}
                  /&gt;
                &lt;/Picker&gt;
                {formprops.errors.gender &amp;&amp; formprops.touched.gender ? (
                  &lt;Icon name="times" size={20} style={styles.errorIcon} /&gt;
                ) : null}
                {!formprops.errors.gender &amp;&amp;
                formprops.values.gender &amp;&amp;
                formprops.touched.gender ? (
                  &lt;Icon name="check" size={20} style={styles.validIcon} /&gt;
                ) : null}
              &lt;/View&gt;
              &lt;View
                style={
                  !formprops.values.mobileNo &amp;&amp; !formprops.errors.mobileNo
                    ? styles.inputView
                    : formprops.values.mobileNo &amp;&amp; !formprops.errors.mobileNo
                    ? styles.validInputView
                    : styles.inputViewError
                }&gt;
                &lt;TextInput
                  style={styles.textField}
                  placeholder={strings('new-patient.mobileNo')}
                  placeholderTextColor="#bbbbbb"
                  value={formprops.values.mobileNo}
                  onChangeText={formprops.handleChange('mobileNo')}
                  onBlur={formprops.handleBlur('mobileNo')}
                  keyboardType="numeric"
                /&gt;
                {formprops.touched.mobileNo &amp;&amp; formprops.errors.mobileNo ? (
                  &lt;Icon name="times" size={20} style={styles.errorIcon} /&gt;
                ) : null}
                {formprops.values.mobileNo &amp;&amp; !formprops.errors.mobileNo ? (
                  &lt;Icon name="check" size={20} style={styles.validIcon} /&gt;
                ) : null}
              &lt;/View&gt;
              {formprops.touched.mobileNo &amp;&amp; formprops.errors.mobileNo ? (
                &lt;View style={styles.errorMessage}&gt;
                  &lt;AppText styles={styles.errorMessageText}&gt;
                    {formprops.errors.mobileNo}
                  &lt;/AppText&gt;
                &lt;/View&gt;
              ) : null}
              &lt;View style={styles.checkBoxContainer}&gt;
                &lt;CheckBox
                  tintColors={{true: '#007aff', false: '#007aff'}}
                  value={formprops.values.privacy}
                  onValueChange={(value) =&gt;
                    formprops.setFieldValue('privacy', value)
                  }
                /&gt;
                &lt;AppText styles={styles.termsText}&gt;
                  {strings('new-patient.privacy-text')}
                &lt;/AppText&gt;
                &lt;View style={styles.termsLinkView}&gt;
                  &lt;TouchableOpacity onPress={navigate}&gt;
                    &lt;AppText styles={styles.termsLink}&gt;
                      {' '}
                      {strings('new-patient.privacy-link')}
                    &lt;/AppText&gt;
                  &lt;/TouchableOpacity&gt;
                &lt;/View&gt;
              &lt;/View&gt;
              {formprops.touched.privacy &amp;&amp; formprops.errors.privacy ? (
                &lt;View style={styles.errorMessage}&gt;
                  &lt;AppText styles={styles.errorMessageText}&gt;
                    {formprops.errors.privacy}
                  &lt;/AppText&gt;
                &lt;/View&gt;
              ) : null}
  
              &lt;TouchableOpacity
                style={styles.sendButton}
                onPress={formprops.handleSubmit}&gt;
                {loadding ? (
                  &lt;Image source={spinner} style={styles.bimage} /&gt;
                ) : (
                  &lt;AppText styles={styles.sendButtonText}&gt;
                    {strings('new-patient.btn-text')}
                  &lt;/AppText&gt;
                )}
              &lt;/TouchableOpacity&gt;
            &lt;/View&gt;
          )}
        &lt;/Formik&gt;
      &lt;/ScrollView&gt;
    );
  };
  
  export default NewPatient;
  </code></pre>
  
  <p>this is my stylings</p>
  
  <pre><code>import {StyleSheet} from 'react-native';
  
  const styles = StyleSheet.create({
    patientView: {
      display: 'flex',
      flex: 1,
      backgroundColor: '#eeeeee',
      flexDirection: 'column',
    },
    patientTitleView: {
      alignItems: 'center',
      marginTop: '5%',
    },
    patientTitle: {
      fontSize: 20,
      fontWeight: '300',
      fontStyle: 'normal',
      textAlign: 'center',
      color: '#444444',
    },
    patientFormTitle: {
      fontSize: 25,
      fontWeight: '200',
      fontStyle: 'normal',
      textAlign: 'center',
      color: '#444444',
      alignItems: 'center',
      marginTop: 20,
    },
    hr: {
      marginTop: 40,
      marginBottom: 5,
      borderBottomColor: '#c3c3c3',
      borderBottomWidth: 2.0,
      marginRight: 30,
      marginLeft: 30,
    },
    patientBottomContainer: {
      height: 50,
    },
    patientBottomView: {
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
    },
    patientBottomContainerText: {
      fontSize: 13,
      color: '#444444',
      fontWeight: '500',
    },
    formContainer: {
      flex: 1,
      marginRight: 30,
      marginLeft: 30,
    },
    patientBottomLinkView: {
      paddingLeft: 20,
      flex: 1,
      alignItems: 'flex-start',
      justifyContent: 'center',
    },
    patientBottomContainerTextView: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'flex-end',
      paddingLeft: 30,
    },
    bottomLinkText: {
      fontSize: 13,
      color: '#484848',
      borderBottomWidth: 2,
      borderBottomColor: '#c3c3c3',
    },
    errorMessage: {},
    errorMessageText: {
      color: '#ff3d3d',
      fontSize: 18,
      marginTop: 10,
    },
    patientContainer: {
      marginTop: 50,
      backgroundColor: '#f2f2f2',
      elevation: 10,
      shadowColor: '#000',
      shadowOffset: {width: 0, height: 3},
      shadowOpacity: 0.5,
      shadowRadius: 5,
    },
    submitButtonView: {
      marginTop: 30,
    },
    patienterrorInput: {
      marginTop: 40,
      borderBottomColor: '#ff3d3d',
      fontFamily: 'Montserrat-Medium',
      borderBottomWidth: 2,
      fontSize: 16,
      fontWeight: '500',
    },
    inputView: {
      marginTop: 10,
      flexDirection: 'row',
      borderBottomColor: '#cccccc',
      borderBottomWidth: 2,
    },
    inputViewError: {
      // flex: 1,
      marginTop: 10,
      flexDirection: 'row',
      borderBottomColor: '#ff3d3d',
      borderBottomWidth: 2,
    },
    validInputView: {
      marginTop: 10,
      flexDirection: 'row',
      borderBottomColor: '#007aff',
      borderBottomWidth: 2,
    },
    errorIcon: {
      marginTop: 15,
      color: '#ff3d3d',
    },
    validIcon: {
      marginTop: 15,
      color: '#007aff',
    },
    textField: {
      flex: 1,
      fontFamily: 'Montserrat-Medium',
      fontSize: 16,
      fontWeight: '500',
      paddingLeft: 0,
    },
    picker: {
      flex: 1,
      fontFamily: 'Montserrat-Medium',
      fontSize: 16,
      fontWeight: '500',
      backgroundColor: '#f2f2f2',
      letterSpacing: 2,
      marginLeft: -5,
    },
    checkBoxContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      marginTop: 10,
    },
    termsText: {
      color: '#888888',
      fontWeight: '500',
      fontSize: 15,
    },
    termsLink: {
      fontWeight: '500',
      color: '#222222',
      fontSize: 15,
      borderBottomColor: '#c3c3c3',
      borderBottomWidth: 2.0,
    },
    termsLinkView: {
      flex: 1,
      marginLeft: 5,
      alignItems: 'center',
    },
    sendButton: {
      flex: 1,
      backgroundColor: '#007aff',
      paddingTop: 15,
      paddingBottom: 15,
      alignItems: 'center',
      borderRadius: 50,
      marginTop: 25,
      marginBottom: 20,
      justifyContent: 'center',
    },
    sendButtonText: {
      fontFamily: 'Montserrat-Medium',
      color: '#ffffff',
      fontWeight: '300',
      fontSize: 18,
      textAlign: 'center',
      letterSpacing: 2,
    },
    bimage: {
      width: 30,
      height: 30,
    },
  });
  
  export default styles;
  </code></pre>
  
  <p>I have given height to middle view according to device height. So when resolution changes on some devices bottom view is going out of the screen. So can someone help me to solve this issue? Thank you. </p>