Height and width constant of a canvas

[Angelk90]

Description

@wcandillon :

When I have a canvas with for example no defined width and height, but only flex: 1.
But I need to know the width and height of the canvas or half of their measurements, it would be useful to have access to one of their constants.
It would be possible?

Example:

Vertical line

      <Canvas style={{ flex: 1 }}>
        <Line
          p1={vec(WIDTH, 0)}
          p2={vec(WIDTH, HEIGHT)}
          color="grey"
          style="stroke"
          strokeWidth={10}
        />
      </Canvas>

Horizontal line

      <Canvas style={{ flex: 1 }}>
        <Line
          p1={vec(0, HEIGHT/2)}
          p2={vec(WIDTH, HEIGHT_HALF)}
          color="grey"
          style="stroke"
          strokeWidth={10}
        />
      </Canvas>

[wcandillon]

I think what you need here is this: https://shopify.github.io/react-native-skia/docs/canvas/overview#getting-the-canvas-size

[Angelk90]

@wcandillon : In the end I did it this way it seems to work but it would have been useful and interesting to have a variable inside the component that could be accessed instead of having to declare and use useEffect to initialize the variables.

There can be multiple canvases and in this case multiple variables would need to be initialized.

import 'react-native-reanimated';
import Constants from 'expo-constants';
import { useState, useEffect } from 'react';
import { View, StyleSheet } from 'react-native';
import { Canvas, Path, Skia, useCanvasRef } from '@shopify/react-native-skia';

export default function App() {
  const [state, setState] = useState({
    width: 0,
    height: 0,
  });
  const { width, height } = state;

  const ref = useCanvasRef();
  useEffect(() => {
    setTimeout(() => {
      const { width, height } = ref.current;
      setState({ width, height });
    }, 1000);
  });

  const dottedLinePathO = Skia.Path.Make()
    .moveTo(0, height / 2)
    .lineTo(width, height / 2);
  dottedLinePathO.dash(10, 2, 0);

  const dottedLinePathV = Skia.Path.Make()
    .moveTo(width / 2, 0)
    .lineTo(width / 2, height);
  dottedLinePathV.dash(10, 2, 0);
  return (
    <View style={styles.container}>
      <Canvas style={{ flex: 1 }} ref={ref}>
        <Path
          path={dottedLinePathO}
          color="#e1e1e1"
          style="stroke"
          strokeJoin="round"
          strokeWidth={2}
        />
        <Path
          path={dottedLinePathV}
          color="#e1e1e1"
          style="stroke"
          strokeJoin="round"
          strokeWidth={2}
        />
      </Canvas>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ffffff',
  },
});

[wcandillon]

yes this is something we are considering for the future but there are some updates to our architecture we need to execute first before tackling these kind of issues.