title: React Native: Text gets cut when using numberOfLines & align-items
body: <p>I'm trying to style a Splash Screen, I'm using styled-components.
  I want the Text &amp; Image to be swipeable on the screen so I created a card.
  now the text in the card gets broken only on android, it just gets cuts off when I use <code>align-items</code> with <code>numberOfLines</code></p>
  
  <p>Here is the Splash Screen</p>
  
  <pre><code>import React from "react";
  import { StyleSheet, Text, Dimensions, Button } from "react-native";
  import styled from "styled-components/native";
  import SplashCard from "../components/SplashCard";
  
  const windowWidth = Dimensions.get("window").width;
  const windowHeight = Dimensions.get("window").height;
  
  export default class SplashScreen extends React.Component {
    render() {
      return (
        &lt;Container&gt;
          &lt;LogoView&gt;
            &lt;Text style={logo.text}&gt;
              {" "}
              Jennya's &lt;Text style={logo.studio}&gt;Studio &lt;/Text&gt;
            &lt;/Text&gt;
          &lt;/LogoView&gt;
          &lt;CardView&gt;
            &lt;SplashCard /&gt;
          &lt;/CardView&gt;
          &lt;DotsView&gt;&lt;/DotsView&gt;
          &lt;ButtonView&gt;&lt;/ButtonView&gt;
          &lt;LoginView&gt;&lt;/LoginView&gt;
        &lt;/Container&gt;
      );
    }
  }
  
  //Container And Background
  const Container = styled.View`
    flex: 1;
    margin-top: 30px;
    margin-bottom: 20px;
    margin-left: 18px;
    margin-right: 18px;
    flex-direction: column;
    background-color: #ffffff;
  `;
  
  const LogoView = styled.View`
    width: 100%;
    height: 10%;
    background-color: #ff0;
    justify-content: center;
    align-items: center;
  `;
  
  //Logo Styling
  const logo = StyleSheet.create({
    text: {
      fontFamily: "Carrington",
      fontSize: 42,
      fontWeight: "normal",
      fontStyle: "normal",
      letterSpacing: -1.01,
      textAlign: "center",
      color: "#7356bf",
    },
  
    studio: {
      color: "#ffc043",
    },
  });
  
  const CardView = styled.View`
    height: 55%;
    background-color: #7532a8;
  `;
  
  const DotsView = styled.View`
    height: 3%;
    background-color: #eb0e28;
  `;
  
  const ButtonView = styled.View`
    height: 27%;
    background-color: #2929;
  `;
  const LoginView = styled.View`
    height: 5%;
    background-color: #f929;
  `;
  
  </code></pre>
  
  <p>Here is the Splash Screen Card</p>
  
  <pre><code>import React from "react";
  import styled from "styled-components/native";
  import { Dimensions } from "react-native";
  
  const window = Dimensions.get("window");
  
  //Image Ratio
  const ratio = window.width / 240;
  
  const SplashCard = (props) =&gt; (
    &lt;Container&gt;
      &lt;ImageView&gt;
        &lt;IllustrationImage
          resizeMode="contain"
          source={require("../../assets/Illustartions/Illustration1.png")}
        /&gt;
      &lt;/ImageView&gt;
      &lt;TitleView&gt;
        &lt;Title&gt;Welcome&lt;/Title&gt;
      &lt;/TitleView&gt;
      &lt;TextView&gt;
        &lt;Text numberOfLines={4} style={{ flex: 1, flexWrap: "wrap" }}&gt;
          This can either be a string or a function. Strings are with the rules
          as-is. Functions will receive the styled component's props as the first
          and only argument.
        &lt;/Text&gt;
      &lt;/TextView&gt;
    &lt;/Container&gt;
  );
  export default SplashCard;
  
  //Main Card Container
  const Container = styled.View`
    flex: 1;
    background-color: #ffffff;
  `;
  
  //Image Position &amp; Size
  const ImageView = styled.View`
    height: 70%;
    justify-content: center;
    align-items: center;
    background-color: #0f48a3;
  `;
  
  const IllustrationImage = styled.Image`
    flex: 1;
    height: ${ratio * 240}px;
    width: ${window.width}px;
    max-width: 240px;
    max-height: 240px;
  `;
  
  //Title Position &amp; Size
  const TitleView = styled.View`
    height: 10%;
    justify-content: center;
    align-items: center;
    background-color: #8d14de;
  `;
  
  const Title = styled.Text`
    flex: 1;
    font-family: Metropolis-SemiBold;
    font-size: 30px;
    font-weight: 600;
    font-style: normal;
    letter-spacing: -0.72px;
    text-align: center;
    color: #000000;
  `;
  
  //Text View
  const TextView = styled.View`
    flex: 1;
    background-color: #db07bf;
  `;
  
  //Text Style
  
  const Text = styled.Text`
    font-family: Metropolis-Medium;
    font-size: 18px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 1.1px;
    text-align: center;
    color: #171415;
  `;
  
  </code></pre>
  
  <p>Here is What it looks like on both android and ios
  <a href="https://i.stack.imgur.com/i9bvj.jpg" rel="nofollow noreferrer">Image of the cut text in android</a></p>