Skip to content

Commit a5545af

Browse files
m-bertm-bert
authored
[Docs] Add Touchable section to landing page (#4368)
## Description Adds `Touchable` section to docs https://github.com/user-attachments/assets/ff5cb001-33b4-4f98-adec-002578a66f37 ## Test plan Read docs 🤓
1 parent 289265a commit a5545af

3 files changed

Lines changed: 168 additions & 0 deletions

File tree

‎packages/docs-gesture-handler/src/components/TouchableShowcase/index.tsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import BrowserOnly from '@docusaurus/BrowserOnly';
2+
import React from 'react';
3+
import { StyleSheet, Text } from 'react-native';
4+
import {
5+
GestureHandlerRootView,
6+
Touchable,
7+
} from 'react-native-gesture-handler';
8+
9+
import styles from './styles.module.css';
10+
11+
function TouchableDemo() {
12+
return (
13+
<div className={styles.card}>
14+
<GestureHandlerRootView style={rnStyles.root}>
15+
<Touchable
16+
style={rnStyles.button}
17+
activeOpacity={0.8}
18+
underlayColor="var(--swm-purple-dark-140)"
19+
hoverScale={1.04}
20+
hoverUnderlayOpacity={0.15}>
21+
<Text style={rnStyles.buttonText}>Press me</Text>
22+
</Touchable>
23+
</GestureHandlerRootView>
24+
</div>
25+
);
26+
}
27+
28+
const TouchableShowcase = () => {
29+
return (
30+
<div className={styles.container}>
31+
<div className={styles.text}>
32+
<span className={styles.badge}>New</span>
33+
<h2 className={styles.title}>Meet Touchable</h2>
34+
<p className={styles.description}>
35+
One fully customizable component meant to supersede Pressable and
36+
Buttons. It comes with native scale, opacity, underlay, and Android
37+
ripple feedback built in.
38+
</p>
39+
<a
40+
className={styles.link}
41+
href="/react-native-gesture-handler/docs/components/touchable">
42+
View docs <span aria-hidden="true">→</span>
43+
</a>
44+
</div>
45+
<div className={styles.demo}>
46+
<BrowserOnly fallback={<div className={styles.demoFallback} />}>
47+
{() => <TouchableDemo />}
48+
</BrowserOnly>
49+
</div>
50+
</div>
51+
);
52+
};
53+
54+
const rnStyles = StyleSheet.create({
55+
root: {
56+
alignItems: 'center',
57+
justifyContent: 'center',
58+
},
59+
button: {
60+
paddingVertical: 18,
61+
paddingHorizontal: 40,
62+
borderRadius: 16,
63+
backgroundColor: 'var(--swm-purple-light-100)',
64+
alignItems: 'center',
65+
justifyContent: 'center',
66+
},
67+
buttonText: {
68+
color: 'white',
69+
fontSize: 16,
70+
fontWeight: '600',
71+
},
72+
});
73+
74+
export default TouchableShowcase;

‎packages/docs-gesture-handler/src/components/TouchableShowcase/styles.module.css‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
.container {
2+
display: flex;
3+
align-items: center;
4+
justify-content: space-between;
5+
gap: 3rem;
6+
}
7+
8+
.text {
9+
max-width: 480px;
10+
}
11+
12+
.badge {
13+
display: inline-block;
14+
padding: 0.3rem 0.9rem;
15+
border-radius: 999px;
16+
border: 1px solid var(--swm-sidebar-label-text-new);
17+
font-size: 12px;
18+
font-weight: 700;
19+
letter-spacing: 0.05em;
20+
color: var(--swm-sidebar-label-text-new);
21+
background: var(--swm-sidebar-label-background-new);
22+
margin-bottom: 1rem;
23+
}
24+
25+
.title {
26+
font-size: var(--swm-h2-font-size);
27+
font-weight: 700;
28+
margin-bottom: 1.5rem;
29+
}
30+
31+
.description {
32+
font-size: 18px;
33+
line-height: 1.5;
34+
margin-bottom: 1rem;
35+
color: var(--swm-landing-heading);
36+
}
37+
38+
.link {
39+
display: inline-flex;
40+
align-items: center;
41+
gap: 0.4rem;
42+
color: var(--swm-landing-heading-selected);
43+
font-weight: 600;
44+
font-size: 16px;
45+
text-decoration: none;
46+
}
47+
48+
.link:hover {
49+
text-decoration: underline;
50+
}
51+
52+
.demo {
53+
flex-shrink: 0;
54+
}
55+
56+
.demoFallback {
57+
width: 260px;
58+
height: 180px;
59+
}
60+
61+
.card {
62+
width: 260px;
63+
height: 180px;
64+
display: flex;
65+
flex-direction: column;
66+
align-items: center;
67+
justify-content: center;
68+
gap: 1rem;
69+
background-color: var(--swm-blue-light-20);
70+
box-shadow: -12px 12px 0px var(--swm-blue-light-60);
71+
}
72+
73+
[data-theme='dark'] .card {
74+
background-color: var(--swm-purple-dark-40);
75+
box-shadow: -12px 12px 0px var(--swm-purple-dark-140);
76+
}
77+
78+
@media (max-width: 768px) {
79+
.container {
80+
flex-direction: column;
81+
align-items: flex-start;
82+
gap: 2.5rem;
83+
}
84+
85+
.text {
86+
max-width: 100%;
87+
}
88+
89+
.demo {
90+
align-self: center;
91+
}
92+
}

‎packages/docs-gesture-handler/src/pages/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import HomepageStartScreen from '@site/src/components/Hero/StartScreen';
77
import LandingBackground from '@site/src/components/Hero/LandingBackground';
88
import FooterBackground from '../components/FooterBackground';
99
import Playground from '@site/src/components/Playground';
10+
import TouchableShowcase from '@site/src/components/TouchableShowcase';
1011
import GestureFeatures from '@site/src/components/GestureFeatures';
1112
import Testimonials from '@site/src/components/Testimonials';
1213
import Sponsors from '@site/src/components/Sponsors';
@@ -23,6 +24,7 @@ function Home() {
2324
<LandingBackground />
2425
<div className={styles.container}>
2526
<HomepageStartScreen />
27+
<TouchableShowcase />
2628
<Playground />
2729
</div>
2830
<div className={styles.waveContainer}>

0 commit comments

Comments
 (0)