Paragraph textAlign ?

[milindsakhare100]

Please provide documentation for textAlign property in paragraph.

[wcandillon]

Here is an example: https://github.com/Shopify/react-native-skia/blob/main/package/src/renderer/__tests__/e2e/Paragraphs.spec.tsx#L210

[milindsakhare100]

Hi @wcandillon I tried textAlign but not working.

Please help

/* eslint-disable max-len */
import React, {useState, useMemo, useEffect} from 'react';
import {Dimensions} from 'react-native';

import {
  Skia,
  Paragraph,
  useFonts,
  FontStyle,
  Rect,
  Group,
} from '@shopify/react-native-skia';
import {useTapsContext} from '../TapContext';

const window = Dimensions.get('window');

export const TextAdd = ({
  matrix,
  editText,
  tColor,
  size2,
  boxHeight,
  boxWidth,
}) => {
  // const {addtaps} = useTapsContext();

  // console.log('vallllllllueeee text', matrix);
  const customFontMgr = useFonts({
    Roboto: [
      require('../../../assets/fonts/Lato-Bold.ttf'),
      // require('../../../assets/fonts/Lato-Medium.ttf'),
    ],
    RobotoMedium: [
      // require('../../../assets/fonts/Lato-Bold.ttf'),
      require('../../../assets/fonts/Lato-Medium.ttf'),
    ],
    Devnagri: [require('../../../assets/fonts/TiroDevanagariHindi-Italic.ttf')],
  });

  const paragraph = useMemo(() => {
    // Are the font loaded already?
    if (!customFontMgr) {
      return null;
    }
    const textStyle = {
      color: Skia.Color(!!tColor ? tColor : '#000'),
      fontFamilies: ['Devnagri'],
      fontSize: 10,
    };


    const para = Skia.ParagraphBuilder.Make({textAlign}, customFontMgr)
      .pushStyle({...textStyle, fontStyle: FontStyle.Normal})
      .addText(editText)
      .pop()
      .build();

    para.layout(editText.length + 100);
    return para;
  }, [customFontMgr, editText, matrix, tColor]);

  var height = paragraph?.getHeight();
  var width = paragraph?.getLongestLine();

  boxHeight.value = height;
  boxWidth.value = width;

  return (
    <Paragraph
      matrix={matrix}
      paragraph={paragraph}
      x={0}
      y={0}
      width={editText.length + 100}
    />
  );
};

[wcandillon]

it looks like we fixed the documentation about this: https://shopify.github.io/react-native-skia/docs/text/paragraph/