[m-bert]

Description

Reworks the ReanimatedSwipeable docs example. RightAction is now a component instead of a function called with hooks inside, measures its own width and uses translation to stay attached to the right edge of the row, so it slides in together with the row instead of being uncovered in place. The console.log calls are gone and the row says which way to swipe.

Test plan

Ran the example in the expo app on iOS and Android, checked the docs page locally.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

An organization owner can choose the repository organization as the billing source for reviews requested by members with a paid Copilot license. Learn about Copilot code review billing. Review the Copilot code review billing settings.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Repository UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: f78eb15c-e5e9-4386-b5bb-8b34e858d26e

📥 Commits

Reviewing files that changed from the base of the PR and between 0c12342 and ca2b4fe.

📒 Files selected for processing: 1

• packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx

Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 6 remain after this review.

📝 Summary

Summary by CodeRabbit

• Documentation
  • Updated the swipeable row example to demonstrate right-side actions that adapt to their content width.
  • Improved the example’s action layout so controls remain aligned with the row edge during swipes.
  • Refreshed sample text, spacing, vertical alignment, and text color for clearer presentation.

The Reanimated swipeable example now measures the right action width and uses the translation shared value to position it at the row’s right edge. The render callback passes translation to the action, and the example updates its label and styling.

Changes: Swipeable action example

Layer / File(s)	Summary
Measure and position the right action packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx	The example adds a RightAction component that measures its width and uses translation to keep the action attached to the row edge. The render callback passes translation to the component. The sample label and action styling also change.

Suggested reviewers: satvikmishra08

Priority: ⬇️ Low

Merge Risk: ⚪ Minimal · up to ca2b4

The updated swipe example appears ready to merge after normal checks.

Pre-merge checks: 3

Check name	Status	Explanation
Title check		The title clearly and concisely describes the main documentation change: attaching the action to the row edge in the ReanimatedSwipeable example.
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Warning

Some tools did not complete. Review the errors below.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx

Parsing error: ESLint was configured to run on <tsconfigRootDir>/packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx using parserOptions.project: /tsconfig.json
The extension for the file (.mdx) is non-standard. You should add parserOptions.extraFileExtensions to your config.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}