EGG - Sprint 0: Onboarding

components.md

React components

<WelcomeScreen />

Re-use common’s <Button /> (might need adaptation to have an icon inside)

Props

onPressGetStarted: () => void

<PhoneNumberInputScreen />

No need for an header: will be added as a react-navigation bar Reuse common' <Button /> component Use https://github.com/catamphetamine/libphonenumber-js for formatting?

States

• Empty with continue button disabled
• Filled
• Filled with Error message shown

Props

phoneNumberValue: string   // in E.164 format
onPhoneNumberValueChange: (phoneNumber: string) => void // phoneNumber in E.164 format
errorMessage?: string
isContinueButtonDisabled: boolean
onPressContinue: () => void

<CodeVerificationScreen />

Show the resend button after 30seconds

States

• empty
• with resend button: appears after 30sec
• with error message

User actions

• user inputs value
• until reached 4 digits where the submit happens
• Ask to resend code

Props

codeValue: string
onCodeValueChanged: (value: string) => void
onCodeSubmit: () => void // happens when code length reached 4
onResendPress: () => void
errorMessage: ? string

<VerificationLoadingScreen />

Todo: ask for the after Effects file to be exported for Lottie.

Props

None

<UsernameInputScreen />

This component will be used to entry the username and to change it: the wording can change with the prop wordingType.

Re-use the common's <TextInput /> component and add the cross-icon to empty its content.

States

• empty input, with FIRST_TIME wording
• filled input with CHANGE wording
• with error message

Props

wordingType: enum (FIRST_TIME, CHANGE) 
usernameValue: string
onUsernameValueChange: (value: string) => void
errorMessage?: string
onPressContinue: () => void
isContinueButtonDisabled?: boolean

<SelfieCTAScreen />

Use https://github.com/react-native-community/react-native-image-picker/blob/master/docs/Reference.md to open a photo picker and try to customize so that options look like the one in the design.

User actions

• user can press its username
• user can press the "+" that opens native image picker here he can chose or take a photo from here
• user can press skip

Props

username: string
onPressUsername: () => void
onPressSkip : () => void
onDone: (imageURI: string)

<SelfieCropScreen />

Reuse common’s <Button /> Implement the Zoom and pitch animation to let user crop Can be used to crop the image: https://github.com/react-native-community/react-native-image-editor

Props

/**
 * the URI of the image to crop
 */
imageURI: string
onRetake: () => void
onContinue: (cropedImageURI: string) => void

<RegistrationConfirmationScreen />

Reuse common <Button /> and <EggLogo />

Props

username: string
photoURL: string
onPressEdit: () => void
onPressContinue: () => void

<RegistrationConfirmationPhotoEditionModal />

Reuse common’s <CloseButton />

Props

onPresEdit: () = void
onPressChange: () = void
onPressChoseNew: () = void
onClose: () = void

❌ <SelfieInputScreen/>

We don't implement this screen but rather use and customize the native image picker in <SelfieCTAScreen />

---

🛑Waiting for confirmation for doing these ones

<PrivacyPoliciesAcceptanceScreen />

Implement the “trace to agree” interaction ❓no idea how to do it. Check this. Props

onAgree: () => void