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

Get element by position (X and Y) in react-native #501

Open
rabbit545 opened this issue Aug 24, 2022 · 1 comment
Open

Get element by position (X and Y) in react-native #501

rabbit545 opened this issue Aug 24, 2022 · 1 comment

Comments

@rabbit545
Copy link

Introduction

On web, you can get any element by its position:

document.elementFromPoint(x, y)

Is there something similar in React Native? Can it be done with a native bridge (Java/Objective C)?

Details

I would like to get an element on screen by position X and Y (Ignoring empty places and following transformation or styling calculations like padding, margin, borderRadius) then set it a native prop or dispatch events.

OBS: I'm not referring to onLayout property or any other declared in the component's construction/render, my idea is from any X and Y position get an element that corresponds to these coordinates then get a reference to it.

Use case for example:

  • Create a virtual cursor that dispatch click events on correct components, following margin/padding and ignoring pointerEvents none.
  • Drag & Drop stuff.
  • Acessibility.

image

@gomes42
Copy link

gomes42 commented Aug 24, 2022

  1. Using onLayout for desired elements (or creating a generic component and using it everywhere in your application), storing values in arrays, updating when necessary, using your own algorithms to get the result you want from the data you already have.

  2. An alternative (thinking Android, but not exactly getting react native components by its x and y position) could be dispatching MotionEvents by native code and letting React Native handle it, with events from onPress, pointerMove (still in development) for example...

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

2 participants