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

authored by samuel.fm and committed by

GitHub 8d5e61e1 ea3fe93b

+33 -20
+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