title: Why does the Input of 'react-native-elements' go out of the Modal Window?
body: <p>I am working with a form to change the user's name, email and password.</p>
  <p>All elements are from <code>'react-native-elements'</code>, <code>Button</code>, <code>Icon</code> and the <code>Input</code>.</p>
  <p>This is displayed in a Modal created with <code>Overlay</code> of <code>'react-native-elements'</code>
  The name and email fields work correctly, they only have 2 <code>&quot;Inputs&quot;</code> each field, but the change password field has 3 <code>&quot;Inputs&quot;</code>:
  <em><strong>' CURRENT PASSWORD' , 'NEW PASSWORD' AND the ' CONFIRMATION '</strong></em> of the new password.</p>
  <p>The first screenshot is of the form with two fields
  In the second screenshot, the one with 3 fields in the form, for some reason, the third <code>&quot;Input&quot;</code> of '<code>confirmation'</code> of new password, is shown outside the <code>Modal</code>, which makes it difficult to distinguish it and causes problems when trying to change the password.</p>
  <p><a href="https://i.stack.imgur.com/ImbVJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ImbVJ.png" alt="enter image description here" /></a>.       <a href="https://i.stack.imgur.com/qIVQC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qIVQC.png" alt="enter image description here" /></a></p>
  <p>This prevents me from moving forward with the project until I fix it, as it is a very bad user experience.</p>
  <p>It has some very simple styles, and I spend the whole weekend trying to solve this without finding an explanation.</p>
  <p>Because I know that the third <code>&quot;Input&quot;</code> is Outside the <code>Modal</code> ?</p>
  <p>I hope this code is enough for you to tell me what I'm doing wrong</p>
  <p>This is the Modal component</p>
  <pre><code> &lt;Overlay
        isVisible={isVisible}
        overlayStyle={globalStyles.overlay}
        onBackdropPress={() =&gt; setVisible(false)}   // when we press outside, we exit the MODAL
      &gt;
  ***Styles***
  overlay: {
      height: 200,
      width: &quot;90%&quot;,
      backgroundColor: &quot;#fff&quot;,
      borderColor: &quot;#22aabe&quot;,
      borderWidth: 2,
      borderRadius: 10
    },
  </code></pre>
  <p>// and here I show the form</p>
  <pre><code>return (   // show the form on the screen
      &lt;View style={globalStyles.viewChangeEmail}&gt;
        &lt;Input
          placeholder=&quot;Current password...&quot;
          containerStyle={globalStyles.inputChangeEmail}
          defaultValue={currentPassword}
          onChange={(e) =&gt; setCurrentPassword(e.nativeEvent.text)}
          errorMessage={errorCurrentPassword}
          password={true}
          secureTextEntry={!showPassword}
          rightIcon={
            &lt;Icon
              type=&quot;material-community&quot;
              name={showPassword ? &quot;eye-off-outline&quot; : &quot;eye-outline&quot;}
              iconStyle={{ color: &quot;#c2c2c2&quot; }}
              onPress={() =&gt; setShowPassword(!showPassword)}
            /&gt;
          }
        /&gt;
        &lt;Input
          placeholder=&quot;your new password...&quot;
          containerStyle={globalStyles.inputChangeEmail}
          defaultValue={newPassword}
          onChange={(e) =&gt; setNewPassword(e.nativeEvent.text)}
          errorMessage={errorNewPassword}
          password={true}
          secureTextEntry={!showPassword}
          rightIcon={
            &lt;Icon
              type=&quot;material-community&quot;
              name={showPassword ? &quot;eye-off-outline&quot; : &quot;eye-outline&quot;}
              iconStyle={{ color: &quot;#c2c2c2&quot; }}
              onPress={() =&gt; setShowPassword(!showPassword)}
            /&gt;
          }
        /&gt;
        &lt;Input
          placeholder=&quot;Ingresa tu confirmación de nueva contraseña...&quot;
          containerStyle={globalStyles.inputChangeEmail}
          defaultValue={confirmPassword}
          onChange={(e) =&gt; setConfirmPassword(e.nativeEvent.text)}
          errorMessage={errorConfirmPassword}
          password={true}
          secureTextEntry={!showPassword}
          rightIcon={
            &lt;Icon
              type=&quot;material-community&quot;
              name={showPassword ? &quot;eye-off-outline&quot; : &quot;eye-outline&quot;}
              iconStyle={{ color: &quot;#c2c2c2&quot; }}
              onPress={() =&gt; setShowPassword(!showPassword)}
            /&gt;
          }
        /&gt;
        &lt;Button
          title=&quot;Change Password&quot;
          containerStyle={globalStyles.btnContainerChangePassword}
          buttonStyle={globalStyles.btn}
          onPress={onSubmit}
          loading={loading}
        /&gt;
      &lt;/View&gt;
    )
  
    viewChangeEmail: {
      alignItems: &quot;center&quot;,
      paddingVertical: 10
    },
  
    inputChangeEmail: {
      marginBottom: 10
    },
  
     btnContainerChangePassword: {
      width: &quot;95%&quot;
    },
  </code></pre>