Native Sign Up Various QA Fixes

packages/mobile/src/components/fields/PasswordField.tsx

@@ -22,7 +22,6 @@ export const PasswordField = (props: PasswordFieldProps) => {
  <PasswordInput
  {...field}
  error={hasError}
- helperText={hasError ? error : undefined}
  onChangeText={(e) => {
  if (clearErrorOnChange) {
  setError(undefined)

packages/mobile/src/harmony-native/components/CoverPhoto/CoverPhoto.tsx

@@ -17,9 +17,11 @@ import type { CornerRadiusOptions } from '@audius/harmony-native'
 
 import { useTheme } from '../../foundations/theme'
 
+type CoverPhotoImage = Image | ImageSourcePropType | null | undefined
+
 export type CoverPhotoProps = {
- profilePicture?: Image | ImageSourcePropType | null | undefined
- coverPhoto?: Image | ImageSourcePropType | null | undefined
+ profilePicture?: CoverPhotoImage
+ coverPhoto?: CoverPhotoImage
  style?: StyleProp<ImageStyle>
  children?: ReactNode
  topCornerRadius?: CornerRadiusOptions
@@ -51,20 +53,38 @@ export const CoverPhoto = (props: CoverPhotoProps) => {
  const fullHeightStyle = css({ height: '100%' })
 
  const getSource = () => {
- // Having .url means its a useable image source
- if (coverPhoto && !isEmpty(coverPhoto)) {
- return { source: coverPhoto }
+ let source: Exclude<CoverPhotoImage, number> = {
+ uri: undefined
+ }
+ let usingProfilePicture = false
+ if (typeof source === 'number') {
+ return { source, usingProfilePicture }
  }
  if (profilePicture && !isEmpty(profilePicture)) {
- return { source: profilePicture, usingProfilePicture: true }
+ source = profilePicture as Exclude<CoverPhotoImage, number>
+ usingProfilePicture = true
+ }
+ if (coverPhoto && !isEmpty(coverPhoto)) {
+ source = coverPhoto as Exclude<CoverPhotoImage, number>
+ usingProfilePicture = false
+ }
+
+ // Android upload format does not quite match the expected format, so we have to drill into 'file' to workaround for android
+ if (source && 'file' in source && !('uri' in source)) {
+ return { source: source.file, usingProfilePicture }
+ } else {
+ return { source, usingProfilePicture }
  }
- return { source: { uri: undefined } }
  }
 
  const { source, usingProfilePicture } = getSource()
 
  return (
- <ImageBackground source={source} style={[rootStyle, style]} {...other}>
+ <ImageBackground
+ source={source as ImageSourcePropType}
+ style={[rootStyle, style]}
+ {...other}
+ >
  {!profilePicture && !coverPhoto ? (
  <LinearGradient
  colors={['rgba(0, 0, 0, 0.20)', 'rgba(0, 0, 0, 0.00)']}

packages/mobile/src/harmony-native/components/input/TextInput/TextInput.tsx

@@ -306,15 +306,9 @@ export const TextInput = forwardRef(
  direction='row'
  alignItems='center'
  justifyContent='space-between'
- gap='2xs'
  >
  {startAdornmentText && shouldShowAdornments ? (
- <Text
- variant='label'
- size='l'
- color='subdued'
- style={css({ lineHeight: 0 })}
- >
+ <Text variant='title' size='l' color='subdued'>
  {startAdornmentText}
  </Text>
  ) : null}
@@ -352,12 +346,7 @@ export const TextInput = forwardRef(
  {...other}
  />
  {endAdornmentText && shouldShowAdornments ? (
- <Text
- variant='label'
- size='l'
- color='subdued'
- style={css({ lineHeight: 0 })}
- >
+ <Text variant='label' size='l' color='subdued'>
  {endAdornmentText}
  </Text>
  ) : null}

packages/mobile/src/screens/root-screen/RootScreen.tsx

@@ -16,6 +16,7 @@ import { useDispatch, useSelector } from 'react-redux'
 
 import useAppState from 'app/hooks/useAppState'
 import { useDrawer } from 'app/hooks/useDrawer'
+import { useNavigation } from 'app/hooks/useNavigation'
 import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
 import { useUpdateRequired } from 'app/hooks/useUpdateRequired'
 import { useSyncCodePush } from 'app/screens/root-screen/useSyncCodePush'
@@ -66,6 +67,7 @@ export const RootScreen = () => {
  const { isEnabled: isSignUpRedesignEnabled } = useFeatureFlag(
  FeatureFlags.SIGN_UP_REDESIGN
  )
+ const { navigate } = useNavigation()
 
  const { onOpen: openWelcomeDrawer } = useDrawer('Welcome')
 
@@ -107,14 +109,19 @@ export const RootScreen = () => {
  if (showHomeStack && startedSignUp && !welcomeModalShown) {
  openWelcomeDrawer()
  setWelcomeModalShown(true)
+ // On iOS this will auto-navigate when we un-render sign up but on Android we have to navigate intentionally
+ if (navigate) {
+ navigate('HomeStack')
+ }
  }
  }
  }, [
  isSignUpRedesignEnabled,
  openWelcomeDrawer,
  showHomeStack,
  startedSignUp,
- welcomeModalShown
+ welcomeModalShown,
+ navigate
  ])
 
  return (

packages/mobile/src/screens/sign-on-screen/components/layout.tsx

@@ -47,6 +47,8 @@ export const Page = (props: PageProps) => {
  style={[
  css({
  zIndex: 1,
+ minHeight:
+ Dimensions.get('window').height - insets.top - insets.bottom,
  paddingBottom: insets.bottom
  }),
  style

packages/mobile/src/screens/sign-on-screen/screens/CreatePasswordScreen.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react'
+import { useCallback } from 'react'
 
 import { createPasswordPageMessages } from '@audius/common/messages'
 import { passwordSchema } from '@audius/common/schemas'
@@ -8,7 +8,6 @@ import { useDispatch } from 'react-redux'
 import { toFormikValidationSchema } from 'zod-formik-adapter'
 
 import { Flex } from '@audius/harmony-native'
-import { KeyboardAvoidingView } from 'app/components/core'
 import { PasswordField } from 'app/components/fields'
 import { useNavigation } from 'app/hooks/useNavigation'
 
@@ -49,50 +48,36 @@ export const CreatePasswordScreen = () => {
  [dispatch, navigation]
  )
 
- const [keyboardOffset, setKeyboardOffset] = useState(0)
-
  return (
  <Formik
  initialValues={initialValues}
  onSubmit={handleSubmit}
  validationSchema={passwordFormikSchema}
  >
- <KeyboardAvoidingView
- keyboardShowingOffset={keyboardOffset - 32}
- style={{ overflow: 'hidden' }}
- >
- <Page>
- <Heading
- heading={createPasswordPageMessages.createYourPassword}
- description={createPasswordPageMessages.description}
+ <Page>
+ <Heading
+ heading={createPasswordPageMessages.createYourPassword}
+ description={createPasswordPageMessages.description}
+ />
+ <Flex direction='column' h='100%' gap='l'>
+ <ReadOnlyField
+ label={createPasswordPageMessages.yourEmail}
+ value={email}
+ />
+ <PasswordField
+ name='password'
+ clearErrorOnChange={false}
+ label={createPasswordPageMessages.passwordLabel}
+ />
+ <PasswordField
+ name='confirmPassword'
+ clearErrorOnChange={false}
+ label={createPasswordPageMessages.confirmPasswordLabel}
  />
- <Flex
- direction='column'
- h='100%'
- gap='l'
- onLayout={(e) => {
- e.currentTarget.measureInWindow((x, y, w, h) => {
- setKeyboardOffset(y)
- })
- }}
- >
- <ReadOnlyField
- label={createPasswordPageMessages.yourEmail}
- value={email}
- />
- <PasswordField
- name='password'
- label={createPasswordPageMessages.passwordLabel}
- />
- <PasswordField
- name='confirmPassword'
- label={createPasswordPageMessages.confirmPasswordLabel}
- />
- <PasswordCompletionChecklist />
- </Flex>
- <PageFooter prefix={<SignUpAgreementText />} />
- </Page>
- </KeyboardAvoidingView>
+ <PasswordCompletionChecklist />
+ </Flex>
+ <PageFooter prefix={<SignUpAgreementText />} />
+ </Page>
  </Formik>
  )
 }

packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/FollowArtistCard.tsx

@@ -160,7 +160,7 @@ export const FollowArtistCard = (props: FollowArtistCardProps) => {
  </Pressable>
  </Flex>
  <Flex pt='unit12' ph='s' pb='l' alignItems='center' gap='l'>
- <Flex gap='s'>
+ <Flex gap='s' alignItems='center'>
  <UserDisplayName userId={user_id} />
  <Flex direction='row' gap='s' alignItems='center'>
  <Flex direction='row' gap='xs' alignItems='center'>

packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/SelectArtistsScreen.tsx

@@ -1,7 +1,11 @@
 import { useCallback } from 'react'
 
 import { selectArtistsPageMessages } from '@audius/common/messages'
-import { finishSignUp } from 'audius-client/src/common/store/pages/signon/actions'
+import {
+ addFollowArtists,
+ finishSignUp,
+ completeFollowArtists
+} from 'audius-client/src/common/store/pages/signon/actions'
 import { EditingStatus } from 'audius-client/src/common/store/pages/signon/types'
 import {
  getFollowIds,
@@ -55,12 +59,15 @@ export const SelectArtistsScreen = () => {
  )
 
  const handleSubmit = useCallback(() => {
+ // Follow selected artists
+ dispatch(addFollowArtists(selectedArtists))
+ dispatch(completeFollowArtists())
  // This call is what eventually triggers the RootScreen to redirect to the home page (via conditional rendering)
  dispatch(finishSignUp())
  if (accountCreationStatus === EditingStatus.LOADING) {
  navigation.navigate('AccountLoading')
  }
- }, [accountCreationStatus, dispatch, navigation])
+ }, [accountCreationStatus, dispatch, navigation, selectedArtists])
 
  return (
  <SelectArtistsPreviewContextProvider>

packages/web/src/common/store/pages/signon/sagas.ts

@@ -514,8 +514,10 @@ function* signUp() {
  FeatureFlags.SIGN_UP_REDESIGN
  )
 
- if (isNativeMobile && !isSignUpRedesignEnabled) {
- yield* put(requestPushNotificationPermissions())
+ if (isNativeMobile) {
+ if (!isSignUpRedesignEnabled) {
+ yield* put(requestPushNotificationPermissions())
+ }
  } else {
  // Set the has request browser permission to true as the signon provider will open it
  setHasRequestedBrowserPermission()