Skia Message

SkiaMessage.tsx

import React, { useMemo } from 'react';
import { useWindowDimensions } from 'react-native';
import { Canvas, Path, Group, Paragraph, RoundedRect, FitBox, rect, Skia, useFonts } from '@shopify/react-native-skia';

export const TAIL_PATH =
  'M3.94273 0V6.12112C4.06491 8.02508 3.83039 9.92913 3.19852 11.7719C2.74874 13.0837 2.12094 14.2964 1.34027 15.4016C1.26825 15.5036 1.20493 15.6101 1.15 15.7201C0.747509 16.0979 0.496094 16.6348 0.496094 17.2304C0.496094 18.3741 1.42328 19.3013 2.56701 19.3013C2.66084 19.3013 2.75322 19.2951 2.84374 19.283C2.92254 19.2764 3.00318 19.2642 3.08557 19.2462C9.1064 17.9284 13.7623 14.5866 15.4498 9.66513C16.5144 6.56026 16.2603 3.22681 14.937 0H3.94273Z';

export const Paragraphs = () => {
  const { height, width } = useWindowDimensions();

  const customFontMgr = useFonts({
    Roboto: [require('../../Tests/assets/Roboto-Medium.ttf'), require('../../Tests/assets/Roboto-Regular.ttf')],
  });

  const text = 'Rendering via paragraph API 🥳';

  const paragraph = useMemo(() => {
    if (customFontMgr === null) return null;
    const paragraphBuilder = Skia.ParagraphBuilder.Make({}, customFontMgr);

    const res = paragraphBuilder
      .pushStyle({
        fontSize: 20,
        fontFamilies: ['Roboto'],
        color: Skia.Color('#fff'),
      })
      .addText(text)
      .build();

    res.layout(300);

    return res;
  }, [customFontMgr]);

  const padding = 12;
  const rectWidth = 300 + padding * 2;
  const rectHeight = (paragraph?.getHeight() ?? 0) + padding * 2;

  return (
    <Canvas
      style={{
        width,
        height,
      }}
    >
      <Group transform={[{ translateX: 30 }, { translateY: 30 }]}>
        <RoundedRect color="black" r={16} x={4} y={0} width={rectWidth} height={rectHeight} />
        <Paragraph paragraph={paragraph} x={padding} y={padding} width={300} />

        <Group transform={[{ translateY: rectHeight - 21 }]}>
          <FitBox src={rect(0, 0, 17, 20)} dst={rect(0, 0, 17, 22)}>
            <Path color="black" path={TAIL_PATH} />
          </FitBox>
        </Group>
      </Group>
    </Canvas>
  );
};