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

add dragHandleRef: To allow for a ref to be passed in to be used as the Drag Handle #90

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

tabishmahfuz1
Copy link

Allows for a dragHandleRef to be passed in to be used as the drag handle

@tabishmahfuz1
Copy link
Author

Only works on Web

@3DJakob
Copy link
Owner

3DJakob commented Mar 9, 2022

Hi @tabishmahfuz1

Thank you for contributing to this repository. I have some thoughts on your inputs though.

  1. Make sure your contribution passes the rules defined in https://github.com/3DJakob/react-tinder-card/blob/master/CONTRIBUTING.md. You need to implement this to the native side as well.
  2. From what I can tell this is an unnecessary addition. You can just add useRef to the TinderCard or any element inside to achieve the same effect or am I missing something? If I am please explain.

@tabishmahfuz1
Copy link
Author

Hey @3DJakob , on the 2nd point, The userRef on TinderCard would give us only the ref to the card itself to call the API methods, right?

What I needed here was to only allow the card to be dragged by a specific ref inside the card. So basically I didn't want to whole card to listen to mouseDown or mouseDrag but just one part of the card, e.g. the header of the card in my case.

Does that make it clear? Let me know if you want me to explain further. Happy to do it if I couldn't explain it clearly :)

@3DJakob
Copy link
Owner

3DJakob commented Mar 9, 2022

Ok! Thank you for that explanation that makes sense! I guess this could be good when using ScrollViews inside a card. What do you think about updating the documentation to something like this?

### `dragHandleRef`

 - optional
 - type: `React.Ref<API>`

React Ref to a component that should be acting as a handle for swiping the card instead of using the whole card.

@3DJakob
Copy link
Owner

3DJakob commented Mar 9, 2022

Also if you want an easy way of testing this on mobile as well I suggest you simply clone the https://github.com/3DJakob/react-native-tinder-card-demo repo.

@tabishmahfuz1
Copy link
Author

Will update the doc. Your version surely makes more sense.

And also thanks for the example repo :) Will try to get this done too

@LinusU
Copy link
Collaborator

LinusU commented Mar 11, 2022

The documentation is automatically generated from index.d.ts, add the property there and then run npx ts-readme-generator, that will update readme.md automatically 🚀

@tabishmahfuz1
Copy link
Author

@LinusU Thanks man. Will do.

@3DJakob The swipe gestures are not responding in the android app. The buttons are working though. So, I can't test this until that's fixed. This is the same issue here, I guess #77

Just FYI, I had to update the expo-sdk to even get it running.

@tabishmahfuz1
Copy link
Author

tabishmahfuz1 commented Mar 11, 2022

Saw this here: https://stackoverflow.com/questions/58314694/pan-responder-simply-not-working-on-android

This seems to fix the drag issue if we do set the AnimatedView style property flex: 1 but then just messes up the whole card layout.

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

Successfully merging this pull request may close these issues.

3 participants