Sync Retrieval of PanGesture Values on JS thread

[anas-dev-97]

Question

How can I retrieve values recorded during the onTouchMove method of PanGesture on the JavaScript thread synchronously with the UI thread in Victory Native XL?

Background Info/Attempts

I'm currently encountering an issue where I need to access values recorded during the onTouchMove method of PanGesture synchronously with the UI thread in Victory Native XL. Current behavior of my app does not align with the expected behavior as visualized in the documentation.

Current behavior

https://github.com/FormidableLabs/victory-native-xl/assets/168443517/16eb2537-501a-491c-a9a9-b5413243884f

Code

children

{({ points, chartBounds }) => {
              const selectedPointEquity = points.equity.find(
                ({ x, y }) => x === state.x.position.value && y === state.y.equity.position.value,
              );
              return (
                <>
                  <Area
                    points={points.netInvested}
                    color={Colors.azureSkyBlue}
                    opacity={0.2}
                    y0={chartBounds.bottom}
                    curveType="linear"
                  />
                  <Area
                    points={points.equity}
                    color={Colors.azureSkyBlue}
                    opacity={0.2}
                    y0={chartBounds.bottom}
                    curveType="linear"
                  />
                  <Line points={points.netInvested} color={Colors.midnightBlue} strokeWidth={2} />
                  <Line points={points.equity} color={Colors.azureSkyBlue} strokeWidth={2} />

                  {isNotEmptyAndNil(selectedPointEquity) && (
                    <>
                      <Circle
                        cx={state.x.position}
                        cy={state.y.netInvested.position}
                        r={5}
                        color={Colors.midnightBlue}
                      />
                      <Circle cx={state.x.position} cy={state.y.equity.position} r={5} color={Colors.azureSkyBlue} />
                      <Oval
                        x={state.x.position}
                        y={chartBounds.top}
                        width={1}
                        height={400}
                        color={Colors.disabledSilver}
                      />
                    </>
                  )}
                </>
              );
            }}

Render outside

renderOutside={({ points, chartBounds, canvasSize }) => {
              console.log("Console::: ~ ");
              const selectedPointNetInvested = points.netInvested.find(
                ({ x, y }) => x === state.x.position.value && y === state.y.netInvested.position.value,
              );
              const selectedPointEquity = points.equity.find(
                ({ x, y }) => x === state.x.position.value && y === state.y.equity.position.value,
              );
              const selectedPointReturn = points.netReturns.find(
                ({ x, y }) => x === state.x.position.value && y === state.y.netReturns.position.value,
              );
              const showData = !isActive && isNotEmptyAndNil(selectedPointEquity);
              return (
                <>
                  {isNotEmptyAndNil(data?.dateRangeEnd) && isNotEmptyAndNil(data?.dateRangeStart) && (
                    <>
                      <Text
                        x={chartBounds.left}
                        y={chartBounds.bottom + 15}
                        text={format(new Date(data.dateRangeStart), "MMM d, yyyy")}
                        font={labelsFont}
                        color={Colors.lightIndigo}
                      />
                      <Text
                        x={canvasSize.width - format(new Date(data.dateRangeEnd), "MMM d, yyyy").length * 7}
                        y={chartBounds.bottom + 15}
                        text={format(new Date(data.dateRangeEnd), "MMM d, yyyy")}
                        font={labelsFont}
                        color={Colors.lightIndigo}
                      />
                    </>
                  )}
                </>
              );
            }}

[zibs]

Hey @anas-dev-97 - have you taken a look at the Stock Price example that's found in the repo's example app? As I think it's accomplishing what you're looking for. You should be able to access the values of your useChartPressState(s) so that you can display the information you're looking for.