react native distorted animated text

Question

I am trying to animate a text container wit texts from top area of the screen (width 0, height 0) to bottom area of the screen.

For some reason the texts are very distorted in the result of the animation:

Expected output for the yellow and white areas to look similar to this example:

    // ... 
    Animated.event([{ height: overlayHeightAnim }], {
      useNativeDriver: false
    })({
      height: cachedDeviceHeight - math.unscaledScrollViewHeight
    });

    Animated.parallel([
      Animated.timing(overlayOpacityAnim, {
        toValue: 1,
        duration: PIP_ANIMATION_DURATION,
        useNativeDriver: false
      }),
      Animated.timing(videoAnimatedWidth, {
        toValue: 0.35 * cachedDeviceWidth,
        duration: PIP_ANIMATION_DURATION,
        useNativeDriver: false
      }),
      Animated.timing(videoDetailsAnimatedWidth, {
        toValue: 0.65 * cachedDeviceWidth,
        duration: PIP_ANIMATION_DURATION,
        useNativeDriver: false
      }),
      Animated.timing(videoPipTranslateXAnim, {
        toValue: -(cachedDeviceWidth - math.targetVideoWidth) / 2,
        duration: PIP_ANIMATION_DURATION,
        useNativeDriver: false
      }),
      Animated.timing(pipTextScale, {
        toValue: 1,
        duration: PIP_ANIMATION_DURATION,
        useNativeDriver: false
      })
    ]).start();

   //.... 

  <Wrap style={wrapStyle} pointerEvents="box-none">
      <Animated.View
        style={[
          styles.videoWrapStyle,
          { width: cachedDeviceWidth },
          ,
          isInPip ? styles.pipContainerStyle : {}
        ]}
        {...panResponder.panHandlers}
      >
          {videoContent && (
            <Animated.View
              style={{
                flexDirection: 'row',
                height: videoAnimatedHeight,
                width: cachedDeviceWidth
              }}
            >
              <Animated.View
                style={[
                  {
                    transform: [
                      { scaleX: overlayScaleAnim },
                      { translateX: videoPipTranslateXAnim }
                    ]
                  },
                  {
                    height: videoAnimatedHeight,
                    width: videoAnimatedWidth
                  }
                ]}
              >
                <TouchableOpacity
                  disabled={!isInPip}
                  onPress={exitPip}
                  style={styles.videoTouchable}
                >
                  <View>
                    <VideoPlayer />
                  </View>
                </TouchableOpacity>
              </Animated.View>
              <Animated.View
                style={{
                  backgroundColor: 'white',
                  flexDirection: 'row',
                  // height: videoAnimatedHeight,
                  width: videoDetailsAnimatedWidth
                }}
              >
                <Animated.View
                  style={[
                    styles.pipVideoDescriptionWrapper,
                    { transform: [{ scale: pipTextScale }] }
                  ]}
                >
                  <PipVideoTitle
                    style={[
                      styles.pipText,
                      { transform: [{ scale: pipTextScale }] }
                    ]}
                    ellipsizeMode={'tail'}
                    numberOfLines={1}
                  >
                    {videoContent.title}
                  </PipVideoTitle>
                  <PipVideoSubtitle
                    style={[
                      styles.pipText,
                      { transform: [{ scale: pipTextScale }] }
                    ]}
                    ellipsizeMode={'tail'}
                    numberOfLines={1}
                  >
                    {videoContent.description || 'some description here'}
                  </PipVideoSubtitle>
                </Animated.View>
                <Animated.View style={styles.pipVideoControlsContainer}>
                  <TouchableOpacity
                    style={styles.pipActionButton}
                    onPress={onPipPlayPause}
                  >
                    {playActive ? (
                      <VideoPause width="24" height="24" />
                    ) : (
                      <VideoPlay width="24" height="24" />
                    )}
                  </TouchableOpacity>
                  <TouchableOpacity
                    style={styles.pipActionButton}
                    onPress={closePip}
                  >
                    <VideoClose width="24" height="24" />
                  </TouchableOpacity>
                </Animated.View>
              </Animated.View>
            </Animated.View>
          )}
        </>
      </Animated.View>

      <Animated.ScrollView
        ref={scrollViewRef}
        style={{
          backgroundColor: getBackgroundColor(),
          opacity: scrollViewOpacityAnim
        }}
        pointerEvents={isInPip ? 'none' : 'auto'}
      >
        <View
          style={{
            paddingBottom: safeArea.bottom
          }}
        >
          {(videoContent || !loadingVideo) && renderDetails()}
        </View>
      </Animated.ScrollView>
    </Wrap>
  );
};

// ...

const VideoTopControlBar = styled.View`
  height: ${relativeSize('xLarge') + relativeSize('medium')}px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: ${colorPalette.N1500};
`;

const Wrap = styled(Animated.View)`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
`;

const TimeDivider = styled.View`
  width: 40px;
  height: 2px;
  margin-top: 16px;
  margin-bottom: 8px;
  background-color: ${colorPalette.R500};
`;

const DetailFooter = styled.View`
  margin-bottom: ${relativeSize('medium')}px;
  padding-bottom: ${relativeSize('medium')}px;
  border-bottom-width: 1px;
  border-color: ${colorPalette.N550};
`;

const RelatedWrap = styled.View`
  padding-bottom: ${relativeSize('medium')}px;
`;

const CastingContainer = styled.View`
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding-right: ${relativeSize('small')}px;
`;

const VideoDetail = styled.View`
  padding: ${relativeSize('medium')}px;
`;

const Text = styled.Text`
  ${styledType(typeStyles.regular.regular)};
  color: ${colorPalette.N80};
  font-size: 12px;
`;

const Title = styled.Text`
  ${styledType(typeStyles.alternative.bold)};
  color: white;
  font-size: 25px;
  margin-bottom: 16px;
`;

const DescriptionWrap = styled.View`
  flex-direction: row;
`;

const Description = styled.Text`
  ${styledType(typeStyles.regular.regular)};
  color: ${colorPalette.N550};
  font-size: 14px;
  flex: 1;
  padding-right: 5px;
`;

const PipVideoTitle = styled(Animated.Text)`
  ${styledType(typeStyles.alternative.bold)};
  font-size: ${scale(18)}px;
  font-weight: 400;
  line-height: ${scale(22)}px;
  text-align: center;
  color: ${colorPalette.N900};
`;

const PipVideoSubtitle = styled(Animated.Text)`
  ${styledType(typeStyles.regular.regular)};
  font-size: ${scale(12)}px;
  font-weight: 400;
  text-align: center;
  line-height: ${scale(16)}px;
  color: ${colorPalette.N80};
`;

Any idea about what might generate the result of right side area to be distorted will be greatly appreciated.