Paragraph, getHeight() ?

[milindsakhare100]

I tried this, but then the font/text disappeared.

How can I get height of paragraph.

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

import {Skia, Paragraph, useFonts} from '@shopify/react-native-skia';
const window = Dimensions.get('window');

export const TextAdd = ({matrix, editText, color}) => {
  const customFontMgr = useFonts({
    Roboto: [
      require('../../../assets/fonts/Lato-Bold.ttf'),
      require('../../../assets/fonts/Lato-Medium.ttf'),
    ],
  });

  const paragraph = useMemo(() => {
    // Are the font loaded already?
    if (!customFontMgr) {
      return null;
    }
    const textStyle = {
      color: Skia.Color('black'),
      fontFamilies: ['Roboto'],
      fontSize: 10,
    };
    return (
      Skia.ParagraphBuilder.Make({}, customFontMgr)
        .pushStyle(textStyle)
        .addText(editText)
        .pushStyle({...textStyle, fontStyle: {weight: 300}})
        // .addText('Skia 🎨')
        .pop()
        .build()
       .layout(window.width)
    );
  }, [customFontMgr, editText, matrix]);

  return (
    <Paragraph
      matrix={matrix}
      paragraph={paragraph}
      x={0}
      y={0}
      width={window.width}
    />
  );
};

[sanketpipaliya208]

Use this below code worked for me

useEffect(() => {
  if (!paragraph) {
    return;
  }
  setTimeout(() => {
    console.log(paragraph.getHeight());
  }, 50);
}, [paragraph]);

[milindsakhare100]

thank you!

[milindsakhare100]

One more question,

As shown in the image, we can set maxWidth, here I set maxWidth equals number of characters. But when we click the enter button from the keyboard characters starts from a new line. Therefore maxWidth remains the same. The paragraph will not be covered in the box.

So How can I solve this issue?
How can I get the width so there should not be that space?

[wcandillon]

this is the api you are looking for I think: https://shopify.github.io/react-native-skia/docs/text/paragraph/#paragraph-bounding-box