react-native-skia-responsive-text/src/utils/alignment.ts

A library providing a wrapper for the React Native Skia Text component, offering features like user-friendly text alignment, efficient multiline text management, and straightforward text truncation.

import { HorizontalAlignment, TextLineData, VerticalAlignment } from '../types';

export const getTextLinesAlignment = (
  lines: Array<TextLineData>,
  width: number,
  alignment: HorizontalAlignment = 'left'
): Array<number> => {
  'worklet';
  switch (alignment) {
    case 'right':
      return lines.map(line => width - line.width);
    case 'center':
      return lines.map(line => (width - line.width) / 2);
    case 'center-left':
    case 'center-right':
      const longestLineWidth = Math.max(...lines.map(line => line.width));
      return lines.map(line =>
        alignment === 'center-left'
          ? (width - longestLineWidth) / 2
          : (width + longestLineWidth) / 2 - line.width
      );
    case 'left':
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      return lines.map(_ => 0);
  }
};

export const getVerticalAlignmentOffset = (
  componentHeight: number,
  parentHeight = 0,
  verticalAlignment: VerticalAlignment = 'top'
): number => {
  'worklet';
  switch (verticalAlignment) {
    case 'top':
      return 0;
    case 'center':
      if (componentHeight >= parentHeight) {
        return 0;
      }
      return (parentHeight - componentHeight) / 2;
    case 'bottom':
      return parentHeight && parentHeight - componentHeight;
  }
};