Animated view squeeze the text components after animation in react-native app

After animation my text components squeezes inside of Animated.View. For example if i have 4 lines of text and only 2 of them just shows on the screen. And i made a lot of manipulation like put flex=1, maxHeight to the parent and nothing is working. The best way what i have found is to change minHeight of AnimatedView. But i think it is not a good idea to implement dynamic height that depends on the text length. Can you recommend me please a good way to do it..

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 },
});