AuthFlow.PhoneScreen

If you don't want to use the AuthFlow on its own, but instead you want screen-by-screen control, use this component, along with the AuthFlow.ConfirmScreen.

Basic Usage

import React from 'react'
import { AuthFlow } from 'react-native-doorman'
import { useNavigation } from '@react-navigation/native';
const PhoneScreen = () => {
const { navigate } = useNavigation()
return (
<AuthFlow.PhoneScreen
onSmsSentSuccessfully={({ phoneNumber }) => {
// this is the only required prop
navigate('ConfirmScreen')
}}
/>
)
}

Full example

See the React Navigation example.

Required Props

  • onSmsSuccessfullySent

    • Callback function called when the SMS sends a one-time code. Use this function to navigate to the next screen.

    • Arguments

      • Receives one optional argument –  a dictionary with a the phoneNumber the SMS was just sent to.

<AuthFlow.PhoneScreen
onSmsSentSuccessfully={({ phoneNumber }) => {
// this is the only required prop
navigate('ConfirmScreen')
}}
/>
type RequiredProps = {
/*
* Callback function called when the SMS sends.
* Use this to navigate to the next screen.
*/
onSmsSuccessfullySent(info: { phoneNumber: string }): void
}

Optional Props

AuthFlow.PhoneScreen can receive any of the common screen props.

It also receives the following optional props:

type Props = CommonScreenProps & {
onSmsError?: (error: unknown) => void
/**
* Props for the input component.
*/
inputProps?: Omit<ComponentPropsWithoutRef<typeof TextInput>, 'style'>
/**
* Props for the scroll view containing the whole screen. For styles, see `containerStyle`
*/
containerProps?: Omit<ComponentPropsWithoutRef<typeof ScrollView>, 'style'>
/**
* Style the outer screen.
*/
containerStyle?: ViewStyle
/**
* Style the text input.
*/
inputStyle?: ComponentPropsWithoutRef<typeof TextInput>['style']
/**
* The color used for the screens color scheme, such as highlighting the text. This prop is getting phased out, so instead, check out the other style props.
*/
tintColor?: string
/**
* Text to show inside the button. Defaults to send.
*/
buttonText?: string | 'Send' | 'Submit'
/**
* Props passed onto the react-native-paper button component.
*/
buttonProps?: Omit<
ComponentPropsWithoutRef<typeof Button>,
'children' | 'style'
>
/**
* Custom styles for the send button.
*/
buttonStyle?: ComponentPropsWithoutRef<typeof Button>['style']
/**
* (Optional) Title to show at the top. Default: "Enter your phone number"
*/
title?: string
/**
* (Optional) Message that shows under the title and above the input. Default: "We'll send you a text with a code to confirm it's you."
*/
message?: string
/**
* (Optional) Disclaimer that shows under the text input to comply with SMS guidelines. Default: "By tapping <BUTTON_TEXT>, an SMS may be sent. Message & data rates may apply." where BUTTON_TEXT is "Send" by default, but controlled by the `buttonText` prop.
*
* Can also be a function, where it receives a dictionary as its only argument, with a `buttonText` field. The function is useful to dynamically let the text update based on the buttonText, and is the more recommended usage.
*
* Here is an example used by the **Memezy** app:
*
* @example
* ```jsx
* export default () => {
* return (
* <AuthFlow.PhoneScreen
* disclaimer={({ buttonText }) => `When you press "${buttonText}", we'll send you a text. Message & data rates may apply. Reply chill to stop.`}
* />
* )
* }
* ```
*/
disclaimer?: string | ((info: { buttonText: string }) => string)
/**
* Optional custom color for the disclaimer text.
*
* If you want more generalized color editing, see `textColor` prop.
*/
disclaimerColor?: string
/**
* (Optional) If someone presses "Send" and their number is invalid, an alert will pop up with this message.
*
* Default: "Please enter a valid phone number."
*
*/
invalidNumberAlertText?: string
/**
* Optional function to replace the default button. It currently receives the props for `react-native-paper`'s Button component, where the `children` prop is the text. See their docs for more.
*
* It also receives the following props:
* - `valid`: is the phone number currently valid
* - `loading`: is the SMS sending to the user
* - `submit`: this function triggers the `onSubmitPhone` callback prop with the current phone number.
*
* @example
* ```jsx
* import { Button } from 'react-native-paper'
*import { ScreenBackground } from '../components/Background'
* export default () => {
* return (
* <AuthFlow.PhoneScreen
* renderButton={({ valid, loading, submit, ...props }) => <Button {...props} {...yourOtherPropsHere} onPress={valid && !loading ? submit : undefined} />}
* ...
* />
* )
* }
* ```
*/
renderButton?: (
props: ComponentPropsWithoutRef<typeof Button> & {
valid: boolean
submit: () => void
}
) => ReactNode
/**
* Function to render a custom input component.
*
* By default, uses react-native-phone-input on mobile and react-phone-number-input on web.
*/
renderInput?: (props: {
value: string
onChangeText: (info: { phoneNumber: string; valid: boolean }) => void
}) => ReactNode
/**
* Default: `true`.
*
* If true, the send button & disclaimer will only appear for valid phone numbers.
*/
hideButtonForInvalidNumber?: boolean
/**
* The type of button you want.
*
* The options are: `fixed-bottom` and `normal`. If it's fixed at the bottom, it goes up when the keyboard opens and is large.
*
* 🚨**Note:** 🚨 If you choose `fixed-bottom`, and you are using React Navigation's stack, you might face bugs when they keyboard opens. The solution is to make your header transparent on this React Navigation screen.
* See: https://reactnavigation.org/docs/stack-navigator/#headertransparent
*/
buttonType?: 'fixed-bottom' | 'normal'
/**
* If `true`, the default app wrapper will no longer be a KeyboardAvoidingView. Note that this will face bugs if you have `buttonType` set to `fixed-bottom`.
*
* 🚨**Note:** 🚨 If you are using React Navigation's stack navigator for this screen, you may be facing bugs with the KeyboardAvoidingView.
*
* You have two options to fix it: 1) set the stactk's [headerTransparent](https://reactnavigation.org/docs/stack-navigator/#headertransparent) option to true, or set this prop to `true`. If you do not have `headerTransparent` set to true, then you will face bugs with a KeyboardAvoidingView.
*/
disableKeyboardHandler?: boolean
/**
* (Optional) custom text that shows up in the header at the top. Default: `Sign In`. For nothing, put an empty string.
*/
headerText?: string
/**
* Custom background color for the send button. Defaults to the `tintColor` prop if not set.
*/
buttonBackgroundColor?: string
/**
* Custom text color for the send button. Defaults to the `white` prop if not set.
*/
buttonTextColor?: string
}

Considerations

If you don't want to complicate things, just use the AuthFlow component.

However, this component lets you get more up-close customization, and works well with React Navigation.