AuthFlow.ConfirmScreen

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.PhoneScreen.

Basic Usage

import React from 'react'
import { AuthFlow } from 'react-native-doorman'
import { useNavigation } from '@react-navigation/native';

const ConfirmScreen = () => {
  return (
    <AuthFlow.ConfirmScreen 
      backgroundColor={['blue', 'green']}
      renderHeader={null}
    />
  )
}

Required Props

None 😇

Optional Props

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

It also receives the following optional props:

type Props = CommonScreenProps & {
	/**
	 * Optional callback function called whenever a user successfully confirms their phone number.
	 *
	 * You might want to use this to add to your analytics, for instance.
	 *
	 * @example
	 * ```es6
	 * <AuthFlow.PhoneScreen onCodeVerified={() => analytics.track('Code Success')} />
	 * ```
	 */
	onCodeVerified?: (info: { token: string }) => void
	
	/**
	 * (Optional prop) Message that will show up above the code input. This should tell your user that they just received a code to their phone, and that it should show up below.
	 *
	 * Can either be a string, or a function.
	 *
	 * If you pass a function, it receives one argument: a dictionary with a `phoneNumber` value. The function should return a string or React Native <Text /> node.
	 *
	 * @default
	 * ```es6
	 * 	const defaultMessage = ({phoneNumber}) => `We just sent a 6-digit code to ${phoneNumber}. Enter it below to continue.`
	 * ```
	 *
	 * @example
	 * ```jsx
	 *
	 * export default () => {
	 * 	return <ConfirmPhone message={({ phoneNumber }) => `Check ${phoneNumber} for a text!`} />
	 * }
	 * ```
	 */
	message?: string | ((info: { phoneNumber: string }) => ReactNode)
	/**
	 * Override text for button that lets users to resend code.
	 *
	 * Default: `Resend Code`
	 */
	resendText?: string
	/**
	 * Text style prop for the resend text. If you just want to change the color, see the `tintColor` prop.
	 */
	resendStyle?: TextStyleType
	/**
	 * Header text that appears at the top.
	 *
	 * Default: Enter code
	 */
	title?: string
	/**
	 * Text style for the `error` message prop.
	 */
	errorStyle?: TextStyleType
	/**
	 * 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
	/**
	 * Default: `Confirm Code`. Set empty string to remove.
	 *
	 * You can also see these props: `renderHeaderTitle`, or `renderHeader`, or `headerProps`.
	 */
	headerText?: string
	/**
	 * Optionally render your own custom loader when a code verification is loading.
	 */
	renderLoader?: () => ReactNode
	/**
	 * Function that gets called when the back arrow is pressed.
	 */
	onGoBack?: () => void
	/**
	 * Optional color for the activity indicator when a message is sending. See also: `renderLoader` prop.
	 */
	loaderColor?: string
	/**
	 * Optional styles for the TextInput component.
	 */
	inputStyle?: TextStyleType
	/**
	 * Custom TextInput props. Note that there are many other props to customize the input. Do a page find for `input` to find them.
	 */
	inputProps?: InputProps
}

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.