How to make further calculations with computed values?

[kbrandwijk]

I've been playing around with useComputedValue. If I use the output directly on a property in the Canvas, it works great, but if I perform any math on it, everything stops with the error: 'No default value'. For example:

// This value is manipulated with a `useSharedValueEffect` when user pinches to zoom from .75 to 2
const gridScale = useValue(1);

const lineHeight = useComputedValue(
    () => gridScale.current * LINE_HEIGHT,
    [gridScale]
);

// ...

return (
  // ...
  <Canvas>
     <Text x={10} y={lineHeight * 4} text={'...'}/>
  </Canvas>
)

This throws the 'No default value' error. When I change it to y={lineHeight.current * 4}, it renders fine, but it doesn't change when lineHeight changes. Since all of this is going to be dynamic (I'm rendering a list of items and the user can pinch to zoom), I can't create a separate useComputedValue hook for each text element.

[wcandillon]

it should be the following:

// This value is manipulated with a `useSharedValueEffect` when user pinches to zoom from .75 to 2
const gridScale = useValue(1);

const lineHeight = useComputedValue(
    () => gridScale.current * LINE_HEIGHT * 4,
    [gridScale]
);

// ...

return (
  // ...
  <Canvas>
     <Text x={10} y={lineHeight} text={'...'}/>
  </Canvas>
)

[wcandillon]

or

// This value is manipulated with a useSharedValueEffect when user pinches to zoom from .75 to 2
const gridScale = useValue(1);

const lineHeight = useComputedValue(
() => gridScale.current * LINE_HEIGHT,
[gridScale]
);

const y = useComputedValue(() => lineHeight.current * 4, [lineHeight]);

// ...

return (
// ...

<Text x={10} y={lineHeight} text={'...'}/>

)

[kbrandwijk]

Right, that's the 'hardcoded' solution I mentioned. But if I have multiple text elements, and I want to use lineHeight * 4 on the first one, lineHeight * 6 on the second one, etc. (dynamically) that wouldn't scale well. Is there any way to pass that '4' or '6' to a single function?