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

1
import React from 'react'
2
import { AuthFlow } from 'react-native-doorman'
3
import { useNavigation } from '@react-navigation/native';
4
5
const PhoneScreen = () => {
6
const { navigate } = useNavigation()
7
8
return (
9
<AuthFlow.PhoneScreen
10
onSmsSentSuccessfully={({ phoneNumber }) => {
11
// this is the only required prop
12
navigate('ConfirmScreen')
13
}}
14
/>
15
)
16
}
Copied!

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.
1
<AuthFlow.PhoneScreen
2
onSmsSentSuccessfully={({ phoneNumber }) => {
3
// this is the only required prop
4
navigate('ConfirmScreen')
5
}}
6
/>
Copied!
1
type RequiredProps = {
2
/*
3
* Callback function called when the SMS sends.
4
* Use this to navigate to the next screen.
5
*/
6
onSmsSuccessfullySent(info: { phoneNumber: string }): void
7
}
Copied!

Optional Props

AuthFlow.PhoneScreen can receive any of the common screen props.
It also receives the following optional props:
1
type Props = CommonScreenProps & {
2
onSmsError?: (error: unknown) => void
3
/**
4
* Props for the input component.
5
*/
6
inputProps?: Omit<ComponentPropsWithoutRef<typeof TextInput>, 'style'>
7
/**
8
* Props for the scroll view containing the whole screen. For styles, see `containerStyle`
9
*/
10
containerProps?: Omit<ComponentPropsWithoutRef<typeof ScrollView>, 'style'>
11
/**
12
* Style the outer screen.
13
*/
14
containerStyle?: ViewStyle
15
/**
16
* Style the text input.
17
*/
18
inputStyle?: ComponentPropsWithoutRef<typeof TextInput>['style']
19
/**
20
* 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.
21
*/
22
tintColor?: string
23
/**
24
* Text to show inside the button. Defaults to send.
25
*/
26
buttonText?: string | 'Send' | 'Submit'
27
/**
28
* Props passed onto the react-native-paper button component.
29
*/
30
buttonProps?: Omit<
31
ComponentPropsWithoutRef<typeof Button>,
32
'children' | 'style'
33
>
34
/**
35
* Custom styles for the send button.
36
*/
37
buttonStyle?: ComponentPropsWithoutRef<typeof Button>['style']
38
/**
39
* (Optional) Title to show at the top. Default: "Enter your phone number"
40
*/
41
title?: string
42
/**
43
* (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."
44
*/
45
message?: string
46
/**
47
* (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.
48
*
49
* 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.
50
*
51
* Here is an example used by the **Memezy** app:
52
*
53
* @example
54
* ```jsx
55
* export default () => {
56
* return (
57
* <AuthFlow.PhoneScreen
58
* disclaimer={({ buttonText }) => `When you press "${buttonText}", we'll send you a text. Message & data rates may apply. Reply chill to stop.`}
59
* />
60
* )
61
* }
62
* ```
63
*/
64
disclaimer?: string | ((info: { buttonText: string }) => string)
65
/**
66
* Optional custom color for the disclaimer text.
67
*
68
* If you want more generalized color editing, see `textColor` prop.
69
*/
70
disclaimerColor?: string
71
/**
72
* (Optional) If someone presses "Send" and their number is invalid, an alert will pop up with this message.
73
*
74
* Default: "Please enter a valid phone number."
75
*
76
*/
77
invalidNumberAlertText?: string
78
/**
79
* 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.
80
*
81
* It also receives the following props:
82
* - `valid`: is the phone number currently valid
83
* - `loading`: is the SMS sending to the user
84
* - `submit`: this function triggers the `onSubmitPhone` callback prop with the current phone number.
85
*
86
* @example
87
* ```jsx
88
* import { Button } from 'react-native-paper'
89
*import { ScreenBackground } from '../components/Background'
90
91
* export default () => {
92
* return (
93
* <AuthFlow.PhoneScreen
94
* renderButton={({ valid, loading, submit, ...props }) => <Button {...props} {...yourOtherPropsHere} onPress={valid && !loading ? submit : undefined} />}
95
* ...
96
* />
97
* )
98
* }
99
* ```
100
*/
101
renderButton?: (
102
props: ComponentPropsWithoutRef<typeof Button> & {
103
valid: boolean
104
submit: () => void
105
}
106
) => ReactNode
107
/**
108
* Function to render a custom input component.
109
*
110
* By default, uses react-native-phone-input on mobile and react-phone-number-input on web.
111
*/
112
renderInput?: (props: {
113
value: string
114
onChangeText: (info: { phoneNumber: string; valid: boolean }) => void
115
}) => ReactNode
116
/**
117
* Default: `true`.
118
*
119
* If true, the send button & disclaimer will only appear for valid phone numbers.
120
*/
121
hideButtonForInvalidNumber?: boolean
122
/**
123
* The type of button you want.
124
*
125
* The options are: `fixed-bottom` and `normal`. If it's fixed at the bottom, it goes up when the keyboard opens and is large.
126
*
127
* 🚨**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.
128
* See: https://reactnavigation.org/docs/stack-navigator/#headertransparent
129
*/
130
buttonType?: 'fixed-bottom' | 'normal'
131
/**
132
* 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`.
133
*
134
* 🚨**Note:** 🚨 If you are using React Navigation's stack navigator for this screen, you may be facing bugs with the KeyboardAvoidingView.
135
*
136
* 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.
137
*/
138
disableKeyboardHandler?: boolean
139
/**
140
* (Optional) custom text that shows up in the header at the top. Default: `Sign In`. For nothing, put an empty string.
141
*/
142
headerText?: string
143
/**
144
* Custom background color for the send button. Defaults to the `tintColor` prop if not set.
145
*/
146
buttonBackgroundColor?: string
147
/**
148
* Custom text color for the send button. Defaults to the `white` prop if not set.
149
*/
150
buttonTextColor?: string
151
}
152
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.