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

1
import React from 'react'
2
import { AuthFlow } from 'react-native-doorman'
3
import { useNavigation } from '@react-navigation/native';
4
5
const ConfirmScreen = () => {
6
return (
7
<AuthFlow.ConfirmScreen
8
backgroundColor={['blue', 'green']}
9
renderHeader={null}
10
/>
11
)
12
}
Copied!

Required Props

None 😇

Optional Props

AuthFlow.ConfirmScreen can receive any of the common screen props.
It also receives the following optional props:
1
type Props = CommonScreenProps & {
2
/**
3
* Optional callback function called whenever a user successfully confirms their phone number.
4
*
5
* You might want to use this to add to your analytics, for instance.
6
*
7
* @example
8
* ```es6
9
* <AuthFlow.PhoneScreen onCodeVerified={() => analytics.track('Code Success')} />
10
* ```
11
*/
12
onCodeVerified?: (info: { token: string }) => void
13
14
/**
15
* (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.
16
*
17
* Can either be a string, or a function.
18
*
19
* 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.
20
*
21
* @default
22
* ```es6
23
* const defaultMessage = ({phoneNumber}) => `We just sent a 6-digit code to ${phoneNumber}. Enter it below to continue.`
24
* ```
25
*
26
* @example
27
* ```jsx
28
*
29
* export default () => {
30
* return <ConfirmPhone message={({ phoneNumber }) => `Check ${phoneNumber} for a text!`} />
31
* }
32
* ```
33
*/
34
message?: string | ((info: { phoneNumber: string }) => ReactNode)
35
/**
36
* Override text for button that lets users to resend code.
37
*
38
* Default: `Resend Code`
39
*/
40
resendText?: string
41
/**
42
* Text style prop for the resend text. If you just want to change the color, see the `tintColor` prop.
43
*/
44
resendStyle?: TextStyleType
45
/**
46
* Header text that appears at the top.
47
*
48
* Default: Enter code
49
*/
50
title?: string
51
/**
52
* Text style for the `error` message prop.
53
*/
54
errorStyle?: TextStyleType
55
/**
56
* Props for the scroll view containing the whole screen. For styles, see `containerStyle`
57
*/
58
containerProps?: Omit<ComponentPropsWithoutRef<typeof ScrollView>, 'style'>
59
/**
60
* Style the outer screen.
61
*/
62
containerStyle?: ViewStyle
63
/**
64
* Default: `Confirm Code`. Set empty string to remove.
65
*
66
* You can also see these props: `renderHeaderTitle`, or `renderHeader`, or `headerProps`.
67
*/
68
headerText?: string
69
/**
70
* Optionally render your own custom loader when a code verification is loading.
71
*/
72
renderLoader?: () => ReactNode
73
/**
74
* Function that gets called when the back arrow is pressed.
75
*/
76
onGoBack?: () => void
77
/**
78
* Optional color for the activity indicator when a message is sending. See also: `renderLoader` prop.
79
*/
80
loaderColor?: string
81
/**
82
* Optional styles for the TextInput component.
83
*/
84
inputStyle?: TextStyleType
85
/**
86
* Custom TextInput props. Note that there are many other props to customize the input. Do a page find for `input` to find them.
87
*/
88
inputProps?: InputProps
89
}
Copied!

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.