React Native: текст обрезается при использовании numberOfLines и align-items

Я пытаюсь стилизовать заставку, я использую стилизованные компоненты. Я хочу, чтобы текст и изображение можно было пролистывать по экрану, поэтому я создал карточку. теперь текст на карточке не работает только на android, он просто обрезается, когда я использую align-items с numberOfLines

Вот заставка

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 (
      <Container>
        <LogoView>
          <Text style={logo.text}>
            {" "}
            Jennya's <Text style={logo.studio}>Studio </Text>
          </Text>
        </LogoView>
        <CardView>
          <SplashCard />
        </CardView>
        <DotsView></DotsView>
        <ButtonView></ButtonView>
        <LoginView></LoginView>
      </Container>
    );
  }
}

//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;
`;

Вот карта-заставка

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) => (
  <Container>
    <ImageView>
      <IllustrationImage
        resizeMode="contain"
        source={require("../../assets/Illustartions/Illustration1.png")}
      />
    </ImageView>
    <TitleView>
      <Title>Welcome</Title>
    </TitleView>
    <TextView>
      <Text numberOfLines={4} style={{ flex: 1, flexWrap: "wrap" }}>
        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.
      </Text>
    </TextView>
  </Container>
);
export default SplashCard;

//Main Card Container
const Container = styled.View`
  flex: 1;
  background-color: #ffffff;
`;

//Image Position & 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 & 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;
`;

Вот как это выглядит на android и ios Изображение вырезанного текста в android