gesture - React Native drawing on RTL devices is incorrect/mirrored

Question

I am facing a problem with drawing on RTL devices. gestureRecorder's gesture path is coming correctly onPanRelease callback, its displayed correctly when I finished drawing. But in GesturePath when I try to draw the live path it doesn't get drawn correctly its the exact mirror on the screen, if I draw left side with clock circular, it will be right screen side with anti clock way, but when i finish drawing its drawed in the right place..

 <View style={{ position: "absolute", width: WIDTH, height: VIEW_HEIGHT - HEIGHT * 0.5, zIndex: 4 }}>
        <GestureRecorder
          onPanRelease={(gesture) => {
              const point = {
                id: allPoints2.length + 1,
                points: gesture,
              };
              setAllPoints2((allPoints2) => [...allPoints2, point]);
            }
          }
        >
          {({ gesture, offset }) => {
            if (!_.isEqual(offset, recorderOffset) && offset !== null) {
              setRecorderOffset(offset);
              // setPoints(offset);
              if (offset) {
                const point = {
                  x: offset.x,
                  y: offset.y,
                };
                setAllPoints((allPoints) => [...allPoints, point]);
                // console.log("offset", allPoints);
              }
            }

            return (
              <View
                style={{
                  position: "relative",
                  width: "100%",
                  height: "100%",
                }}
              >
                <View style={{ position: "relative", width: "100%", height: "100%" }}>
                  <GesturePath
                    path={gesture.map((coordinate) => {
                      if (recorderOffset) {
                        return {
                          x: coordinate.x + recorderOffset.x,
                          y: coordinate.y + recorderOffset.y,
                        };
                      }
                      console.log("coordinate: ",coordinate)
                      return coordinate;
                    })}
                    color="green"
                    slopRadius={5}
                    center={false}
                  />
                </View>
              </View>
            );
          }}
        </GestureRecorder>
      </View>

Answer 1

等待大神答复