Skip to content

Commit 39caf79

Browse files
authored
[docs] Add Swipe & Scroll guide (#3254)
## Description At the beginning of new web implementation `Swipeable` component was blocking `scroll` on `web`. We did fix it by adding `touch-action: pan-y;` as a property to our handlers, and making it default in `Pan` used under the hood of `Swipeable`. However, some of our users prefer to create their own versions of `Swipeable` - that's where they encounter this issue. This PR adds guide section about fixing this problem. It also changes font size of `code` inside headers such that it is no longer ridiculously small. ## Test plan Run docs
1 parent bf55fde commit 39caf79

File tree

2 files changed

+17
-0
lines changed

2 files changed

+17
-0
lines changed

docs/docs/guides/swipe-and-scroll.md

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
id: swipe-and-scroll
3+
title: Custom swipeable components inside ScrollView (web)
4+
---
5+
6+
While we recommend using our own [`ReanimatedSwipeable`](../components/reanimated_swipeable.md) component, creating your own version of swipeable gives you more control over its behavior. Common issue here is that after creating your own swipeable component, scroll does not work. In that case, try adding [`touchAction`](../gestures/gesture-detector.md#touchaction-web-only) set to `"pan-y"`, like this:
7+
8+
```jsx
9+
<GestureDetector gesture={...} ... touchAction="pan-y">
10+
...
11+
</GestureDetector>
12+
```

docs/src/css/typography.css

+5
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,11 @@ code {
183183
border-bottom: 1px solid var(--ifm-font-color-base);
184184
}
185185

186+
.markdown h2 code {
187+
font-size: 22px;
188+
font-weight: 600;
189+
}
190+
186191
/* Sidebar */
187192
[class*='menu__list-item-collapsible'] a {
188193
font-family: var(--swm-title-font);

0 commit comments

Comments
 (0)