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

feat(EMI-2095): Add Swipeable component #263

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

Conversation

MrSltun
Copy link
Member

@MrSltun MrSltun commented Oct 1, 2024

This PR resolves EMI-2095

Description

This PR adds a Swipeable component Palette using react-native-gesture-handler swipeable

Demo

Android iOS
swipeable-android.mov
swipeable-ios.mov

@MrSltun MrSltun self-assigned this Oct 1, 2024
@artsy-peril artsy-peril bot added Jira Synced Indicates that Peril has connected this PR to Jira Version: Minor A deploy for new features labels Oct 1, 2024
@artsy-peril
Copy link

artsy-peril bot commented Oct 1, 2024

react-native-gesture-handler

Author: Krzysztof Magiera

Description: Experimental implementation of a new declarative API for gesture handling in react-native

Homepage: https://github.com/software-mansion/react-native-gesture-handler#readme

Createdalmost 8 years ago
Last Updated6 days ago
LicenseMIT
Maintainers3
Releases134
Direct Dependencies@egjs/hammerjs, hoist-non-react-statics, invariant and prop-types
README
React Native Gesture Handler by Software Mansion

Declarative API exposing platform native touch and gesture system to React Native.

React Native Gesture Handler provides native-driven gesture management APIs for building best possible touch-based experiences in React Native.

With this library gestures are no longer controlled by the JS responder system, but instead are recognized and tracked in the UI thread.
It makes touch interactions and gesture tracking not only smooth, but also dependable and deterministic.

Installation

Check getting started section of our docs for the detailed installation instructions.

Fabric

To learn how to use react-native-gesture-handler with Fabric architecture, head over to Fabric README. Instructions on how to run Fabric Example within this repo can be found in the FabricExample README.

Documentation

Check out our dedicated documentation page for info about this library, API reference and more: https://docs.swmansion.com/react-native-gesture-handler/docs/

Examples

If you want to play with the API but don't feel like trying it on a real app, you can run the example project. Clone the repo, go to the example folder and run:

yarn install

Run yarn start to start the metro bundler

Run yarn android or yarn ios (depending on which platform you want to run the example app on).

You will need to have an Android or iOS device or emulator connected.

React Native Support

version react-native version
2.18.0+ 0.73.0+
2.16.0+ 0.68.0+
2.14.0+ 0.67.0+
2.10.0+ 0.64.0+
2.0.0+ 0.63.0+
1.4.0+ 0.60.0+
1.1.0+ 0.57.2+
<1.1.0 0.50.0+

It may be possible to use newer versions of react-native-gesture-handler on React Native with version <= 0.59 by reverse Jetifying.
Read more on that here https://github.com/mikehardy/jetifier#to-reverse-jetify--convert-node_modules-dependencies-to-support-libraries

License

Gesture handler library is licensed under The MIT License.

Credits

This project has been build and is maintained thanks to the support from Shopify, Expo.io and Software Mansion

shopify
expo
swm

Community Discord

Join the Software Mansion Community Discord to chat about Gesture Handler or other Software Mansion libraries.

Gesture Handler is created by Software Mansion

Since 2012 Software Mansion is a software agency with experience in building web and mobile apps. We are Core React Native Contributors and experts in dealing with all kinds of React Native issues. We can help you build your next dream product – Hire us.

New dependencies added: react-native-gesture-handler.

Generated by 🚫 dangerJS against 30ac0c4

export interface SwipeableProps {
children: React.ReactNode
actionOnPress: () => void
actionCompoent: React.ReactNode
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

actionComponent

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if we should leave it so flexible to be any kind of element, that's why I recommend going through DS first

@araujobarret
Copy link
Contributor

araujobarret commented Oct 1, 2024

The code looks fine, and simple to use however I feel like this component should be somehow in DS first, that's the common blackhole of Eigen's UI elements, they exist in product mockups but never in DS, once you search for the source of truth no one can find it.
@MrSltun , could you please align with your team to add this element to the DS first? For example the action element we use might be something totally different than we support right now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Jira Synced Indicates that Peril has connected this PR to Jira Version: Minor A deploy for new features
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants