[docs] Add version badges by m-bert · Pull Request #3978 · software-mansion/react-native-gesture-handler

m-bert · 2026-02-13T20:13:17Z

Description

This PR, similarly to #3975, adds badges for versions for the features.

Darkmode

Lightmode

Test plan

Read docs 🤓

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…or.mdx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

j-piasecki

I'm not sold on the styling. I don't think the version badge should be that attention-grabbing.

j-piasecki · 2026-02-17T07:44:21Z

packages/docs-gesture-handler/src/components/HeaderWithBadges/index.tsx

+        <PlatformBadge key={platform} platform={platform} />
      ))}
+
+      {version && <VersionBadge version={version} />}


IMO, the version badge should come before the platform ones.

We can also go the Android way and have it always to the right

We may also want to default to showing "3.0" if no version is provided to be consistent. So there's no ambiguity about which version something is available from.

I'm not sold on the styling. I don't think the version badge should be that attention-grabbing.

I agree. Android convention looks good, but do we want it as a plain text, or have it in a badge like platform, with with different color (like white badge with black text)?

Styles updated in 36b7fe0. I've also removed unused import from FlowChart (been there to steal useColorMode)

So if styling looks good, the question is where do we want to put them. Props like disableReanimated and so on? Or do we wait for something new.

So if styling looks good, the question is where do we want to put them. Props like disableReanimated and so on? Or do we wait for something new.

That's a good question - on one hand, I like the way Android does it, so everything is clearly labeled, but on the other, that's a lot of boxes. It could be ok if we reduce it only to the version instead of Available from ..., but it's not as clean then.

TL;DR: I don't know

j-piasecki · 2026-02-18T09:34:51Z

packages/docs-gesture-handler/src/components/HeaderWithBadges/index.tsx

+  },
+
+  badge: {
+    borderRadius: 10,


Suggested change

borderRadius: 10,

borderRadius: 16,

IMO it looks nicer.

j-piasecki · 2026-02-18T09:36:30Z

packages/docs-gesture-handler/src/components/HeaderWithBadges/index.tsx

+const styles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'row',


Suggested change

flexDirection: 'row',

flexDirection: 'row',

flexWrap: 'wrap',

I think it looks nicer this way on narrow screens.

vs

I agree. I also moved it to the left on smaller screens:

j-piasecki

I forgot about it yesterday, but when I was checking it, I was experimenting with reducing the font size for the version badge (I think 12px). I'm fine with both, so I'll leave it up to you.
Can you please merge this after the platform badges?

m-bert · 2026-02-19T12:31:55Z

Can you please merge this after the platform badges?

Sure, that's my plan

I forgot about it yesterday, but when I was checking it, I was experimenting with reducing the font size for the version badge (I think 12px). I'm fine with both, so I'll leave it up to you.

12px looks way too small (at least when looking from distance):

But I guess your point is to reduce it. To be honest, I'd leave that as it is now.

Copilot

Pull request overview

This PR updates the docs UI to support showing multiple “platform” badges alongside an (optional) “available from version” badge, and migrates existing docs pages to use the new header component.

Changes:

Remove an unused React hook import in the flowchart example.
Add a new HeaderWithBadges component + CSS module styling (platform badges + optional version badge).
Update multiple MDX docs pages to use HeaderWithBadges instead of HeaderWithBadge.

Reviewed changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/docs-gesture-handler/src/examples/CallbacksFlowCharts/FlowChart.jsx	Removes unused `useLayoutEffect` import.
packages/docs-gesture-handler/src/components/HeaderWithBadges/index.tsx	Introduces new header component rendering platform badges and an optional version badge.
packages/docs-gesture-handler/src/components/HeaderWithBadges/styles.module.css	Adds styling for platform badges and theme-aware version badge.
packages/docs-gesture-handler/docs/gestures/use-tap-gesture.mdx	Migrates to `HeaderWithBadges`.
packages/docs-gesture-handler/docs/gestures/use-pan-gesture.mdx	Migrates to `HeaderWithBadges`.
packages/docs-gesture-handler/docs/gestures/use-native-gesture.mdx	Migrates to `HeaderWithBadges`.
packages/docs-gesture-handler/docs/gestures/use-long-press-gesture.mdx	Migrates to `HeaderWithBadges`.
packages/docs-gesture-handler/docs/gestures/use-hover-gesture.mdx	Migrates to `HeaderWithBadges`.
packages/docs-gesture-handler/docs/gestures/use-fling-gesture.mdx	Migrates to `HeaderWithBadges`.
packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.mdx	Migrates to `HeaderWithBadges`.
packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx	Migrates to `HeaderWithBadges`.
packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx	Migrates to `HeaderWithBadges`.
packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx	Migrates to `HeaderWithBadges`.
packages/docs-gesture-handler/docs/components/pressable.mdx	Migrates to `HeaderWithBadges`.
packages/docs-gesture-handler/docs/components/buttons.mdx	Migrates to `HeaderWithBadges`.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/docs-gesture-handler/src/components/HeaderWithBadges/index.tsx

Copilot · 2026-02-23T14:09:21Z

packages/docs-gesture-handler/src/components/HeaderWithBadges/index.tsx

+      {platforms
+        ?.map((platform) => platform.toLowerCase() as Platform)
+        .sort()


platforms is a required prop in HeaderWithBadgesProps, but the render uses optional chaining (platforms?.map(...)). This makes the type contract misleading and can hide mistakes at call sites. Either remove the optional chaining (and keep platforms required) or make the prop optional and define an explicit empty-state behavior.

packages/docs-gesture-handler/src/components/HeaderWithBadges/index.tsx

m-bert and others added 30 commits February 4, 2026 14:12

Fix edit link

a14db83

introduction

9e1f534

installation

54889bb

Gesture detector

3e82cf8

Reanimated interactions

e005621

Animated interactions

90b1aa4

Composition

a5b73b3

Merge branch 'main' into @mbert/docs-review

6c4aa0f

State manager

b2f97c5

Callbacks

8cb20ab

Quickstart

8f442f1

Troubleshooting

12abfeb

Testing

1094f92

Fix callbacks flow chart

d91e097

Pan

c503ea1

Tap

31a8db3

LongPress

b3efbbe

Rotation

d201b3e

Pinch

62d0fe8

Fling

64aa192

Hover

4667c7d

Native

5f40baf

Manual

800b37d

Touch events

004f919

Pinch typo

e8ddacc

HOOOOOOOOOOOOOOOOOOOOW?

128b226

Update packages/docs-gesture-handler/docs/guides/testing.md

cc1e783

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update packages/docs-gesture-handler/docs/fundamentals/gesture-detect…

d48e4ea

…or.mdx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Overrides

9f1ec51

Fix broken link

9b4aff8

Change badge color

7b8157c

m-bert requested review from akwasniewski and j-piasecki February 13, 2026 20:14

Copilot review

b6eead3

m-bert added the Documentation Documentation change/enhancement label Feb 16, 2026

j-piasecki reviewed Feb 17, 2026

View reviewed changes

m-bert added 4 commits February 17, 2026 12:34

Merge branch 'main' into @mbert/docs-badges

8ba5b1c

Add badges to buttons

d52b0f9

Merge branch '@mbert/docs-badges' into @mbert/docs-badges-versions

d97a7fe

Badge styling

36b7fe0

m-bert marked this pull request as ready for review February 17, 2026 14:20

m-bert added 3 commits February 17, 2026 15:41

Hover android

79b7f52

Sort badges

b45919e

Merge branch '@mbert/docs-badges' into @mbert/docs-badges-versions

12d909c

j-piasecki reviewed Feb 18, 2026

View reviewed changes

Wrap

fbdd4d6

j-piasecki approved these changes Feb 19, 2026

View reviewed changes

m-bert added 5 commits February 19, 2026 12:59

Change android color

b6efac4

two finger trackpad web

e15ee60

Make badges case insensitive

0cd3c28

Merge branch 'main' into @mbert/docs-badges

549b6a7

Merge branch '@mbert/docs-badges' into @mbert/docs-badges-versions

f5b4656

Base automatically changed from @mbert/docs-badges to main February 19, 2026 12:46

Merge branch 'main' into @mbert/docs-badges-versions

f8da44e

Copilot AI review requested due to automatic review settings February 23, 2026 14:04

Copilot started reviewing on behalf of m-bert February 23, 2026 14:04 View session

Copilot AI reviewed Feb 23, 2026

View reviewed changes

m-bert merged commit 554e668 into main Feb 23, 2026
6 checks passed

m-bert deleted the @mbert/docs-badges-versions branch February 23, 2026 14:15

Uh oh!

Conversation

m-bert commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Darkmode

Lightmode

Test plan

Uh oh!

j-piasecki left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

j-piasecki left a comment

Choose a reason for hiding this comment

Uh oh!

m-bert commented Feb 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

m-bert commented Feb 13, 2026 •

edited

Loading

m-bert commented Feb 19, 2026 •

edited

Loading