Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gesture path not drawn correctly in RTL devices #7

Open
Kasun-thilina opened this issue Jan 2, 2021 · 0 comments
Open

Gesture path not drawn correctly in RTL devices #7

Kasun-thilina opened this issue Jan 2, 2021 · 0 comments

Comments

@Kasun-thilina
Copy link

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant