docs: document the hinge sensor type and add a foldable playground

[pawicao]

Note

This PR description is AI-generated.

Requires #10651.

Summary

#10651 adds SensorType.HINGE, and the useAnimatedSensor page did not mention it. I documented the new type: HINGE in the sensor list, the ValueHinge shape, the HingeStatus enum, the fact that it takes no config, a usage snippet that folds two panels with rotateY, and a platform table with the Samsung quantisation remark. The live demos on the page run on web, where no hinge exists, so I added a playground in the style of the other sensor playgrounds: a slider drives a CSS foldable mock and the code box shows the angle in radians and the derived status.

Test plan

yarn format:md reports no diff and the docs lint passes. The docs typecheck reports errors in the new example file because the docs package resolves react-native-reanimated from npm, which has no SensorType.HINGE yet; the same script also fails on pre-existing files.

Changelog

• I added a changelog fragment with yarn changelog:add for each changed package, or this PR does not change react-native-reanimated or react-native-worklets.

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

The change documents hinge sensor support with new types, statuses, output fields, and platform rules. It adds an interactive hinge playground with slider controls and a two-panel visualization. It also adds a React Native example that uses hinge angle data to rotate two panels around a shared edge.

Priority: ⬇️ Low

Change: Other

Merge Risk: 🔵 Low · up to 64867

The hinge playground’s angle field remains awkward to edit after clearing it, but the impact is limited to the documentation demo.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly summarizes the main changes: documenting the hinge sensor type and adding a foldable playground.
Description check	✅ Passed	The description directly explains the hinge sensor documentation, foldable playground, platform behavior, and test results.

---

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.}

[coderabbitai]

Actionable comments posted: 1

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Advanced

Run ID: 67ac028e-68ed-4d58-8f24-058fab341be2

📥 Commits

Reviewing files that changed from the base of the PR and between 1acbe5c and e08deb1.

📒 Files selected for processing (6)

• docs/docs-reanimated/docs/device/useAnimatedSensor.mdx
• docs/docs-reanimated/src/components/InteractivePlayground/index.tsx
• docs/docs-reanimated/src/components/InteractivePlayground/useAnimatedHingePlayground/Example.tsx
• docs/docs-reanimated/src/components/InteractivePlayground/useAnimatedHingePlayground/index.tsx
• docs/docs-reanimated/src/components/InteractivePlayground/useAnimatedHingePlayground/styles.module.css
• docs/docs-reanimated/src/examples/AnimatedHinge.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 6 remain after this review.

[coderabbitai]

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Reject non-finite angle input.

When a user clears the number input, Range emits NaN. This setter stores it. The playground then renders angle: NaN and rotateY(NaNdeg), so the code preview and foldable model are invalid. Normalize the value here, or make Range suppress non-finite values.

Proposed fix

-      onChange={setDegrees}
+      onChange={(value) => {
+        if (Number.isFinite(value)) {
+          setDegrees(value);
+        }
+      }}

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	onChange={setDegrees}
	onChange={(value) => {
	if (Number.isFinite(value)) {
	setDegrees(value);
	}
	}}

[coderabbitai]

Actionable comments posted: 1

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Advanced

Run ID: a7a2f87d-add8-4f5a-899f-5e1c039e61d8

📥 Commits

Reviewing files that changed from the base of the PR and between 9cd0222 and 648678e.

📒 Files selected for processing (1)

• docs/docs-reanimated/src/components/InteractivePlayground/index.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 7 remain after this review.

[coderabbitai]

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Preserve an editable empty state in Range.

When a user selects the current number and deletes it, parseFloat returns NaN. This branch skips onChange, so the controlled TextField retains the old value and prevents keyboard replacement. Keep a string draft for the text field, or commit the clamped numeric value on blur.