Is it possible to call onTouchHandler in a child component

[ronickg]

I have a working brush component which I created which uses the ontouchhandler to handle what it should do. But I would like to create a generic brush component which can be added under any canvas and inherit the touch handler and handle it inside the brush component ? I still want the parent component to also be able to handle the onTouch events aswell though.

https://gyazo.com/cec56ef6c0aaf366be1b3d30797a9a13

  return (
    <View style={{ flexDirection: 'column' }}>
      <View style={{ width, height, backgroundColor: '#000' }}>
        <Canvas ref={ref} style={{ flex: 1 }} onTouch={brushTouchHandler}>
          <Group transform={[{ translateY: margin.top }, { translateX: margin.left }]}>
            {data.map((d, index) => {
              return (
                <GanttBar
                  key={index}
                  data={d}
                  timeScale={timeScale}
                  yScale={yScale}
                  xAccessor={xAccessor}
                />
              );
            })}
          </Group>
          <Group
            transform={[
              { translateY: topChartHeight + topChartBottomMargin + margin.top },
              { translateX: brushMargin.left },
            ]}>
            {data.map((d, index) => {
              return (
                <GanttBar
                  key={index}
                  data={d}
                  timeScale={brushTimeScale}
                  yScale={brushYScale}
                  xAccessor={xAccessor}
                />
              );
            })}
            <Brush canvasRef={ref} />
            <Path path={resizePath} color="lightblue" opacity={0.2}>
              <Paint color={'lightblue'} strokeWidth={0} style="stroke" />
            </Path>
            <Path path={movePath} color="lightblue" opacity={0.2}>
              <Line2DPathEffect
                width={1}
                matrix={processTransform2d([{ scaleX: 8, scaleY: 8 }, { rotate: 30 }])}
              />
              <Paint color={'lightblue'} strokeWidth={0} style="stroke" />
            </Path>
          </Group>
        </Canvas>
      </View>
    </View>
  );
};

[chrfalch]

The "problem" with touch handling in Skia is that there are no React components inside a Skia Canvas - only a declaration of the drawing you want Skia to perform.

This means that there is no way for React, Skia or any of us to automatically know the position and size of a "component" you write inside of the Canvas - what if you added a complex path that are drawn in Skia? There would be no way to quickly detect if a touch was on this Path or outside of it.

Our suggestion is that you create a way to detect if your brush component is touched when the Canvas' onTouch handler is called.

This is unfortunately not the solution you're after, and this has been brought up before in our issues list - just remember that there are no components inside the Skia Canvas - only drawing operations that ends up in a single Skia rendering - so no easy way to detect touches and map then to components inside the Canvas - we've tried! :) :)

[ronickg]

Yes was able to use the onTouch handler to get it to work. Thank you