-
Notifications
You must be signed in to change notification settings - Fork 0
/
screen.tsx
83 lines (80 loc) · 2.16 KB
/
screen.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
import { Text, useSx, View, H1, P, Row, A } from 'dripsy'
import { TextLink } from 'solito/link'
import { MotiLink } from 'solito/moti'
export function HomeScreen() {
const sx = useSx()
return (
<View
sx={{ flex: 1, justifyContent: 'center', alignItems: 'center', p: 16 }}
>
<H1 sx={{ fontWeight: '800' }}>Welcome to Solito.</H1>
<View
sx={{
cursor: 'pointer',
}}
onClick={() => alert('hi')}
>
<Text variant="thick">Hi</Text>
</View>
<View sx={{ maxWidth: 600 }}>
<P sx={{ textAlign: 'center' }}>
Here is a basic starter to show you how you can navigate from one
screen to another. This screen uses the same code on Next.js and React
Native.
</P>
<P sx={{ textAlign: 'center' }}>
Solito is made by{' '}
<A
href="https://twitter.com/fernandotherojo"
// @ts-expect-error react-native-web only types
hrefAttrs={{
target: '_blank',
rel: 'noreferrer',
}}
sx={{ color: 'blue' }}
>
Fernando Rojo
</A>
.
</P>
</View>
<View sx={{ height: 32 }} />
<Row>
<TextLink
href="/user/fernando"
textProps={{
style: sx({ fontSize: 16, fontWeight: 'bold', color: 'blue' }),
}}
>
Regular Link
</TextLink>
<View sx={{ width: 32 }} />
<MotiLink
href="/user/fernando"
animate={({ hovered, pressed }) => {
'worklet'
return {
scale: pressed ? 0.95 : hovered ? 1.1 : 1,
rotateZ: pressed ? '0deg' : hovered ? '-3deg' : '0deg',
}
}}
from={{
scale: 0,
rotateZ: '0deg',
}}
transition={{
type: 'timing',
duration: 150,
}}
>
<Text
selectable={false}
sx={{ fontSize: 16, color: 'black', fontWeight: 'bold' }}
>
Moti Link
</Text>
</MotiLink>
</Row>
</View>
)
}