How to make Glyphs and Shader work better together?

[verger-guo]

I am developing a novel reader, but React Native does not provide built-in text pagination. After watching a video (https://www.youtube.com/watch?v=PzKWpwmmRqM), I thought about using Skia for custom text rendering and smooth pagination. Here are my questions:

1. Is it possible to achieve better integration between Glyphs and Shaders without using useTexture?
2. When I enter the component, useFont is too slow. I need the getTextWidth method from the font to calculate the text layout for the page. Is there a way to pre-load useFont and cache the results?

const { width, height } = Dimensions.get('window');
const dp = PixelRatio.get();
// Basic page transition effect with gesture control
export const MinimalExample = () => {
  // Load font for text rendering
  const font = useFont(require('path/to/your/font.ttf'), 16);

  // Animation progress values
  const progress = useSharedValue(0);

  // Basic pan gesture
  const pan = Gesture.Pan()
    .onChange((event) => {
      progress.value = Math.max(0, Math.min(event.translationX / width, 1));
    })
    .onEnd(() => {
      // Snap to nearest edge
      progress.value = withTiming(progress.value > 0.5 ? 1 : 0);
    });

  // Create page textures
  const currentPage = useTexture(
    <Group transform={[{ scale: dp }]}>
      <Fill />
      <Glyphs
        font={font}
        glyphs={
          [
            /* your text layout data */
          ]
        }
      />
    </Group>,
    { width: width * dp, height: height * dp },
  );

  const nextPage = useTexture(
    <Group transform={[{ scale: dp }]}>
      <Fill />
      <Glyphs
        font={font}
        glyphs={
          [
            /* next page layout data */
          ]
        }
      />
    </Group>,
    { width: width * dp, height: height * dp },
  );

  if (!font) return null;

  return (
    <GestureDetector gesture={pan}>
      <Canvas style={{ width, height }}>
        <Fill>
          <Shader
            source={/* transition shader */}
            uniforms={{
              progress: progress.value,
              resolution: [width, height],
            }}
          >
            <ImageShader image={currentPage} width={width} height={height} />
            <ImageShader image={nextPage} width={width} height={height} />
          </Shader>
        </Fill>
      </Canvas>
    </GestureDetector>
  );
};