Анимированный вид сжимает текстовые компоненты после анимации в приложении-родном приложении

Question

После анимации мои текстовые компоненты сжимаются внутри Animated.View. Например, если у меня есть 4 строки текста, и только 2 из них просто отображаются на экране. И я сделал много манипуляций, таких как put flex = 1, maxHeight для родителя, и ничего не работает. Лучший способ, который я нашел, это изменить minHeight AnimatedView. Но я думаю, что не стоит реализовывать динамическую высоту, которая зависит от длины текста. Можете ли вы порекомендовать мне, пожалуйста, хороший способ сделать это. .

const vars = {
  duration: 500,
  offset: 56,
};

export class Notification extends React.Component<NotificationProps> {
  public state = {
    offset: new Animated.Value(-vars.offset),
    opacity: new Animated.Value(0),
  };

  private _timeout: any;

  public componentDidMount() {
    const timeout = -moment().diff(this.props.closeTime);
    this._timeout = setTimeout(this._close, timeout);

    Animated.parallel([
      Animated.timing(this.state.offset, {
        toValue: 8,
        duration: vars.duration,
      }),
      Animated.timing(this.state.opacity, {
        toValue: 1,
        duration: vars.duration,
      }),
    ]).start();
  }

  public componentWillUnmount() {
    clearTimeout(this._timeout);
  }

  public componentDidUpdate(prevProps: NotificationProps, prevState: any) {
    const { itemIndex } = this.props;
    const timeout = -moment().diff(this.props.closeTime);
    clearTimeout(this._timeout);

    if (itemIndex && itemIndex >= 2) {
      this._close(true);

      return;
    }

    this._timeout = setTimeout(this._close, timeout);
  }

  public render() {
    const { type, title, message, itemIndex = 0 } = this.props;
    const containerStyle = type ? (SS as any)['notificationType' + type.capitalize()] : null;
    const animatedStyle = {
      marginTop: this.state.offset,
      opacity: this.state.opacity,
      zIndex: 10 - itemIndex,
    };

    return (
      <Animated.View style={animatedStyle}>
        <TouchableOpacity style={[SS.notification, containerStyle]} activeOpacity={1} onPress={this._onPress}>
          <Row flex={1}>
            <Row flex={1}>
              <Row alignSelf={'center'} flex={1}>
                {!!title && <Text textStyle={'textLine'} color={colors.base}>{title}</Text>}
                <Text numberOfLines={3} textStyle={'textLine'} color={colors.base} wrap>{message}</Text>
              </Row>
            </Row>
            <ButtonIcon name={'IconClosePopup'} color={colors.base} fontSize={10} onPress={this._onPress} />
          </Row>
        </TouchableOpacity>
      </Animated.View>
    );
  }

  private _onPress = () => {
    this._close(false);
  };

  private _close = (isThird: boolean = false) => {
    Animated.parallel([
      Animated.timing(this.state.offset, {
        toValue: isThird ? vars.offset : -vars.offset,
        duration: vars.duration,
      }),
      Animated.timing(this.state.opacity, {
        toValue: 0,
        duration: vars.duration,
      }),
    ]).start(() => this.props.onPress());
  };
}

const SS = EStyleSheet.create({
  notification: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: colors.base,
    justifyContent: 'space-between',
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingTop: 21,
    paddingBottom: 19,
    marginHorizontal: 12,
    minHeight: vars.offset,
  },
  notificationTypeAlert: { backgroundColor: colors.negativeLight },
  notificationTypeSuccess: { backgroundColor: colors.positiveLight },
  notificationTypeInfo: { backgroundColor: colors.negativeLight },
});