Skip to content

docs: bump t-rex-ui #4019

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.

Sign up for GitHub

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

Open
patrycjakalinska wants to merge 6 commits into
base: main
Choose a base branch
from
Open

docs: bump t-rex-ui #4019

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
37c2d97
bump t-rex-ui
patrycjakalinska Mar 10, 2026
0905987
update with latest t-rex-ui
patrycjakalinska Mar 11, 2026
92bcd0c
broken links
patrycjakalinska Mar 11, 2026
7f382ee
set badge colors
patrycjakalinska Mar 11, 2026
8563529
remove old code after updating t=rex=ui
patrycjakalinska Mar 17, 2026
0627280
fixes
patrycjakalinska Mar 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 14 additions & 16 deletions packages/docs-gesture-handler/docs/components/buttons.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@ sidebar_label: Buttons
import useBaseUrl from '@docusaurus/useBaseUrl';
import GifGallery from '@site/components/GifGallery';

import HeaderWithBadges from '@site/src/components/HeaderWithBadges';

<GifGallery>
<img src={useBaseUrl('gifs/samplebutton.gif')} width="280" />
</GifGallery>
Expand Down Expand Up @@ -39,19 +37,19 @@ exclusive?: boolean;

Defines if more than one button could be pressed simultaneously. By default set to `true`.

<HeaderWithBadges platforms={['android']}>
<Badges platforms={['android']}>
### rippleColor
</HeaderWithBadges>
</Badges>

```ts
rippleColor?: number | ColorValue | null;
```

Defines [color](https://reactnative.dev/docs/colors) of native [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation.

<HeaderWithBadges platforms={['android']}>
<Badges platforms={['android']}>
### rippleRadius
</HeaderWithBadges>
</Badges>


```ts
Expand All @@ -60,29 +58,29 @@ rippleRadius?: number | null;

Defines radius of native [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation.

<HeaderWithBadges platforms={['android']}>
<Badges platforms={['android']}>
### borderless
</HeaderWithBadges>
</Badges>

```ts
borderless?: boolean;
```

If set to `false`, [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation will render only within view bounds.

<HeaderWithBadges platforms={['android']}>
<Badges platforms={['android']}>
### foreground
</HeaderWithBadges>
</Badges>

```ts
foreground?: boolean;
```

Defines whether the [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation should be drawn on the foreground of the view.

<HeaderWithBadges platforms={['android']}>
<Badges platforms={['android']}>
### touchSoundDisabled
</HeaderWithBadges>
</Badges>

```ts
touchSoundDisabled?: boolean;
Expand Down Expand Up @@ -140,9 +138,9 @@ underlayColor?: string;

Background color that will be dimmed when button is in active state.

<HeaderWithBadges platforms={['iOS']}>
<Badges platforms={['ios']}>
### activeOpacity
</HeaderWithBadges>
</Badges>

```ts
activeOpacity?: number;
Expand All @@ -154,9 +152,9 @@ Opacity applied to the underlay when button is in active state.

This type of button component should be used with simple icon-only or text-only buttons. The interaction will be different depending on platform: on Android a borderless ripple will be rendered (it means that the ripple will animate into a circle that can span outside of the view bounds), whereas on iOS the button will be dimmed (similar to how `TouchableOpacity` works). In addition to the props of [`BaseButton`](#basebutton), it accepts the following:

<HeaderWithBadges platforms={['iOS']}>
<Badges platforms={['ios']}>
### activeOpacity
</HeaderWithBadges>
</Badges>

```ts
activeOpacity?: number;
Expand Down
34 changes: 16 additions & 18 deletions packages/docs-gesture-handler/docs/components/pressable.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@ sidebar_label: Pressable
import useBaseUrl from '@docusaurus/useBaseUrl';
import GifGallery from '@site/components/GifGallery';

import HeaderWithBadges from '@site/src/components/HeaderWithBadges';

:::info
This component is a drop-in replacement for the `Pressable` component.
:::
Expand Down Expand Up @@ -89,39 +87,39 @@ cancelable?: null | boolean;

Whether a press gesture can be interrupted by a parent gesture such as a scroll event. Defaults to `true`.

<HeaderWithBadges platforms={['android', 'web']}>
<Badges platforms={['android', 'web']}>
### onHoverIn
</HeaderWithBadges>
</Badges>

```ts
onHoverIn?: null | ((event: PressableEvent) => void);
```

Called when pointer is hovering over the element.

<HeaderWithBadges platforms={['android', 'web']}>
<Badges platforms={['android', 'web']}>
### onHoverOut
</HeaderWithBadges>
</Badges>

```ts
onHoverOut?: null | ((event: PressableEvent) => void);
```

Called when pointer stops hovering over the element.

<HeaderWithBadges platforms={['web']}>
<Badges platforms={['web']}>
### delayHoverIn
</HeaderWithBadges>
</Badges>

```ts
delayHoverIn?: number | null;
```

Duration to wait after hover in before calling `onHoverIn`.

<HeaderWithBadges platforms={['web']}>
<Badges platforms={['web']}>
### delayHoverOut
</HeaderWithBadges>
</Badges>

```ts
delayHoverOut?: number | null;
Expand All @@ -145,9 +143,9 @@ disabled?: null | boolean;

Whether the `Pressable` behavior is disabled.

<HeaderWithBadges platforms={['android', 'iOS']}>
<Badges platforms={['android', 'ios']}>
### hitSlop
</HeaderWithBadges>
</Badges>

```ts
hitSlop?: null | Insets | number;
Expand All @@ -157,9 +155,9 @@ Additional distance outside of the view in which a press is detected and [`onPre

The `Insets` type is essentially the same as [`Rect`](https://reactnative.dev/docs/rect).

<HeaderWithBadges platforms={['android', 'iOS']}>
<Badges platforms={['android', 'ios']}>
### pressRetentionOffset
</HeaderWithBadges>
</Badges>

```ts
pressRetentionOffset?: null | Insets | number;
Expand All @@ -170,19 +168,19 @@ press before [`onPressOut`](#onpressout) is triggered.

The `Insets` type is essentially the same as [`Rect`](https://reactnative.dev/docs/rect).

<HeaderWithBadges platforms={['android']}>
<Badges platforms={['android']}>
### android_disableSound
</HeaderWithBadges>
</Badges>

```ts
android_disableSound?: null | boolean;
```

If `true`, doesn't play system sound on touch.

<HeaderWithBadges platforms={['android']}>
<Badges platforms={['android']}>
### android_ripple
</HeaderWithBadges>
</Badges>

```ts
android_ripple?: null | PressableAndroidRippleConfig;
Expand Down
18 changes: 8 additions & 10 deletions packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ sidebar_label: Reanimated Drawer Layout

import useBaseUrl from '@docusaurus/useBaseUrl';

import HeaderWithBadges from '@site/src/components/HeaderWithBadges';

import MouseButtonProp from '../gestures/\_shared/mouse-button.mdx';

:::info
Expand Down Expand Up @@ -221,9 +219,9 @@ export enum DrawerState {

A function is called when the status of the drawer changes, taking `newState` to represent the drawer's interaction state and `drawerWillShow`, which is `true` when the drawer starts animating towards the open position and `false` otherwise.

<HeaderWithBadges platforms={['iOS']}>
<Badges platforms={['ios']}>
### enableTrackpadTwoFingerGesture
</HeaderWithBadges>
</Badges>

```ts
enableTrackpadTwoFingerGesture?: boolean;
Expand All @@ -242,29 +240,29 @@ Either a component rendered in the content view or a function. If `children` is

<MouseButtonProp />

<HeaderWithBadges platforms={['web']}>
<Badges platforms={['web']}>
### enableContextMenu
</HeaderWithBadges>
</Badges>

```ts
enableContextMenu: boolean;
```

Specifies whether context menu should be enabled after clicking on underlying view with right mouse button. Default value is set to `false` if [`MouseButton.RIGHT`](#mousebutton-web--android-only) is specified.

<HeaderWithBadges platforms={['web']}>
<Badges platforms={['web']}>
### userSelect
</HeaderWithBadges>
</Badges>

```ts
userSelect: 'none' | 'auto' | 'text';
```

This parameter allows to specify which `userSelect` property should be applied to underlying view. Default value is set to `"none"`.

<HeaderWithBadges platforms={['web']}>
<Badges platforms={['web']}>
### activeCursor
</HeaderWithBadges>
</Badges>

```ts
activeCursor: ActiveCursor;
Expand Down
6 changes: 2 additions & 4 deletions packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@ sidebar_label: Reanimated Swipeable
import useBaseUrl from '@docusaurus/useBaseUrl';
import GifGallery from '@site/components/GifGallery'

import HeaderWithBadges from '@site/src/components/HeaderWithBadges';

:::info
This component is a drop-in replacement for the `Swipeable` component, rewritten using [Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started).
:::
Expand Down Expand Up @@ -242,9 +240,9 @@ blocksExternalGesture?: AnyGesture | AnyGesture[];

Gestures that `Swipeable` will prevent from activating (see [gesture composition section](/docs/fundamentals/gesture-composition#simultaneouswith)).

<HeaderWithBadges platforms={['iOS']}>
<Badges platforms={['ios']}>
### enableTrackpadTwoFingerGesture
</HeaderWithBadges>
</Badges>

```ts
enableTrackpadTwoFingerGesture?: boolean;
Expand Down
2 changes: 1 addition & 1 deletion packages/docs-gesture-handler/docs/fundamentals/animated-interactions.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ sidebar_label: Integration with Animated
sidebar_position: 9
---

import CollapsibleCode from '@site/src/components/CollapsibleCode';

Copy link
Copy Markdown
Contributor

@m-bert m-bert Mar 16, 2026

Choose a reason for hiding this comment

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

Suggested change

Why not remove this entirely? Now we have 3 blank lines between header and content and that looks weird

Copy link
Copy Markdown
Contributor

@m-bert m-bert Mar 16, 2026

Choose a reason for hiding this comment

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

Applies to other files as well

Copy link
Copy Markdown
Contributor Author

@patrycjakalinska patrycjakalinska Mar 17, 2026

Choose a reason for hiding this comment

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

it was done using repetetive replacing


Using hook API allows for smooth integration with the [Animated API](https://reactnative.dev/docs/animated) by allowing for passing an `Animated.event` as the argument to the [`onUpdate`](/docs/fundamentals/callbacks-events#onupdate) callback. The event mapping of `Animated.event` depends on the [`useNativeDriver`](https://reactnative.dev/docs/animated#using-the-native-driver) property.

Expand Down
2 changes: 1 addition & 1 deletion packages/docs-gesture-handler/docs/fundamentals/callbacks-events.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ sidebar_position: 6
---

import { GestureEventFlowChart, TouchEventFlowChart } from '@site/src/examples/CallbacksFlowCharts'
import CollapsibleCode from '@site/src/components/CollapsibleCode';


At any given time, each handler instance has an assigned [state](/docs/under-the-hood/state) that can change when new touch events occur or can be forced to change by the touch system under certain circumstances. You can hook into state transitions using specific [gesture callbacks](#callbacks).

Expand Down
2 changes: 1 addition & 1 deletion packages/docs-gesture-handler/docs/fundamentals/gesture-composition.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ sidebar_label: Gesture composition & interactions
sidebar_position: 5
---

import CollapsibleCode from '@site/src/components/CollapsibleCode';


import Competing from '!!raw-loader!.//\_examples/hooks/Competing';
import Simultaneous from '!!raw-loader!.//\_examples/hooks/Simultaneous';
Expand Down
15 changes: 7 additions & 8 deletions packages/docs-gesture-handler/docs/fundamentals/gesture-detector.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ sidebar_label: Gesture detectors
sidebar_position: 4
---

import CollapsibleCode from '@site/src/components/CollapsibleCode';
import HeaderWithBadges from '@site/src/components/HeaderWithBadges';


## Gesture Detector

Expand Down Expand Up @@ -190,29 +189,29 @@ gesture: SingleGesture | ComposedGesture;

A gesture object containing the configuration and callbacks. Can be any of the base gestures or any [`ComposedGesture`](/docs/fundamentals/gesture-composition).

<HeaderWithBadges platforms={['web']}>
<Badges platforms={['web']}>
### userSelect
</HeaderWithBadges>
</Badges>

```ts
userSelect: 'none' | 'auto' | 'text';
```

This parameter allows to specify which `userSelect` property should be applied to underlying view. Default value is set to `"none"`.

<HeaderWithBadges platforms={['web']}>
<Badges platforms={['web']}>
### touchAction
</HeaderWithBadges>
</Badges>

```ts
touchAction: TouchAction;
```

This parameter allows to specify which `touchAction` property should be applied to underlying view. Supports all CSS [touch-action](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/touch-action) values. Default value is set to `"none"`.

<HeaderWithBadges platforms={['web']}>
<Badges platforms={['web']}>
### enableContextMenu
</HeaderWithBadges>
</Badges>

```ts
enableContextMenu: boolean;
Expand Down
2 changes: 1 addition & 1 deletion packages/docs-gesture-handler/docs/fundamentals/reanimated-interactions.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ sidebar_label: Integration with Reanimated
sidebar_position: 8
---

import CollapsibleCode from '@site/src/components/CollapsibleCode';


[`GestureDetector`](/docs/fundamentals/gesture-detectors) will decide whether to use [Reanimated](https://docs.swmansion.com/react-native-reanimated/) to process provided gestures based on their configuration. If any of the callbacks is a [worklet](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary/#worklet) and Reanimated is not explicitly [turned off](#disabling-reanimated), tools provided by the Reanimated will be utilized, bringing the ability to handle gestures synchronously on the main thread.

Expand Down
2 changes: 1 addition & 1 deletion packages/docs-gesture-handler/docs/fundamentals/state-manager.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ sidebar_label: State manager
sidebar_position: 7
---

import CollapsibleCode from '@site/src/components/CollapsibleCode';


RNGH3 allows to manually control [gestures lifecycle](/docs/under-the-hood/state) by using [`GestureStateManager`](#gesturestatemanager).

Expand Down
10 changes: 4 additions & 6 deletions packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import CollapsibleCode from '@site/src/components/CollapsibleCode';

import HeaderWithBadges from '@site/src/components/HeaderWithBadges';

### enabled

Expand Down Expand Up @@ -69,9 +67,9 @@ testID: string;

Sets a `testID` property for gesture object, allowing for querying for it in tests.

<HeaderWithBadges platforms={['iOS']}>
<Badges platforms={['ios']}>
### cancelsTouchesInView
</HeaderWithBadges>
</Badges>

```ts
cancelsTouchesInView: boolean | SharedValue<boolean>;
Expand Down Expand Up @@ -139,9 +137,9 @@ useAnimated: boolean;

Setting this property is set to `true` ensures that the [Animated API](/docs/fundamentals/animated-interactions) functions correctly when `useNativeDriver` is set to `false`. The default value is set to `false`.

<HeaderWithBadges platforms={['web']}>
<Badges platforms={['web']}>
### activeCursor
</HeaderWithBadges>
</Badges>

```ts
activeCursor: ActiveCursor | SharedValue<ActiveCursor>;
Expand Down
Loading