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.
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}
/>
)
}
None 😇
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
}
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.
Last modified 2yr ago