title: Text component overlapping with the View above it
body: <p>I'm practicing some react native code and I'm currently stuck with an overlapping problem.I've got this custom component:</p>
  
  <pre class="lang-js prettyprint-override"><code>const MobileNumberInput = ({ value, valueChanged, placeholder, valid }) =&gt; {
    return (
      &lt;View style={{ flexDirection: "row", flex: 1 }}&gt;
        &lt;TextInput
          editable={false}
          style={[styles.textBoxCountryCode, !valid ? styles.invalidTextBox : ""]}
          value="+90"
        /&gt;
        &lt;TextInput
          style={[styles.textBoxPhoneNumber, !valid ? styles.invalidTextBox : ""]}
          placeholder={placeholder}
          value={value}
          onChangeText={valueChanged}
          keyboardType="number-pad"
          maxLength={9}
        /&gt;
      &lt;/View&gt;
    );
  };
  export default MobileNumberInput;
  
  onst styles = StyleSheet.create({
    container: {
      flexDirection: "row",
      flex: 1,
      height: 40
    },
    textBoxCountryCode: {
      height: 40,
      borderColor: "gray",
      borderTopWidth: 1,
      borderBottomWidth: 1,
      borderLeftWidth: 1,
      borderTopLeftRadius: 5,
      borderBottomLeftRadius: 5,
      padding: 5,
      flex: 2
    },
    textBoxPhoneNumber: {
      height: 40,
      borderColor: "gray",
      borderTopWidth: 1,
      borderBottomWidth: 1,
      borderRightWidth: 1,
      borderTopRightRadius: 5,
      borderBottomRightRadius: 5,
      paddingTop: 5,
      paddingRight: 5,
      paddingBottom: 5,
      marginBottom: 10,
      flex: 11
    },
    invalidTextBox: {
      borderColor: "red"
    }
  });
  </code></pre>
  
  <p>And here, I'm using that component:</p>
  
  <pre class="lang-js prettyprint-override"><code>renderError = id =&gt; {
      const { validationErrors } = this.state;
      if (validationErrors[id]) {
        return (
          &lt;Text style={styles.validationError}&gt;{validationErrors[id][0]}&lt;/Text&gt;
        );
      }
      return null;
    };
    render() {
      const keyboardVerticalOffset = Platform.OS === "ios" ? 40 : 0;
      return (
        &lt;View style={styles.container}&gt;
          &lt;KeyboardAvoidingView
            behavior="padding"
            style={styles.textBoxContainerContainer}
            keyboardVerticalOffset={keyboardVerticalOffset}
          &gt;
            &lt;View style={styles.textBoxContainer}&gt;
              &lt;TextBoxMA
                style={styles.textBox}
                placeholder={Strings.USERNAME_PLACEHOLDER}
                value={this.state.userName}
                onChangeText={this.handleTextChange("userName")}
                valid={this.fieldIsValid("userName")}
              /&gt;
              {this.renderError("userName")}
            &lt;/View&gt;
            &lt;View style={styles.textBoxContainer}&gt;
              &lt;MobileNumberInput
                value={this.state.originalMobile}
                valueChanged={this.handleTextChange("originalMobile")}
                placeholder={Strings.ORIGINAL_MOBILE_PHONE_PLACEHOLDER}
                valid={this.fieldIsValid("originalMobile")}
              /&gt;
              {this.renderError("originalMobile")}
            &lt;/View&gt;
          &lt;/KeyboardAvoidingView&gt;
        &lt;/View&gt;
      );
    }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: "center",
      padding: 20
    },
    textBoxContainerContainer: {
      flex: 4,
      justifyContent: "flex-end"
    },
    textBoxContainer: {
      height: 40,
      marginBottom: 20
    },
    validationError: {
      fontSize: 12,
      color: "red",
      fontWeight: "bold",
      paddingTop: 3
    }
  });
  </code></pre>
  
  <p>The <code>{this.renderError("originalMobile")}</code> portion is responsible for rendering an error text. 
  I put it there to get a small red warning just under the text box. But the warning stretches to inside mobile number component while the username warning is displayed correctly. Here's the output:</p>
  
  <p><a href="https://i.stack.imgur.com/WzU8p.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WzU8p.jpg" alt="enter image description here"></a></p>
  
  <p>I've tried wrapping the error Text inside another View, didn't help. Wrapped the container View inside the MobileNumberInput component into yet another View with explicit flex-direction ="column". It didn't help either. I even changed the flex-direction of that container View to "column" just to see what would happen. But it didn't have any effect either. As you can see from the screenshot the problem is with the MobileNumberInput component part. The error text for the Username textinput is ok. </p>
  
  <p>And if you wonder what the TextBoxMA looks like, it's just a TextInput component with predefined properties. Here it is:</p>
  
  <pre><code>export const TextBoxMA = props =&gt; {
    return (
      &lt;TextInput
        secureTextEntry={props.isPassword || false}
        {...props}
        style={[
          props.style,
          styles.textBox,
          Platform.OS === "ios" ? styles.textBoxIos : styles.textBoxAndroid,
          !props.valid ? styles.invalidTextBox : ""
        ]}
      /&gt;
    );
  };
  const styles = StyleSheet.create({
    textBox: {
      height: 40,
      borderColor: "gray",
      borderWidth: 1,
      borderRadius: 5,
      padding: 5
    },
    invalidTextBox: {
      borderColor: "red"
    }
  });
  </code></pre>