+
+ Some text
+
+
+// GOOD
+
+
+ Some text
+
+
+```
+
+You also lose the ability to set up a default font for an entire subtree. Meanwhile, `fontFamily` only accepts a single font name, which is different from `font-family` in CSS. The recommended way to use consistent fonts and sizes across your application is to create a component `MyAppText` that includes them and use this component across your app. You can also use this component to make more specific components like `MyAppHeaderText` for other kinds of text.
+
+```tsx
+
+
+ Text styled with the default font for the entire application
+
+ Text styled as a header
+
+```
+
+Assuming that `MyAppText` is a component that only renders out its children into a `Text` component with styling, then `MyAppHeaderText` can be defined as follows:
+
+```tsx
+const MyAppHeaderText = ({children}) => {
+ return (
+
+ {children}
+
+ );
+};
+```
+
+Composing `MyAppText` in this way ensures that we get the styles from a top-level component, but leaves us the ability to add/override them in specific use cases.
+
+React Native still has the concept of style inheritance, but limited to text subtrees. In this case, the second part will be both bold and red.
+
+```tsx
+
+ I am bold
+ and red
+
+```
+
+We believe that this more constrained way to style text will yield better apps:
+
+- (Developer) React components are designed with strong isolation in mind: You should be able to drop a component anywhere in your application, trusting that as long as the props are the same, it will look and behave the same way. Text properties that could inherit from outside of the props would break this isolation.
+
+- (Implementor) The implementation of React Native is also simplified. We do not need to have a `fontFamily` field on every single element, and we do not need to potentially traverse the tree up to the root every time we display a text node. The style inheritance is only encoded inside of the native Text component and doesn't leak to other components or the system itself.
+
+---
+
+# Reference
+
+## Props
+
+### `accessibilityHint`
+
+An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
+
+| Type |
+| ------ |
+| string |
+---
+
+### `accessibilityLabel`
+
+Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
+
+| Type |
+| ------ |
+| string |
+
+---
+
+### `accessibilityRole`
+
+Tells the screen reader to treat the currently focused on element as having a specific role.
+
+
+| Type |
+| ---------------------------------------------------- |
+| [AccessibilityRole]() |
+
+---
+
+### `accessibilityState`
+
+Tells the screen reader to treat the currently focused on element as being in a specific state.
+
+You can provide one state, no state, or multiple states. The states must be passed in through an object, e.g. `{selected: true, disabled: true}`.
+
+| Type |
+| ------------------------------------------------------ |
+| [AccessibilityState]() |
+
+---
+
+### `accessibilityActions`
+
+Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
+
+See the [Accessibility guide]() for more information.
+
+| Type | Required |
+| ----- | -------- |
+| array | No |
+
+---
+
+### `onAccessibilityAction`
+
+Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
+
+See the [Accessibility guide]() for more information.
+
+| Type | Required |
+| -------- | -------- |
+| function | No |
+
+---
+
+### `accessible`
+
+When set to `true`, indicates that the view is an accessibility element.
+
+| Type | Default |
+| ------- | ------- |
+| boolean | `true` |
+
+---
+
+### `adjustsFontSizeToFit`
+
+Specifies whether fonts should be scaled down automatically to fit given style constraints.
+
+| Type | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `allowFontScaling`
+
+Specifies whether fonts should scale to respect Text Size accessibility settings.
+
+| Type | Default |
+| ------- | ------- |
+| boolean | `true` |
+
+---
+
+### `aria-busy`
+
+Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
+
+| Type | Default |
+| ------- | ------- |
+| boolean | false |
+
+---
+
+### `aria-checked`
+
+Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
+
+| Type | Default |
+| ---------------- | ------- |
+| boolean, 'mixed' | false |
+
+---
+
+### `aria-disabled`
+
+Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+
+| Type | Default |
+| ------- | ------- |
+| boolean | false |
+
+---
+
+### `aria-expanded`
+
+Indicates whether an expandable element is currently expanded or collapsed.
+
+| Type | Default |
+| ------- | ------- |
+| boolean | false |
+
+---
+
+### `aria-label`
+
+Defines a string value that labels an interactive element.
+
+| Type |
+| ------ |
+| string |
+
+---
+
+### `aria-selected`
+
+Indicates whether a selectable element is currently selected or not.
+
+| Type |
+| ------- |
+| boolean |
+
+### `dataDetectorType`
+
+Determines the types of data converted to clickable URLs in the text element. By default, no data types are detected.
+
+You can provide only one type.
+
+| Type | Default |
+| ------------------------------------------------------------- | -------- |
+| enum(`'phoneNumber'`, `'link'`, `'email'`, `'none'`, `'all'`) | `'none'` |
+
+---
+
+### `disabled`
+
+Specifies the disabled state of the text view for testing purposes.
+
+| Type | Default |
+| ---- | ------- |
+| bool | `false` |
+
+---
+
+### `ellipsizeMode`
+
+When `numberOfLines` is set, this prop defines how the text will be truncated. `numberOfLines` must be set in conjunction with this prop.
+
+This can be one of the following values:
+
+- `head` - The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz"
+- `middle` - The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. "ab...yz"
+- `tail` - The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."
+- `clip` - Lines are not drawn past the edge of the text container.
+
+
+| Type | Default |
+| ---------------------------------------------- | ------- |
+| enum(`'head'`, `'middle'`, `'tail'`, `'clip'`) | `tail` |
+
+---
+
+### `id`
+
+Used to locate this view from native code. Has precedence over `nativeID` prop.
+
+| Type |
+| ------ |
+| string |
+
+---
+
+### `maxFontSizeMultiplier`
+
+Specifies the largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
+
+- `null/undefined`: inherit from the parent node or the global default (0)
+- `0`: no max, ignore parent/global default
+- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
+
+| Type | Default |
+| ------ | ----------- |
+| number | `undefined` |
+
+---
+
+### `minimumFontScale`
+
+Specifies the smallest possible scale a font can reach when `adjustsFontSizeToFit` is enabled. (values 0.01-1.0).
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `nativeID`
+
+Used to locate this view from native code.
+
+| Type |
+| ------ |
+| string |
+
+---
+
+### `numberOfLines`
+
+Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number. Setting this property to `0` will result in unsetting this value, which means that no lines restriction will be applied.
+
+This prop is commonly used with `ellipsizeMode`.
+
+| Type | Default |
+| ------ | ------- |
+| number | `0` |
+
+---
+
+### `onLayout`
+
+Invoked on mount and on layout changes.
+
+| Type |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
+
+---
+
+### `onLongPress`
+
+This function is called on long press.
+
+| Type |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onMoveShouldSetResponder`
+
+Does this view want to "claim" touch responsiveness? This is called for every touch move on the `View` when it is not the responder.
+
+| Type |
+| --------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
+
+---
+
+### `onPress`
+
+Function called on user press, triggered after `onPressOut`.
+
+| Type |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onPressIn`
+
+Called immediately when a touch is engaged, before `onPressOut` and `onPress`.
+
+| Type |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onPressOut`
+
+Called when a touch is released.
+
+| Type |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderGrant`
+
+The View is now responding to touch events. This is the time to highlight and show the user what is happening.
+
+
+| Type |
+| ----------------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void ｜ boolean` |
+
+---
+
+### `onResponderMove`
+
+The user is moving their finger.
+
+| Type |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderRelease`
+
+Fired at the end of the touch.
+
+| Type |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderTerminate`
+
+The responder has been taken from the `View`.
+
+| Type |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderTerminationRequest`
+
+Some other `View` wants to become a responder and is asking this `View` to release its responder. Returning `true` allows its release.
+
+| Type |
+| --------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
+
+---
+
+### `onStartShouldSetResponderCapture`
+
+If a parent `View` wants to prevent a child `View` from becoming a responder on a touch start, it should have this handler which returns `true`.
+
+| Type |
+| --------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
+
+---
+
+### `onTextLayout`
+
+Invoked on Text layout change.
+
+| Type |
+| ---------------------------------------------------- |
+| ([`TextLayoutEvent`](text#textlayoutevent)) => mixed |
+
+---
+
+### `pressRetentionOffset`
+
+When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.
+
+| Type |
+| -------------------- |
+| [Rect](), number |
+
+---
+
+### `role`
+
+`role` communicates the purpose of a component to the user of an assistive technology. Has precedence over the [`accessibilityRole`]() prop.
+
+| Type |
+| -------------------------- |
+| [Role]() |
+
+---
+
+### `selectable`
+
+Lets the user select text, to use the native copy and paste functionality.
+
+| Type | Default |
+| ------- | ------- |
+| boolean | `false` |
+
+---
+
+### `style`
+
+| Type |
+| -------------------------------------------------------------------- |
+| [Text Style](), [View Style Props](view-style-props) |
+
+
+---
+
+### `testID`
+
+Used to locate this view in end-to-end tests.
+
+| Type |
+| ------ |
+| string |
+
+---
+
+## Type Definitions
+
+### TextLayout
+
+`TextLayout` object is a part of [`TextLayoutEvent`](text#textlayoutevent) callback and contains the measurement data for `Text` line.
+
+#### Example
+
+```js
+{
+ capHeight: 10.496,
+ ascender: 14.624,
+ descender: 4,
+ width: 28.224,
+ height: 18.624,
+ xHeight: 6.048,
+ x: 0,
+ y: 0
+}
+```
+
+#### Properties
+
+| Name | Type | Optional | Description |
+| --------- | ------ | -------- | ------------------------------------------------------------------- |
+| ascender | number | No | The line ascender height after the text layout changes. |
+| capHeight | number | No | Height of capital letter above the baseline. |
+| descender | number | No | The line descender height after the text layout changes. |
+| height | number | No | Height of the line after the text layout changes. |
+| width | number | No | Width of the line after the text layout changes. |
+| x | number | No | Line X coordinate inside the Text component. |
+| xHeight | number | No | Distance between the baseline and median of the line (corpus size). |
+| y | number | No | Line Y coordinate inside the Text component. |
+
+### TextLayoutEvent
+
+`TextLayoutEvent` object is returned in the callback as a result of a component layout change. It contains a key called `lines` with a value which is an array containing [`TextLayout`](text#textlayout) object corresponded to every rendered text line.
+
+#### Example
+
+```js
+{
+ lines: [
+ TextLayout,
+ TextLayout,
+ // ...
+ ];
+ target: 1127;
+}
+```
+
+#### Properties
+
+| Name | Type | Optional | Description |
+| ------ | --------------------------------------- | -------- | ----------------------------------------------------- |
+| lines | array of [TextLayout](text#textlayout)s | No | Provides the TextLayout data for every rendered line. |
+| target | number | No | The node id of the element. |
diff --git a/docs/textinput.md b/docs/textinput.md
new file mode 100644
index 000000000..22ae600d6
--- /dev/null
+++ b/docs/textinput.md
@@ -0,0 +1,784 @@
+---
+id: textinput
+title: TextInput
+---
+
+A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.
+
+The most basic use case is to plop down a `TextInput` and subscribe to the `onChangeText` events to read the user input. There are also other events, such as `onSubmitEditing` and `onFocus` that can be subscribed to. A minimal example:
+
+```SnackPlayer name=TextInput%20Example
+import React from 'react';
+import {StyleSheet, TextInput} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TextInputExample = () => {
+ const [text, onChangeText] = React.useState('Useless Text');
+ const [number, onChangeNumber] = React.useState('');
+
+ return (
+
+
+
+
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ input: {
+ height: 40,
+ margin: 12,
+ borderWidth: 1,
+ padding: 10,
+ },
+});
+
+export default TextInputExample;
+```
+
+Two methods exposed via the native element are `.focus()` and `.blur()` that will focus or blur the TextInput programmatically.
+
+Note that some props are only available with `multiline={true/false}`. Additionally, border styles that apply to only one side of the element (e.g., `borderBottomColor`, `borderLeftWidth`, etc.) will not be applied if `multiline=true`. To achieve the same effect, you can wrap your `TextInput` in a `View`:
+
+```SnackPlayer name=Multiline%20TextInput%20Example
+import React from 'react';
+import {TextInput, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const MultilineTextInputExample = () => {
+ const [value, onChangeText] = React.useState('Useless Multiline Placeholder');
+
+ // If you type something in the text box that is a color,
+ // the background will change to that color.
+ return (
+
+
+ onChangeText(text)}
+ value={value}
+ style={styles.textInput}
+ />
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ borderBottomColor: '#000',
+ borderBottomWidth: 1,
+ },
+ textInput: {
+ padding: 10,
+ },
+});
+
+export default MultilineTextInputExample;
+```
+
+---
+
+# Reference
+
+## Props
+
+### [View Props](view.md#props)
+
+Inherits [View Props](view.md#props).
+
+---
+
+### `allowFontScaling`
+
+Specifies whether fonts should scale to respect Text Size accessibility settings. The default is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `autoCapitalize`
+
+Tells `TextInput` to automatically capitalize certain characters. This property is not supported by some keyboard types such as `name-phone-pad`.
+
+- `characters`: all characters.
+- `words`: first letter of each word.
+- `sentences`: first letter of each sentence (_default_).
+- `none`: don't auto capitalize anything.
+
+| Type |
+| ------------------------------------------------ |
+| enum('none', 'sentences', 'words', 'characters') |
+
+---
+
+### `autoComplete`
+
+Specifies autocomplete hints for the system, so it can provide autofill.
+
+The following values work across platforms:
+
+- `additional-name`
+- `address-line1`
+- `address-line2`
+- `cc-number`
+- `country`
+- `current-password`
+- `email`
+- `family-name`
+- `given-name`
+- `honorific-prefix`
+- `honorific-suffix`
+- `name`
+- `new-password`
+- `off`
+- `one-time-code`
+- `postal-code`
+- `street-address`
+- `tel`
+- `username`
+
+| Type |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| enum('additional-name', 'address-line1', 'address-line2', 'birthdate-day', 'birthdate-full', 'birthdate-month', 'birthdate-year', 'cc-csc', 'cc-exp', 'cc-exp-day', 'cc-exp-month', 'cc-exp-year', 'cc-number', 'country', 'current-password', 'email', 'family-name', 'given-name', 'honorific-prefix', 'honorific-suffix', 'name', 'new-password', 'off', 'one-time-code', 'postal-code', 'street-address', 'tel', 'username', 'cc-family-name', 'cc-given-name', 'cc-middle-name', 'cc-name', 'cc-type', 'nickname', 'organization', 'organization-title', 'url', 'gender', 'name-family', 'name-given', 'name-middle', 'name-middle-initial', 'name-prefix', 'name-suffix', 'password', 'password-new', 'postal-address', 'postal-address-country', 'postal-address-extended', 'postal-address-extended-postal-code', 'postal-address-locality', 'postal-address-region', 'sms-otp', 'tel-country-code', 'tel-device', 'tel-national', 'username-new') |
+
+---
+
+### `autoCorrect`
+
+If `false`, disables auto-correct. The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `autoFocus`
+
+If `true`, focuses the input. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `caretHidden`
+
+If `true`, caret is hidden. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `clearButtonMode`
+
+When the clear button should appear on the right side of the text view. This property is supported only for single-line TextInput component. The default value is `never`.
+
+| Type |
+| ---------------------------------------------------------- |
+| enum('never', 'while-editing', 'unless-editing', 'always') |
+
+---
+
+### `clearTextOnFocus`
+
+If `true`, clears the text field automatically when editing begins.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `contextMenuHidden`
+
+If `true`, context menu is hidden. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `dataDetectorTypes`
+
+Determines the types of data converted to clickable URLs in the text input. Only valid if `multiline={true}` and `editable={false}`. By default no data types are detected.
+
+You can provide one type or an array of many types.
+
+Possible values for `dataDetectorTypes` are:
+
+- `'phoneNumber'`
+- `'link'`
+- `'address'`
+- `'calendarEvent'`
+- `'none'`
+- `'all'`
+
+| Type |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all'), ,array of enum('phoneNumber', 'link', 'address', 'calendarEvent', 'none', 'all') |
+
+---
+
+### `defaultValue`
+
+Provides an initial value that will change when the user starts typing. Useful for use-cases where you do not want to deal with listening to events and updating the value prop to keep the controlled state in sync.
+
+| Type |
+| ------ |
+| string |
+
+---
+
+### `editable`
+
+If `false`, text is not editable. The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `enterKeyHint`
+
+Determines what text should be shown to the return key. Has precedence over the `returnKeyType` prop.
+
+The following values work across platforms:
+
+- `enter`
+- `done`
+- `next`
+- `search`
+- `send`
+
+| Type |
+| ----------------------------------------------------------- |
+| enum('enter', 'done', 'next', 'previous', 'search', 'send') |
+
+---
+
+### `inputMode`
+
+Works like the `inputmode` attribute in HTML, it determines which keyboard to open, e.g. `numeric` and has precedence over `keyboardType`.
+
+Support the following values:
+
+- `none`
+- `text`
+- `decimal`
+- `numeric`
+- `tel`
+- `search`
+- `email`
+- `url`
+
+| Type |
+| --------------------------------------------------------------------------- |
+| enum('decimal', 'email', 'none', 'numeric', 'search', 'tel', 'text', 'url') |
+
+---
+
+### `keyboardType`
+
+Determines which keyboard to open, e.g.`numeric`.
+
+See screenshots of all the types [here](https://lefkowitz.me/2018/04/30/visual-guide-to-react-native-textinput-keyboardtype-options/).
+
+The following values work across platforms:
+
+- `default`
+- `number-pad`
+- `decimal-pad`
+- `numeric`
+- `email-address`
+- `phone-pad`
+- `url`
+
+
+| Type |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| enum('default', 'email-address', 'numeric', 'phone-pad', 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', 'visible-password') |
+
+---
+
+### `maxFontSizeMultiplier`
+
+Specifies largest possible scale a font can reach when `allowFontScaling` is enabled. Possible values:
+
+- `null/undefined` (default): inherit from the parent node or the global default (0)
+- `0`: no max, ignore parent/global default
+- `>= 1`: sets the `maxFontSizeMultiplier` of this node to this value
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `maxLength`
+
+Limits the maximum number of characters that can be entered. Use this instead of implementing the logic in JS to avoid flicker.
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `multiline`
+
+If `true`, the text input can be multiple lines. The default value is `false`.
+
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `numberOfLines`
+
+
+Sets the maximum number of lines for a `TextInput`. Use it with multiline set to `true` to be able to fill the lines.
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `onBlur`
+
+Callback that is called when the text input is blurred.
+
+> Note: If you are attempting to access the `text` value from `nativeEvent` keep in mind that the resulting value you get can be `undefined` which can cause unintended errors. If you are trying to find the last value of TextInput, you can use the [`onEndEditing`](textinput#onendediting) event, which is fired upon completion of editing.
+
+| Type |
+| -------- |
+| function |
+
+---
+
+### `onChange`
+
+Callback that is called when the text input's text changes.
+
+| Type |
+| ----------------------------------------------------- |
+| (`{nativeEvent: {eventCount, target, text}}`) => void |
+
+---
+
+### `onChangeText`
+
+Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler.
+
+| Type |
+| -------- |
+| function |
+
+---
+
+### `onContentSizeChange`
+
+Callback that is called when the text input's content size changes.
+
+Only called for multiline text inputs.
+
+| Type |
+| ---------------------------------------------------------- |
+| (`{nativeEvent: {contentSize: {width, height} }}`) => void |
+
+---
+
+### `onEndEditing`
+
+Callback that is called when text input ends.
+
+| Type |
+| -------- |
+| function |
+
+---
+
+### `onPressIn`
+
+Callback that is called when a touch is engaged.
+
+| Type |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onPressOut`
+
+Callback that is called when a touch is released.
+
+| Type |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onFocus`
+
+Callback that is called when the text input is focused.
+
+| Type |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
+
+---
+
+### `onKeyPress`
+
+Callback that is called when a key is pressed. This will be called with object where `keyValue` is `'Enter'` or `'Backspace'` for respective keys and the typed-in character otherwise including `' '` for space. Fires before `onChange` callbacks.
+
+| Type |
+| ------------------------------------------- |
+| (`{nativeEvent: {key: keyValue} }`) => void |
+
+---
+
+### `onLayout`
+
+Invoked on mount and on layout changes.
+
+| Type |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
+
+---
+
+### `onScroll`
+
+Invoked on content scroll.
+
+| Type |
+| --------------------------------------------------- |
+| (`{nativeEvent: {contentOffset: {x, y} }}`) => void |
+
+---
+
+### `onSelectionChange`
+
+Callback that is called when the text input selection is changed.
+
+| Type |
+| ----------------------------------------------------- |
+| (`{nativeEvent: {selection: {start, end} }}`) => void |
+
+---
+
+### `onSubmitEditing`
+
+Callback that is called when the text input's submit button is pressed.
+
+| Type |
+| ----------------------------------------------------- |
+| (`{nativeEvent: {text, eventCount, target}}`) => void |
+
+
+---
+
+### `placeholder`
+
+The string that will be rendered before text input has been entered.
+
+| Type |
+| ------ |
+| string |
+
+---
+
+### `placeholderTextColor`
+
+The text color of the placeholder string.
+
+| Type |
+| ------------------ |
+| [color]() |
+
+---
+
+### `readOnly`
+
+If `true`, text is not editable. The default value is `false`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `returnKeyType`
+
+Determines how the return key should look.
+
+_Cross platform_
+
+The following values work across platforms:
+
+- `done`
+- `go`
+- `next`
+- `search`
+- `send`
+
+
+| Type |
+| --------------------------------------------------------------------------------------------------------------------------------- |
+| enum('done', 'go', 'next', 'search', 'send', 'none', 'previous', 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo') |
+
+---
+
+### `secureTextEntry`
+
+If `true`, the text input obscures the text entered so that sensitive text like passwords stay secure. The default value is `false`. Does not work with `multiline={true}`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `selection`
+
+The start and end of the text input's selection. Set start and end to the same value to position the cursor.
+
+| Type |
+| ------------------------------------- |
+| object: `{start: number,end: number}` |
+
+---
+
+### `selectionColor`
+
+The highlight, selection handle and cursor color of the text input.
+
+| Type |
+| ------------------ |
+| [color]() |
+
+---
+
+### `selectTextOnFocus`
+
+If `true`, all text will automatically be selected on focus.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `showSoftInputOnFocus`
+
+When `false`, it will prevent the soft keyboard from showing when the field is focused. The default value is `true`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `spellCheck`
+
+If `false`, disables spell-check style (i.e. red underlines). The default value is inherited from `autoCorrect`.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `submitBehavior`
+
+When the return key is pressed,
+
+For single line inputs:
+
+- `'newline'` defaults to `'blurAndSubmit'`
+- `undefined` defaults to `'blurAndSubmit'`
+
+For multiline inputs:
+
+- `'newline'` adds a newline
+- `undefined` defaults to `'newline'`
+
+For both single line and multiline inputs:
+
+- `'submit'` will only send a submit event and not blur the input
+- `'blurAndSubmit`' will both blur the input and send a submit event
+
+| Type |
+| ------------------------------------------ |
+| enum('submit', 'blurAndSubmit', 'newline') |
+
+---
+
+### `textAlign`
+
+Align the input text to the left, center, or right sides of the input field.
+
+Possible values for `textAlign` are:
+
+- `left`
+- `center`
+- `right`
+
+| Type |
+| ------------------------------- |
+| enum('left', 'center', 'right') |
+
+---
+
+### `textContentType`
+
+Give the keyboard and the system information about the expected semantic meaning for the content that users enter.
+
+:::note
+[`autoComplete`](#autocomplete), provides the same functionality and is available for all platforms. You can use [`Platform.select`]() for differing platform behaviors.
+
+Avoid using both `textContentType` and `autoComplete`. For backwards compatibility, `textContentType` takes precedence when both properties are set.
+:::
+
+You can set `textContentType` to `username` or `password` to enable autofill of login details from the device keychain.
+
+`newPassword` can be used to indicate a new password input the user may want to save in the keychain, and `oneTimeCode` can be used to indicate that a field can be autofilled by a code arriving in an SMS.
+
+To disable autofill, set `textContentType` to `none`.
+
+Possible values for `textContentType` are:
+
+- `none`
+- `addressCity`
+- `addressCityAndState`
+- `addressState`
+- `countryName`
+- `creditCardNumber`
+- `emailAddress`
+- `familyName`
+- `fullStreetAddress`
+- `givenName`
+- `jobTitle`
+- `location`
+- `middleName`
+- `name`
+- `namePrefix`
+- `nameSuffix`
+- `newPassword`
+- `nickname`
+- `oneTimeCode`
+- `organizationName`
+- `password`
+- `postalCode`
+- `streetAddressLine1`
+- `streetAddressLine2`
+- `sublocality`
+- `telephoneNumber`
+- `URL`
+- `username`
+
+| Type |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| enum('none', 'addressCity', 'addressCityAndState', 'addressState', 'birthdate', 'birthdateDay', 'birthdateMonth', 'birthdateYear', 'countryName', 'creditCardExpiration', 'creditCardExpirationMonth', 'creditCardExpirationYear', 'creditCardFamilyName', 'creditCardGivenName', 'creditCardMiddleName', 'creditCardName', 'creditCardNumber', 'creditCardSecurityCode', 'creditCardType', 'emailAddress', 'familyName', 'fullStreetAddress', 'givenName', 'jobTitle', 'location', 'middleName', 'name', 'namePrefix', 'nameSuffix', 'newPassword', 'nickname', 'oneTimeCode', 'organizationName', 'password', 'postalCode', 'streetAddressLine1', 'streetAddressLine2', 'sublocality', 'telephoneNumber', 'URL', 'username') |
+
+---
+
+### `style`
+
+Note that not all Text styles are supported, an incomplete list of what is not supported includes:
+
+- `borderLeftWidth`
+- `borderTopWidth`
+- `borderRightWidth`
+- `borderBottomWidth`
+- `borderTopLeftRadius`
+- `borderTopRightRadius`
+- `borderBottomRightRadius`
+- `borderBottomLeftRadius`
+
+[Styles]()
+
+| Type |
+| --------------------- |
+| [Text](text.md#style) |
+
+---
+
+### `value`
+
+The value to show for the text input. `TextInput` is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses, this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set `editable={false}`, or set/update `maxLength` to prevent unwanted edits without flicker.
+
+| Type |
+| ------ |
+| string |
+
+
+## Methods
+
+### `.focus()`
+
+```tsx
+focus();
+```
+
+Makes the native input request focus.
+
+### `.blur()`
+
+```tsx
+blur();
+```
+
+Makes the native input lose focus.
+
+### `clear()`
+
+```tsx
+clear();
+```
+
+Removes all text from the `TextInput`.
+
+---
+
+### `isFocused()`
+
+```tsx
+isFocused(): boolean;
+```
+
+Returns `true` if the input is currently focused; `false` otherwise.
+
diff --git a/docs/touchablehighlight.md b/docs/touchablehighlight.md
new file mode 100644
index 000000000..5e6ab708f
--- /dev/null
+++ b/docs/touchablehighlight.md
@@ -0,0 +1,139 @@
+---
+id: touchablehighlight
+title: TouchableHighlight
+---
+
+A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view.
+
+The underlay comes from wrapping the child in a new View, which can affect layout, and sometimes cause unwanted visual artifacts if not used correctly, for example if the backgroundColor of the wrapped view isn't explicitly set to an opaque color.
+
+TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.
+
+```tsx
+function MyComponent(props: MyComponentProps) {
+ return (
+
+ My Component
+
+ );
+}
+
+ alert('Pressed!')}>
+
+;
+```
+
+## Example
+
+```SnackPlayer name=TouchableHighlight%20Example
+import React, {useState} from 'react';
+import {StyleSheet, Text, TouchableHighlight, View} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const TouchableHighlightExample = () => {
+ const [count, setCount] = useState(0);
+ const onPress = () => setCount(count + 1);
+
+ return (
+
+
+
+
+ Touch Here
+
+
+
+ {count || null}
+
+
+
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: 'center',
+ paddingHorizontal: 10,
+ },
+ button: {
+ alignItems: 'center',
+ backgroundColor: '#DDDDDD',
+ padding: 10,
+ },
+ countContainer: {
+ alignItems: 'center',
+ padding: 10,
+ },
+ countText: {
+ color: '#FF00FF',
+ },
+});
+
+export default TouchableHighlightExample;
+```
+
+---
+
+# Reference
+
+---
+
+### `activeOpacity`
+
+Determines what the opacity of the wrapped view should be when touch is active. The value should be between 0 and 1. Defaults to 0.85. Requires `underlayColor` to be set.
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `onHideUnderlay`
+
+Called immediately after the underlay is hidden.
+
+| Type |
+| -------- |
+| function |
+
+---
+
+### `onShowUnderlay`
+
+Called immediately after the underlay is shown.
+
+| Type |
+| -------- |
+| function |
+
+---
+
+### `style`
+
+| Type |
+| ---------- |
+| View.style |
+
+---
+
+### `underlayColor`
+
+The color of the underlay that will show through when the touch is active.
+
+| Type |
+| ------------------ |
+| [color]() |
+
+---
+
+### `testOnly_pressed`
+
+Handy for snapshot tests.
+
+| Type |
+| ---- |
+| bool |
diff --git a/docs/view-style-props.md b/docs/view-style-props.md
new file mode 100644
index 000000000..13521da4a
--- /dev/null
+++ b/docs/view-style-props.md
@@ -0,0 +1,423 @@
+---
+id: view-style-props
+title: View Style Props
+---
+
+### Example
+
+```SnackPlayer name=ViewStyleProps
+import React from 'react';
+import {View, StyleSheet} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const App = () => (
+
+
+
+
+
+
+
+);
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ justifyContent: 'space-between',
+ padding: 20,
+ margin: 10,
+ },
+ top: {
+ flex: 0.3,
+ backgroundColor: 'grey',
+ borderWidth: 5,
+ borderTopLeftRadius: 20,
+ borderTopRightRadius: 20,
+ },
+ middle: {
+ flex: 0.3,
+ backgroundColor: 'beige',
+ borderWidth: 5,
+ },
+ bottom: {
+ flex: 0.3,
+ backgroundColor: 'pink',
+ borderWidth: 5,
+ borderBottomLeftRadius: 20,
+ borderBottomRightRadius: 20,
+ },
+});
+
+export default App;
+```
+
+# Reference
+
+## Props
+
+### `backfaceVisibility`
+
+| Type |
+| ----------------------------- |
+| enum(`'visible'`, `'hidden'`) |
+
+---
+
+### `backgroundColor`
+
+| Type |
+| ------------------ |
+| [color]() |
+
+---
+
+### `borderBottomColor`
+
+| Type |
+| ------------------ |
+| [color]() |
+
+---
+
+### `borderBottomEndRadius`
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `borderBottomLeftRadius`
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `borderBottomRightRadius`
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `borderBottomStartRadius`
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `borderStartEndRadius`
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `borderStartStartRadius`
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `borderEndEndRadius`
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `borderEndStartRadius`
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `borderBottomWidth`
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `borderColor`
+
+| Type |
+| ------------------ |
+| [color]() |
+
+---
+
+### `borderCurve` iOS
+
+On iOS 13+, it is possible to change the corner curve of borders.
+
+| Type |
+| ---------------------------------- |
+| enum(`'circular'`, `'continuous'`) |
+
+---
+
+### `borderEndColor`
+
+| Type |
+| ------------------ |
+| [color]() |
+
+---
+
+### `borderLeftColor`
+
+| Type |
+| ------------------ |
+| [color]() |
+
+---
+
+### `borderLeftWidth`
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `borderRadius`
+
+If the rounded border is not visible, try applying `overflow: 'hidden'` as well.
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `borderRightColor`
+
+| Type |
+| ------------------ |
+| [color]() |
+
+---
+
+### `borderRightWidth`
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `borderStartColor`
+
+| Type |
+| ------------------ |
+| [color]() |
+
+---
+
+### `borderStyle`
+
+| Type |
+| --------------------------------------- |
+| enum(`'solid'`, `'dotted'`, `'dashed'`) |
+
+---
+
+### `borderTopColor`
+
+| Type |
+| ------------------ |
+| [color]() |
+
+---
+
+### `borderTopEndRadius`
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `borderTopLeftRadius`
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `borderTopRightRadius`
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `borderTopStartRadius`
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `borderTopWidth`
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `borderWidth`
+
+| Type |
+| ------ |
+| number |
+
+### `boxShadow`
+
+:::note
+`boxShadow` is only available on the [New Architecture](). Outset shadows are only supported on **Android 9+**. Inset shadows are only supported on **Android 10+**.
+:::
+
+
+These shadows can be composed together so that a single `boxShadow` can be comprised of multiple different shadows.
+
+`boxShadow` takes either a string which mimics the [web syntax]() or an array of [BoxShadowValue]() objects.
+| Type |
+| --------------------------- |
+| array of BoxShadowValue ojects \| string |
+
+### `cursor` iOS
+
+On iOS 17+, Setting to `pointer` allows hover effects when a pointer (such as a trackpad or stylus on iOS, or the users' gaze on visionOS) is over the view.
+
+| Type |
+| --------------------------- |
+| enum(`'auto'`, `'pointer'`) |
+
+---
+
+### `elevation` Android
+
+Sets the elevation of a view, using Android's underlying [elevation API](). This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions.
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `filter`
+
+:::note
+`filter` is only available on the [New Architecture]()
+:::
+
+Adds a graphical filter to the `View`. This filter is comprised of any number of _filter functions_, which each represent some atomic change to the graphical composition of the `View`. The complete list of valid filter functions is defined below. `filter` will apply to descendants of the `View` as well as the `View` itself. `filter` implies `overflow: hidden`, so descendants will be clipped to fit the bounds of the `View`.
+
+The following filter functions work across all platforms:
+
+- `brightness`: Changes the brightness of the `View`. Takes a non-negative number or percentage.
+- `opacity`: Changes the opacity, or alpha, of the `View`. Takes a non-negative number or percentage.
+
+:::note
+Due to issues with performance and spec compliance, these are the only two filter functions available on iOS. There are plans to explore some potential workarounds using SwiftUI instead of UIKit for this implementation.
+:::
+
+:::note
+`blur` and `dropShadow` are only supported on **Android 12+**
+
+| Type |
+| ------ |
+| array of objects: `{brightness: number\|string}`, `{opacity: number\|string}`, `{blur: number\|string}`, `{contrast: number\|string}`, `{dropShadow: DropShadowValue\|string}`, `{grayscale: number\|string}`, `{hueRotate: number\|string}`, `{invert: number\|string}`, `{sepia: number\|string}`, `{saturate: number\|string}` or string|
+
+---
+
+### `opacity`
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `outlineColor`
+
+:::note
+`outlineColor` is only available on the [New Architecture]()
+:::
+
+
+| Type |
+| ------------------ |
+| [color]() |
+
+---
+
+### `outlineOffset`
+
+:::note
+`outlineOffset` is only available on the [New Architecture]()
+:::
+
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `outlineStyle`
+
+:::note
+`outlineStyle` is only available on the [New Architecture]()
+:::
+
+
+| Type |
+| --------------------------------------- |
+| enum(`'solid'`, `'dotted'`, `'dashed'`) |
+
+---
+
+### `outlineWidth`
+
+:::note
+`outlineWidth` is only available on the [New Architecture]()
+:::
+
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `pointerEvents`
+
+Controls whether the `View` can be the target of touch events.
+
+- `'auto'`: The View can be the target of touch events.
+- `'none'`: The View is never the target of touch events.
+- `'box-none'`: The View is never the target of touch events but its subviews can be.
+- `'box-only'`: The view can be the target of touch events but its subviews cannot be.
+
+| Type |
+| ----------------------------------------------------- |
+| enum(`'auto'`, `'box-none'`, `'box-only'`, `'none'` ) |
diff --git a/docs/view.md b/docs/view.md
new file mode 100644
index 000000000..ebef35102
--- /dev/null
+++ b/docs/view.md
@@ -0,0 +1,495 @@
+---
+id: view
+title: View
+---
+
+The most fundamental component for building a UI, `View` is a container that supports layout. `View` maps directly to the native view equivalent on whatever platform React Native is running on, whether that is a `UIView`, ``, `android.view`, etc.
+
+`View` is designed to be nested inside other views and can have 0 to many children of any type.
+
+This example creates a `View` that wraps two boxes with color and a text component in a row with padding.
+
+```SnackPlayer name=View%20Example
+import React from 'react';
+import {View, Text} from 'react-native';
+import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
+
+const ViewBoxesWithColorAndText = () => {
+ return (
+
+
+
+
+ Hello World!
+
+
+ );
+};
+
+export default ViewBoxesWithColorAndText;
+```
+
+> `View`s are designed to be used with [`StyleSheet`]() for clarity and performance, although inline styles are also supported.
+
+### Synthetic Touch Events
+
+For `View` responder props (e.g., `onResponderMove`), the synthetic touch event passed to them are in form of [PressEvent]().
+
+---
+
+# Reference
+
+## Props
+
+---
+
+### `accessibilityActions`
+
+Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The `accessibilityActions` property should contain a list of action objects. Each action object should contain the field name and label.
+
+
+| Type |
+| ----- |
+| array |
+
+---
+
+### `accessibilityHint`
+
+An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
+
+| Type |
+| ------ |
+| string |
+
+---
+
+### `accessibilityLabel`
+
+Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the `Text` nodes separated by space.
+
+| Type |
+| ------ |
+| string |
+
+---
+
+### `accessibilityRole`
+
+`accessibilityRole` communicates the purpose of a component to the user of an assistive technology.
+
+`accessibilityRole` can be one of the following:
+
+- `'none'` - Used when the element has no role.
+- `'button'` - Used when the element should be treated as a button.
+- `'link'` - Used when the element should be treated as a link.
+- `'search'` - Used when the text field element should also be treated as a search field.
+- `'image'` - Used when the element should be treated as an image. Can be combined with button or link, for example.
+- `'keyboardkey'` - Used when the element acts as a keyboard key.
+- `'text'` - Used when the element should be treated as static text that cannot change.
+- `'adjustable'` - Used when an element can be "adjusted" (e.g. a slider).
+- `'imagebutton'` - Used when the element should be treated as a button and is also an image.
+- `'header'` - Used when an element acts as a header for a content section (e.g. the title of a navigation bar).
+- `'summary'` - Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches.
+- `'alert'` - Used when an element contains important text to be presented to the user.
+- `'checkbox'` - Used when an element represents a checkbox which can be checked, unchecked, or have mixed checked state.
+- `'combobox'` - Used when an element represents a combo box, which allows the user to select among several choices.
+- `'menu'` - Used when the component is a menu of choices.
+- `'menubar'` - Used when a component is a container of multiple menus.
+- `'menuitem'` - Used to represent an item within a menu.
+- `'progressbar'` - Used to represent a component which indicates progress of a task.
+- `'radio'` - Used to represent a radio button.
+- `'radiogroup'` - Used to represent a group of radio buttons.
+- `'scrollbar'` - Used to represent a scroll bar.
+- `'spinbutton'` - Used to represent a button which opens a list of choices.
+- `'switch'` - Used to represent a switch which can be turned on and off.
+- `'tab'` - Used to represent a tab.
+- `'tablist'` - Used to represent a list of tabs.
+- `'timer'` - Used to represent a timer.
+- `'toolbar'` - Used to represent a tool bar (a container of action buttons or components).
+
+| Type |
+| ------ |
+| string |
+
+---
+
+### `accessible`
+
+When `true`, indicates that the view is an accessibility element. By default, all the touchable elements are accessible.
+
+---
+
+### `aria-busy`
+
+Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
+
+| Type | Default |
+| ------- | ------- |
+| boolean | false |
+
+---
+
+### `aria-checked`
+
+Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.
+
+| Type | Default |
+| ---------------- | ------- |
+| boolean, 'mixed' | false |
+
+---
+
+### `aria-disabled`
+
+Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
+
+| Type | Default |
+| ------- | ------- |
+| boolean | false |
+
+---
+
+### `aria-expanded`
+
+Indicates whether an expandable element is currently expanded or collapsed.
+
+| Type | Default |
+| ------- | ------- |
+| boolean | false |
+
+---
+
+### `aria-hidden`
+
+Indicates whether the accessibility elements contained within this accessibility element are hidden.
+
+For example, in a window that contains sibling views `A` and `B`, setting `aria-hidden` to `true` on view `B` causes VoiceOver to ignore the elements in the view `B`.
+
+| Type | Default |
+| ------- | ------- |
+| boolean | false |
+
+---
+
+### `aria-label`
+
+Defines a string value that labels an interactive element.
+
+| Type |
+| ------ |
+| string |
+
+---
+
+### `aria-selected`
+
+Indicates whether a selectable element is currently selected or not.
+
+| Type |
+| ------- |
+| boolean |
+
+### `aria-valuemax`
+
+Represents the maximum value for range-based components, such as sliders and progress bars. Has precedence over the `max` value in the `accessibilityValue` prop.
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `aria-valuemin`
+
+Represents the minimum value for range-based components, such as sliders and progress bars. Has precedence over the `min` value in the `accessibilityValue` prop.
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `aria-valuenow`
+
+Represents the current value for range-based components, such as sliders and progress bars. Has precedence over the `now` value in the `accessibilityValue` prop.
+
+| Type |
+| ------ |
+| number |
+
+---
+
+### `aria-valuetext`
+
+Represents the textual description of the component. Has precedence over the `text` value in the `accessibilityValue` prop.
+
+| Type |
+| ------ |
+| string |
+
+---
+
+### `collapsable`
+
+Views that are only used to layout their children or otherwise don't draw anything may be automatically removed from the native hierarchy as an optimization. Set this property to `false` to disable this optimization and ensure that this `View` exists in the native view hierarchy.
+
+| Type | Default |
+| ------- | ------- |
+| boolean | true |
+
+---
+
+### `collapsableChildren`
+
+Setting to false prevents direct children of the view from being removed from the native view hierarchy, similar to the effect of setting `collapsable={false}` on each child.
+
+| Type | Default |
+| ------- | ------- |
+| boolean | true |
+
+---
+
+### `hitSlop`
+
+This defines how far a touch event can start away from the view. Typical interface guidelines recommend touch targets that are at least 30 - 40 points/density-independent pixels.
+
+For example, if a touchable view has a height of 20 the touchable height can be extended to 40 with `hitSlop={{top: 10, bottom: 10, left: 0, right: 0}}`
+
+> The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.
+
+| Type |
+| -------------------------------------------------------------------- |
+| object: `{top: number, left: number, bottom: number, right: number}` |
+
+---
+
+### `id`
+
+Used to locate this view from native classes. Has precedence over `nativeID` prop.
+
+> This disables the 'layout-only view removal' optimization for this view!
+
+| Type |
+| ------ |
+| string |
+
+---
+
+### `nativeID`
+
+Used to locate this view from native classes.
+
+> This disables the 'layout-only view removal' optimization for this view!
+
+| Type |
+| ------ |
+| string |
+
+---
+
+### `needsOffscreenAlphaCompositing`
+
+Whether this `View` needs to rendered offscreen and composited with an alpha in order to preserve 100% correct colors and blending behavior. The default (`false`) falls back to drawing the component and its children with an alpha applied to the paint used to draw each element instead of rendering the full component offscreen and compositing it back with an alpha value. This default may be noticeable and undesired in the case where the `View` you are setting an opacity on has multiple overlapping elements (e.g. multiple overlapping `View`s, or text and a background).
+
+Rendering offscreen to preserve correct alpha behavior is extremely expensive and hard to debug for non-native developers, which is why it is not turned on by default. If you do need to enable this property for an animation, consider combining it with renderToHardwareTextureAndroid if the view **contents** are static (i.e. it doesn't need to be redrawn each frame). If that property is enabled, this View will be rendered off-screen once, saved in a hardware texture, and then composited onto the screen with an alpha each frame without having to switch rendering targets on the GPU.
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `onAccessibilityAction`
+
+Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.
+
+
+| Type |
+| -------- |
+| function |
+
+---
+
+### `onLayout`
+
+Invoked on mount and on layout changes.
+
+This event is fired immediately once the layout has been calculated, but the new layout may not yet be reflected on the screen at the time the event is received, especially if a layout animation is in progress.
+
+| Type |
+| -------------------------------------------------------- |
+| `md ({nativeEvent: [LayoutEvent](layoutevent)}) => void` |
+
+---
+
+### `onMoveShouldSetResponder`
+
+Does this view want to "claim" touch responsiveness? This is called for every touch move on the `View` when it is not the responder.
+
+| Type |
+| --------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
+
+---
+
+### `onMoveShouldSetResponderCapture`
+
+If a parent `View` wants to prevent a child `View` from becoming responder on a move, it should have this handler which returns `true`.
+
+| Type |
+| --------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
+
+---
+
+### `onResponderGrant`
+
+The View is now responding for touch events. This is the time to highlight and show the user what is happening.
+
+| Type |
+| ----------------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void ｜ boolean` |
+
+---
+
+### `onResponderMove`
+
+The user is moving their finger.
+
+| Type |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderReject`
+
+Another responder is already active and will not release it to that `View` asking to be the responder.
+
+| Type |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderRelease`
+
+Fired at the end of the touch.
+
+| Type |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderTerminate`
+
+
+| Type |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onResponderTerminationRequest`
+
+Some other `View` wants to become responder and is asking this `View` to release its responder. Returning `true` allows its release.
+
+| Type |
+| ------------------------------------------------------ |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => void` |
+
+---
+
+### `onStartShouldSetResponder`
+
+Does this view want to become responder on the start of a touch?
+
+| Type |
+| --------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
+
+---
+
+### `onStartShouldSetResponderCapture`
+
+If a parent `View` wants to prevent a child `View` from becoming responder on a touch start, it should have this handler which returns `true`.
+
+| Type |
+| --------------------------------------------------------- |
+| `md ({nativeEvent: [PressEvent](pressevent)}) => boolean` |
+
+---
+
+### `pointerEvents`
+
+Controls whether the `View` can be the target of touch events.
+
+- `'auto'`: The View can be the target of touch events.
+- `'none'`: The View is never the target of touch events.
+- `'box-none'`: The View is never the target of touch events but its subviews can be. It behaves like if the view had the following classes in CSS:
+
+```css
+.box-none {
+ pointer-events: none;
+}
+.box-none * {
+ pointer-events: auto;
+}
+```
+
+- `'box-only'`: The view can be the target of touch events but its subviews cannot be. It behaves like if the view had the following classes in CSS:
+
+```css
+.box-only {
+ pointer-events: auto;
+}
+.box-only * {
+ pointer-events: none;
+}
+```
+
+| Type |
+| -------------------------------------------- |
+| enum('box-none', 'none', 'box-only', 'auto') |
+
+---
+
+### `removeClippedSubviews`
+
+This is a reserved performance property exposed by `RCTView` and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound. The subviews must also have `overflow: hidden`, as should the containing view (or one of its superviews).
+
+| Type |
+| ---- |
+| bool |
+
+---
+
+### `role`
+
+`role` communicates the purpose of a component to the user of an assistive technology. Has precedence over the [`accessibilityRole`](view#accessibilityrole) prop.
+
+| Type |
+| -------------------------- |
+| [Role]() |
+
+---
+
+### `style`
+
+| Type |
+| ------------------------------ |
+| [View Style](view-style-props) |
+
+---
+
+### `testID`
+
+Used to locate this view in end-to-end tests.
+
+> This disables the 'layout-only view removal' optimization for this view!
+
+| Type |
+| ------ |
+| string |
diff --git a/website/sidebars.json b/website/sidebars.json
index 644a8f558..ccd68c838 100644
--- a/website/sidebars.json
+++ b/website/sidebars.json
@@ -56,7 +56,22 @@
]
},
"apis": {
- "Components (Windows)": [
+ "Windows Components - New Architecture": [
+ "components-and-apis",
+ "activityindicator",
+ "button",
+ "flatlist",
+ "image-component",
+ "modal",
+ "refreshcontrol",
+ "scrollview",
+ "switch",
+ "text",
+ "textinput",
+ "touchablehighlight",
+ "view"
+ ],
+ "Windows Components - Old Architecture": [
"flyout-component",
"glyph-component",
"popup-component",