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.