nasso.dev
my fork of the bluesky client
Use native modal for signup queue screen (#6392)
* fix top inset for signup queue
* use native modal for queue screen
* spacing for if text is super large
* don't allow scroll bounce
samuel.fm
+33
-20
src/screens/SignupQueued.tsx
+33
-20
src/screens/SignupQueued.tsx
···
1
1
import React from 'react'
2
-
import {View} from 'react-native'
2
+
import {Modal, View} from 'react-native'
3
3
import {useSafeAreaInsets} from 'react-native-safe-area-context'
4
+
import {StatusBar} from 'expo-status-bar'
4
5
import {msg, plural, Trans} from '@lingui/macro'
5
6
import {useLingui} from '@lingui/react'
6
7
7
8
import {logger} from '#/logger'
8
-
import {isWeb} from '#/platform/detection'
9
+
import {isIOS, isWeb} from '#/platform/detection'
9
10
import {isSignupQueued, useAgent, useSessionApi} from '#/state/session'
10
11
import {useOnboardingDispatch} from '#/state/shell'
11
12
import {ScrollView} from '#/view/com/util/Views'
12
13
import {Logo} from '#/view/icons/Logo'
13
-
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
14
+
import {atoms as a, native, useBreakpoints, useTheme, web} from '#/alf'
14
15
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
15
16
import {Loader} from '#/components/Loader'
16
17
import {P, Text} from '#/components/Typography'
···
86
87
)
87
88
88
89
return (
89
-
<View
90
-
aria-modal
91
-
role="dialog"
92
-
aria-role="dialog"
93
-
aria-label={_(msg`You're in line`)}
94
-
accessibilityLabel={_(msg`You're in line`)}
95
-
accessibilityHint=""
96
-
style={[a.absolute, a.inset_0, a.flex_1, t.atoms.bg]}>
90
+
<Modal
91
+
visible
92
+
animationType={native('slide')}
93
+
presentationStyle="formSheet"
94
+
style={[web(a.util_screen_outer)]}>
95
+
{isIOS && <StatusBar style="light" />}
97
96
<ScrollView
98
-
style={[a.h_full, a.w_full]}
99
-
contentContainerStyle={{borderWidth: 0}}>
97
+
style={[a.flex_1, t.atoms.bg]}
98
+
contentContainerStyle={{borderWidth: 0}}
99
+
bounces={false}>
100
100
<View
101
-
style={[a.flex_row, a.justify_center, gtMobile ? a.pt_4xl : a.px_xl]}>
101
+
style={[
102
+
a.flex_row,
103
+
a.justify_center,
104
+
gtMobile ? a.pt_4xl : [a.px_xl, a.pt_xl],
105
+
]}>
102
106
<View style={[a.flex_1, {maxWidth: COL_WIDTH}]}>
103
107
<View
104
108
style={[a.w_full, a.justify_center, a.align_center, a.my_4xl]}>
···
121
125
a.px_2xl,
122
126
a.py_4xl,
123
127
a.mt_2xl,
124
-
t.atoms.bg_contrast_50,
128
+
a.mb_md,
129
+
a.border,
130
+
t.atoms.bg_contrast_25,
131
+
t.atoms.border_contrast_medium,
125
132
]}>
126
133
{typeof placeInQueue === 'number' && (
127
134
<Text
128
-
style={[a.text_5xl, a.text_center, a.font_bold, a.mb_2xl]}>
135
+
style={[a.text_5xl, a.text_center, a.font_heavy, a.mb_2xl]}>
129
136
{placeInQueue}
130
137
</Text>
131
138
)}
···
148
155
</View>
149
156
150
157
{isWeb && gtMobile && (
151
-
<View style={[a.w_full, a.flex_row, a.justify_between, a.pt_5xl]}>
158
+
<View
159
+
style={[
160
+
a.w_full,
161
+
a.flex_row,
162
+
a.justify_between,
163
+
a.pt_5xl,
164
+
{paddingBottom: 200},
165
+
]}>
152
166
<Button
153
167
variant="ghost"
154
168
size="large"
···
162
176
</View>
163
177
)}
164
178
</View>
165
-
166
-
<View style={{height: 200}} />
167
179
</View>
168
180
</ScrollView>
169
181
···
171
183
<View
172
184
style={[
173
185
a.align_center,
186
+
t.atoms.bg,
174
187
gtMobile ? a.px_5xl : a.px_xl,
175
188
{
176
189
paddingBottom: Math.max(insets.bottom, a.pb_5xl.paddingBottom),
···
190
203
</View>
191
204
</View>
192
205
)}
193
-
</View>
206
+
</Modal>
194
207
)
195
208
}
196
209