Common Screen Props

What are these
These props are customizations that are the same for AuthFlow, AuthFlow.ConfirmScreen, andAuthFlow.PhoneScreen. They can also be used in withPhoneAuth's second argument.
These props are mainly ways to style your screens and such.
How do I use them
If you're using one of the AuthFlow components, you just pass them as props.
If you're using withPhoneAuth, they get passed as values in the second argument. 
Props
The props below are all optional.
1
type CommonScreenProps = {
2
	/**
3
	 * Default: `left`.
4
	 *
5
	 * Set to `center` if you want the screen text and input to be centered by default.
6
	 */
7
	textAlign?: TextStyle['textAlign']
8
	/**
9
	 * The default text color. If you want more granular customization, see `titleColor`, `disclaimerColor` and `messageColor`.
10
	 *
11
	 * Default: `white`
12
	 */
13
	textColor?: TextStyle['color']
14
	/**
15
	 * Background color for the header at the top of the screen.
16
	 *
17
	 * Default: `transparent`.
18
	 *
19
	 * If you want a lot of customization, see the `renderHeader` prop.
20
	 */
21
	headerBackgroundColor?: string
22
	/**
23
	 * Optionally render a custom component in place of the header title. This useful if you want to render your logo, for instance.
24
	 */
25
	renderHeaderTitle?: () => ReactNode
26
	/**
27
	 * Optional custom color for the text and back icon in the header. If not set, it defaults to the value you set for the `textColor` prop.
28
	 */
29
	headerTintColor?: string
30
	/**
31
	 * (Optional) custom props to be passed to the header.
32
	 *
33
	 * See the `react-native-elements` docs for the `Header` props: https://react-native-elements.github.io/react-native-elements/docs/header.html
34
	 */
35
	headerProps?: ComponentPropsWithoutRef<typeof Header>
36
	/**
37
	 * Custom styles for the title in the header.
38
	 *
39
	 * If you just want to edit the text color, see `headerTintColor`.
40
	 */
41
	headerTitleStyle?: TextStyle
42
	/**
43
	 * Either a string or array of strings.
44
	 *
45
	 * If an array is passed, it will render a gradient.
46
	 *
47
	 * Make sure to memoize this prop if you're using a gradient using `useMemo`.
48
	 * Or, place the array outside of the component code.
49
	 *
50
	 * @example
51
	 * ```es6
52
	 * export default () => {
53
	 *   const backgroundColor = useMemo(() => ['blue', 'green' ],[])
54
	 *   return <Phone.Stack backgroundColor={backgroundColor} {...otherProps} />
55
	 * }
56
	 * ```
57
	 */
58
	backgroundColor?: string | string[]
59
	/**
60
	 * A function that returns a custom component that will replace the default background.
61
	 *
62
	 * This View should have the `StyleSheet.absoluteFill` in its styles so that it covers the entire screen.
63
	 */
64
	renderBackground?: () => ReactNode
65
	/**
66
	 * Background color for the text input
67
	 */
68
	inputBackgroundColor?: string
69
	/**
70
	 * Text color for the text input
71
	 */
72
	inputTextColor?: string
73
	/**
74
	 * Define which premade style type for the input you would like.
75
	 *
76
	 * `elevated` has dropshadow and a colored background that contrasts with the screen background.
77
	 * `flat` has a transparent background and is more subtle.
78
	 */
79
	inputType?: 'elevated' | 'flat'
80
	/**
81
	 * Optional function that renders a custom header. If `null`, will not return a header.
82
	 *
83
	 * Receives one argument: a dictionary with a `screen` field, which can be `code` or `phone`. This tells you which screen the header is currently on.
84
	 *
85
	 * @param info.screen - 'code' or 'phone', indicating which screen the header is currently being rendered on.
86
	 */
87
	renderHeader?: null | ((screen: { screen: 'code' | 'phone' }) => ReactNode)
88
	/**
89
	 * (Optional) Style the view that contains the text input.
90
	 */
91
	inputContainerStyle?: ViewStyle
92
}
93
​
Copied!

AuthFlow.PhoneScreen

Next - 📱Auth Components

UI Components

Last modified 2yr ago

Copy link

Contents

What are these

How do I use them

Props