[docs] Buttons #3968
[docs] Buttons #3968
Conversation
There was a problem hiding this comment.
Pull request overview
Updates Gesture Handler 3 migration and documentation content around button components, including a rewrite of the Buttons docs page and additional notes in the GH3 upgrade guide.
Changes:
- Reworked
buttons.mdxcontent/structure (addedRawButton, reorganized props, moved accessibility section). - Updated “Upgrading to 3” guide and migration skill docs with notes about legacy buttons /
PureNativeButton. - Minor formatting adjustments (spacing) in the GH3 migration skill doc.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 6 comments.
| File | Description |
|---|---|
| skills/gesture-handler-3-migration/SKILL.md | Adds migration guidance around buttons and mentions PureNativeButton. |
| packages/docs-gesture-handler/docs/guides/upgrading-to-3.mdx | Updates upgrade guidance and legacy buttons mapping table. |
| packages/docs-gesture-handler/docs/components/buttons.mdx | Major rewrite/restructure of the Buttons documentation page. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| The implementation of buttons has been updated, resolving most button-related issues. They have also been internally rewritten to utilize the new hook API. The legacy JS implementations of button components are still accessible but have been renamed with the prefix `Legacy`, e.g., `RectButton` is now available as `LegacyRectButton`. Those still use the new native component under the hood. | ||
|
|
||
| `PureNativeButton` has been removed. If encountered, inform the user that it has been removed and let them decide how to handle that case. They can achieve similar funcionality with other buttons. |
There was a problem hiding this comment.
We probably want to suggest possible solutions it can propose to the user
There was a problem hiding this comment.
I think it depends on their use case. Using PureNativeButton should be rare case anyway and I'm not sure if simply saying "change it to RawButton" will work, as it has Native gesture pre-applied. So I'm not sure if there's a panacea for that specific case. cc @j-piasecki
There was a problem hiding this comment.
I'm not sure there is a clear migration path here - I think the only use case for PureNativeButton was to pass it into createAnimatedComponent and wrap with a native gesture later. createAnimatedComponent now won't work with the new implementation due to the "sandwich" structure of the new button, so this use case is gone.
You'd most likely need to wrap the button with a view and animate that, while having the button styled in a way to adapt to the view changes. We could add that to the skill, with some note that the agent should ask or at least inform the user that it needs double checking.
| </GifGallery> | ||
|
|
||
| Gesture handler library provides native components that can act as buttons. These can be treated as a replacement to `TouchableHighlight` or `TouchableOpacity` from RN core. Gesture handler's buttons recognize touches in native which makes the recognition process deterministic, allows for rendering ripples on Android in highly performant way (`TouchableNativeFeedback` requires that touch event does a roundtrip to JS before we can update ripple effect, which makes ripples lag a bit on older phones), and provides native and platform default interaction for buttons that are placed in a scrollable container (in which case the interaction is slightly delayed to prevent button from highlighting when you fling). | ||
| The Gesture Handler library offers native components that function as buttons, serving as alternatives to `TouchableHighlight` or `TouchableOpacity` from the core React Native framework. These buttons process touch recognition natively, which ensures a deterministic response. This capability significantly enhances performance; for example, it allows for immediate ripple effects on Android, unlike `TouchableNativeFeedback`, which requires a touch event roundtrip to JavaScript that can cause delays, especially noticeable on older devices. Additionally, these components handle default platform interactions natively, particularly in scrollable containers where interactions are smartly delayed to prevent unintended highlighting during a fling. |
There was a problem hiding this comment.
Do we mention pressable anywhere? If not, then this may be the right place to do so.
There was a problem hiding this comment.
It has it's own docs page 😅
There was a problem hiding this comment.
Yes, but I think it still deserves to be mentioned in this introduction, after all it also functions as a button.
There was a problem hiding this comment.
Hmm, maybe it's worth mentioning that there is a Pressable component built on top of the buttons that already has a lot of abstraction. But also, the Pressable section is literally below the Buttons section in the docs, so I don't have a strong preference.
## Description This PR removes `PureNativeButton` from public API. > [!NOTE] > Docs for this are already present in #3968 ## Test plan Check that it is not possible to import it from package.
3 participants
Description
This PR updates Buttons entry in docs.
Test plan
Read docs 🤓