Skip to content

Gesture path not drawn correctly in RTL devices #7

Description

@Kasun-thilina

Great library!
I faced this issue when drawing on RTL enabled devices. GestureRecorder's gesture path is coming correctly onPanRelease callback. But in GesturePath when I try to draw the live path it doesn't get drawn correctly. The drawn paths are exactly the opposite path which I draw. Any solution would be highly appreciated. I have attached my code below,

<View style={{ position: "absolute", width: WIDTH, height: VIEW_HEIGHT - HEIGHT * 0.108, zIndex: 3 }}>
        <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="red"
                    slopRadius={4}
                    center={false}
                  />
                </View>
              </View>
            );
          }}
        </GestureRecorder>
      </View>

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions