Android and IOS: value is null, expected an object at drawText

[pandey21197]

Description

While using Text component getting this error. I have check x, y and text, none of them are null.

This is happening for both android and IOS.

Version

0.1.123

Steps to reproduce

render list of Text component

Snack, code example, screenshot, or link to a repository

[wcandillon]

can you share a code snippet to reproduce the issue?

[pandey21197]

@wcandillon create array of Text :

const renderXText = () => {
for (let i = minHour + xRange; i <= maxHour; i = i + xRange) {
      const extraPixelToAdd = 4 * xRange * pixelPerReading; // 4 * 15 = 1hr

      const x = lastReadingPixel + extraPixelToAdd;

      xCoordinatePlot.push(
        <Text
          key={i}
          x={x} //check width of this and /2
          y={yCord}
          text={formatXLabel(i)}
          font={font}
          color={theme.palette.neutral.lightGrey}
          size={fontSize}
        />,
      );

      lastReadingPixel = x;
    }

    return xCoordinatePlot;
}

This is the return from the main function:

  return (
    <Group>
      {xPoints && xPoints.length > 0 && <Group>{renderXText()}</Group>}
    </Group>
  );

data set which u can use (array of any number): [10, 11, 12, 13, 14]

let me know if u need anything else.

[pandey21197]

@wcandillon the reason iam using "0.1.123" because path.toCmds() in new version doesnt return array of 8 rather it returns 6. Basically needed for getYForX method.

export const selectCurve = (cmds, x) => {
  const curve = cmds.find(cmd => {
    if (cmd === null) {
      return false;
    }

    const isCubicCurve = cmd[0] === PathVerb.Cubic;

    const to = vec(cmd[1], cmd[2]);
    const from = vec(cmd[7], cmd[8]);

    const isXbetweenCurve = x <= from.x && x >= to.x;

    return isCubicCurve && isXbetweenCurve;
  });

  if (curve) {
    const to = vec(curve[1], curve[2]);
    const from = vec(curve[7], curve[8]);

    const midPoint1 = vec(curve[3], curve[4]);
    const midPoint2 = vec(curve[5], curve[6]);

    return {
      from: from,
      midPoint1: midPoint1,
      midPoint2: midPoint2,
      to: to,
    };
  }

  return undefined;
};

so iam stuck at "0.1.123" if this issue is already solved in latest version/or get fixed in upcoming version. Can you provide any alternative for this too.

Thanks in advance!

[pandey21197]

@wcandillon when i render with hardcoded values:

 <Text
        key={1}
        x={10}
        y={10}
        text={'Target Zone'}
        font={font}
        color={theme.palette.neutral.lightGrey}
        size={fontSize}
      />

iam getting this error.

[wcandillon]

Based on the error it looks like the error is the font object being null (not finished to be loaded). You also use a combination of font and size which is incorrect since size `is contained in font.

Unfortunately, we don't offer documentation yet for older version of Skia so these small details are hard to spot. We strongly encourage to upgrade to the latest version. About the toCmds() format being update, you can work around it, see this function for instance: https://github.com/Shopify/react-native-skia/blob/dbf8846da8b23646434d1b47e83e01a98d201892/example/src/Examples/Wallet/Math.ts#L149

I am closing this issue since there doesn't seem to be a bug here. If you think there is, please feel free to reopen.

[pandey21197]

@wcandillon just went again with the documentation, as u said the font was not loaded.

just added a null check before rendering the Text:

if (font === null) { return null; }

It Worked!!! Thanks dude

[wcandillon]

Happy Hacking!