diff --git a/src/components/StarterPack/Wizard/BackGestureDetector.ios.tsx b/src/components/StarterPack/Wizard/BackGestureDetector.ios.tsx new file mode 100644 index 0000000000..bf0b2593c0 --- /dev/null +++ b/src/components/StarterPack/Wizard/BackGestureDetector.ios.tsx @@ -0,0 +1,28 @@ +import React from 'react' +import {Gesture, GestureDetector} from 'react-native-gesture-handler' +import {runOnJS} from 'react-native-reanimated' + +export function BackGestureDetector({ + onBack, + children, +}: { + onBack: () => void + children: React.ReactNode +}) { + const swipeGesture = Gesture.Pan() + .maxPointers(1) + .onEnd(({translationX, translationY, velocityX}) => { + if ( + // Make sure it isn't a scrollview + translationX > translationY && + translationY <= 10 && + translationX >= 25 && + // Shouldn't be a really slow swipe + velocityX >= 300 + ) { + runOnJS(onBack)() + } + }) + + return {children} +} diff --git a/src/components/StarterPack/Wizard/BackGestureDetector.tsx b/src/components/StarterPack/Wizard/BackGestureDetector.tsx new file mode 100644 index 0000000000..84440fc58b --- /dev/null +++ b/src/components/StarterPack/Wizard/BackGestureDetector.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +export function BackGestureDetector({ + onBack: _onBack, + children, +}: { + onBack: () => void + children: React.ReactNode +}) { + return children +} diff --git a/src/screens/StarterPack/Wizard/StepDetails.tsx b/src/screens/StarterPack/Wizard/StepDetails.tsx index 24c992c60b..be73f55dd2 100644 --- a/src/screens/StarterPack/Wizard/StepDetails.tsx +++ b/src/screens/StarterPack/Wizard/StepDetails.tsx @@ -2,13 +2,16 @@ import React from 'react' import {View} from 'react-native' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {useNavigation} from '@react-navigation/native' +import {NavigationProp} from 'lib/routes/types' import {useProfileQuery} from 'state/queries/profile' import {useSession} from 'state/session' import {useWizardState} from '#/screens/StarterPack/Wizard/State' import {atoms as a, useTheme} from '#/alf' import * as TextField from '#/components/forms/TextField' import {StarterPack} from '#/components/icons/StarterPack' +import {BackGestureDetector} from '#/components/StarterPack/Wizard/BackGestureDetector' import {ScreenTransition} from '#/components/StarterPack/Wizard/ScreenTransition' import {Text} from '#/components/Typography' @@ -16,6 +19,7 @@ export function StepDetails() { const {_} = useLingui() const t = useTheme() const [state, dispatch] = useWizardState() + const navigation = useNavigation() const {currentAccount} = useSession() const {data: currentProfile} = useProfileQuery({ @@ -24,61 +28,71 @@ export function StepDetails() { }) return ( - - - - - - Invites, but personal - - - - Invite your friends to follow your favorite feeds and people - - + { + if (navigation.canGoBack()) { + navigation.goBack() + } else { + navigation.navigate('Home') + } + }}> + + + + + + Invites, but personal + + + + Invite your friends to follow your favorite feeds and people + + + + + + What do you want to call your starter pack? + + + dispatch({type: 'SetName', name: text})} + /> + + + {state.name?.length ?? 0}/50 + + + + + + + Tell us a little more + + + + dispatch({type: 'SetDescription', description: text}) + } + multiline + style={{minHeight: 150}} + /> + + - - - What do you want to call your starter pack? - - - dispatch({type: 'SetName', name: text})} - /> - - - {state.name?.length ?? 0}/50 - - - - - - - Tell us a little more - - - - dispatch({type: 'SetDescription', description: text}) - } - multiline - style={{minHeight: 150}} - /> - - - - + + ) } diff --git a/src/screens/StarterPack/Wizard/StepFeeds.tsx b/src/screens/StarterPack/Wizard/StepFeeds.tsx index 6752a95db3..8353f545cb 100644 --- a/src/screens/StarterPack/Wizard/StepFeeds.tsx +++ b/src/screens/StarterPack/Wizard/StepFeeds.tsx @@ -17,6 +17,7 @@ import {useWizardState} from '#/screens/StarterPack/Wizard/State' import {atoms as a, useTheme} from '#/alf' import {useThrottledValue} from '#/components/hooks/useThrottledValue' import {Loader} from '#/components/Loader' +import {BackGestureDetector} from '#/components/StarterPack/Wizard/BackGestureDetector' import {ScreenTransition} from '#/components/StarterPack/Wizard/ScreenTransition' import {WizardFeedCard} from '#/components/StarterPack/Wizard/WizardListCard' import {Text} from '#/components/Typography' @@ -64,50 +65,58 @@ export function StepFeeds({moderationOpts}: {moderationOpts: ModerationOpts}) { } return ( - - - - setQuery(t)} - onPressCancelSearch={() => setQuery('')} - onSubmitQuery={() => {}} - /> - - - fetchNextPage() : undefined - } - onEndReachedThreshold={2} - renderScrollComponent={props => } - keyboardShouldPersistTaps="handled" - containWeb={true} - sideBorders={false} - style={{flex: 1}} - ListEmptyComponent={ - - {isLoadingSearch ? ( - - ) : ( - - No feeds found. Try searching for something else. - - )} + dispatch({type: 'Back'})}> + + + + setQuery(t)} + onPressCancelSearch={() => setQuery('')} + onSubmitQuery={() => {}} + /> - } - /> - + + fetchNextPage() : undefined + } + onEndReachedThreshold={2} + renderScrollComponent={props => ( + + )} + keyboardShouldPersistTaps="handled" + containWeb={true} + sideBorders={false} + style={{flex: 1}} + ListEmptyComponent={ + + {isLoadingSearch ? ( + + ) : ( + + + No feeds found. Try searching for something else. + + + )} + + } + /> + + ) } diff --git a/src/screens/StarterPack/Wizard/StepProfiles.tsx b/src/screens/StarterPack/Wizard/StepProfiles.tsx index 8fe7f52fed..5dd97ba066 100644 --- a/src/screens/StarterPack/Wizard/StepProfiles.tsx +++ b/src/screens/StarterPack/Wizard/StepProfiles.tsx @@ -13,6 +13,7 @@ import {List} from 'view/com/util/List' import {useWizardState} from '#/screens/StarterPack/Wizard/State' import {atoms as a, useTheme} from '#/alf' import {Loader} from '#/components/Loader' +import {BackGestureDetector} from '#/components/StarterPack/Wizard/BackGestureDetector' import {ScreenTransition} from '#/components/StarterPack/Wizard/ScreenTransition' import {WizardProfileCard} from '#/components/StarterPack/Wizard/WizardListCard' import {Text} from '#/components/Typography' @@ -53,49 +54,57 @@ export function StepProfiles({ } return ( - - - - setQuery('')} - onSubmitQuery={() => {}} - /> - - - } - keyboardShouldPersistTaps="handled" - containWeb={true} - sideBorders={false} + dispatch({type: 'Back'})}> + fetchNextPage() : undefined - } - onEndReachedThreshold={isNative ? 2 : 0.25} - ListEmptyComponent={ - - {isLoadingResults ? ( - - ) : ( - - Nobody was found. Try searching for someone else. - - )} + direction={state.transitionDirection}> + + + setQuery('')} + onSubmitQuery={() => {}} + /> - } - /> - + + ( + + )} + keyboardShouldPersistTaps="handled" + containWeb={true} + sideBorders={false} + style={[a.flex_1]} + onEndReached={ + !query && !screenReaderEnabled ? () => fetchNextPage() : undefined + } + onEndReachedThreshold={isNative ? 2 : 0.25} + ListEmptyComponent={ + + {isLoadingResults ? ( + + ) : ( + + + Nobody was found. Try searching for someone else. + + + )} + + } + /> + + ) } diff --git a/src/screens/StarterPack/Wizard/index.tsx b/src/screens/StarterPack/Wizard/index.tsx index 7cee86f840..b0017b5f70 100644 --- a/src/screens/StarterPack/Wizard/index.tsx +++ b/src/screens/StarterPack/Wizard/index.tsx @@ -579,9 +579,9 @@ function Footer({ function getName(item: AppBskyActorDefs.ProfileViewBasic | GeneratorView) { if (typeof item.displayName === 'string') { - return enforceLen(sanitizeDisplayName(item.displayName), 16, true) + return enforceLen(sanitizeDisplayName(item.displayName), 28, true) } else if (typeof item.handle === 'string') { - return enforceLen(sanitizeHandle(item.handle), 16, true) + return enforceLen(sanitizeHandle(item.handle), 28, true) } return '' }