update TV-related props, improve docs formatting

Simek · Simek · commit 33e45879094d · 2025-09-16T11:08:19.000+02:00
diff --git a/docs/alert.md b/docs/alert.md
@@ -5,7 +5,7 @@ title: Alert
 
 Launches an alert dialog with the specified title and message.
 
-Optionally provide a list of buttons. Tapping any button will fire the respective onPress callback and dismiss the alert. By default, the only button will be an 'OK' button.
+Optionally provide a list of buttons. Tapping any button will fire the respective `onPress` callback and dismiss the alert. By default, the only button will be an 'OK' button.
 
 This is an API that works both on Android and iOS and can show static alerts. Alert that prompts the user to enter some information is available on iOS only.
 
diff --git a/docs/button.md b/docs/button.md
@@ -5,7 +5,7 @@ title: Button
 
 A basic button component that should render nicely on any platform. Supports a minimal level of customization.
 
-If this button doesn't look right for your app, you can build your own button using [Pressable](pressable). For inspiration, look at the [source code for the Button component](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Components/Button.js).
+If this button doesn't look right for your app, you can build your own button using [`Pressable`](pressable). For inspiration, look at the [source code for the `Button` component](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Components/Button.js).
 
 ```tsx
 <Button
@@ -212,7 +212,11 @@ If `true`, disable all interactions for this component.
 
 ---
 
-### `hasTVPreferredFocus` <div className="label tv">TV</div>
+### `hasTVPreferredFocus` <div className="label ios">tvOS</div>
+
+:::warning Deprecated
+Use [`focusable` prop](view#focusable) form `View` instead.
+:::
 
 TV preferred focus.
 
@@ -222,7 +226,7 @@ TV preferred focus.
 
 ---
 
-### `nextFocusDown` <div className="label android">Android</div><div className="label tv">TV</div>
+### `nextFocusDown` <div className="label android">Android TV</div>
 
 Designates the next view to receive focus when the user navigates down. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusDown).
 
@@ -232,7 +236,7 @@ Designates the next view to receive focus when the user navigates down. See the
 
 ---
 
-### `nextFocusForward` <div className="label android">Android</div><div className="label tv">TV</div>
+### `nextFocusForward` <div className="label android">Android TV</div>
 
 Designates the next view to receive focus when the user navigates forward. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusForward).
 
@@ -242,7 +246,7 @@ Designates the next view to receive focus when the user navigates forward. See t
 
 ---
 
-### `nextFocusLeft` <div className="label android">Android</div><div className="label tv">TV</div>
+### `nextFocusLeft` <div className="label android">Android TV</div>
 
 Designates the next view to receive focus when the user navigates left. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusLeft).
 
@@ -252,7 +256,7 @@ Designates the next view to receive focus when the user navigates left. See the
 
 ---
 
-### `nextFocusRight` <div className="label android">Android</div><div className="label tv">TV</div>
+### `nextFocusRight` <div className="label android">Android TV</div>
 
 Designates the next view to receive focus when the user navigates right. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusRight).
 
@@ -262,7 +266,7 @@ Designates the next view to receive focus when the user navigates right. See the
 
 ---
 
-### `nextFocusUp` <div className="label android">Android</div><div className="label tv">TV</div>
+### `nextFocusUp` <div className="label android">Android TV</div>
 
 Designates the next view to receive focus when the user navigates up. See the [Android documentation](https://developer.android.com/reference/android/view/View.html#attr_android:nextFocusUp).
 
diff --git a/docs/debugging.md b/docs/debugging.md
@@ -27,7 +27,7 @@ Alternative (Android): `adb shell input keyevent 82`.
 To open DevTools, either:
 
 - Select "Open DevTools" in the Dev Menu.
-- Press <kbd>j</kbd> from the CLI (`npx react-native start`).
+- Press <kbd>J</kbd> from the CLI (`npx react-native start`).
 
 On first launch, DevTools will open to a welcome panel, along with an open console drawer where you can view logs and interact with the JavaScript runtime. From the top of the window, you can navigate to other panels, including the integrated React Components Inspector and Profiler.
 
diff --git a/docs/drawerlayoutandroid.md b/docs/drawerlayoutandroid.md
@@ -5,7 +5,7 @@ title: DrawerLayoutAndroid
 
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
-React component that wraps the platform `DrawerLayout` (Android only). The Drawer (typically used for navigation) is rendered with `renderNavigationView` and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the `drawerPosition` prop and its width can be set by the `drawerWidth` prop.
+An Android only component that wraps the platform `DrawerLayout`. The Drawer (typically used for navigation) is rendered with `renderNavigationView` and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the `drawerPosition` prop and its width can be set by the `drawerWidth` prop.
 
 ## Example
 
@@ -169,7 +169,7 @@ export default App;
 
 # Reference
 
-## Props
+## Props <div className="label android">Android</div>
 
 ### [View Props](view.md#props)
 
diff --git a/docs/inputaccessoryview.md b/docs/inputaccessoryview.md
@@ -3,7 +3,7 @@ id: inputaccessoryview
 title: InputAccessoryView
 ---
 
-A component which enables customization of the keyboard input accessory view on iOS. The input accessory view is displayed above the keyboard whenever a `TextInput` has focus. This component can be used to create custom toolbars.
+An iOS only component which enables customization of the keyboard input accessory view. The input accessory view is displayed above the keyboard whenever a `TextInput` has focus. This component can be used to create custom toolbars.
 
 To use this component wrap your custom toolbar with the InputAccessoryView component, and set a `nativeID`. Then, pass that `nativeID` as the `inputAccessoryViewID` of whatever `TextInput` you desire. A basic example:
 
@@ -66,7 +66,7 @@ This component can also be used to create sticky text inputs (text inputs which
 
 # Reference
 
-## Props
+## Props <div className="label ios">iOS</div>
 
 ### `backgroundColor`
 
diff --git a/docs/interactionmanager.md b/docs/interactionmanager.md
@@ -5,7 +5,7 @@ title: InteractionManager
 
 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
 
-InteractionManager allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly.
+`InteractionManager` allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly.
 
 Applications can schedule tasks to run after interactions with the following:
 
diff --git a/docs/modal.md b/docs/modal.md
@@ -3,7 +3,7 @@ id: modal
 title: Modal
 ---
 
-The Modal component is a basic way to present content above an enclosing view.
+The `Modal` component is a basic way to present content above an enclosing view.
 
 ## Example
 
diff --git a/docs/pressable.md b/docs/pressable.md
@@ -3,7 +3,7 @@ id: pressable
 title: Pressable
 ---
 
-Pressable is a Core Component wrapper that can detect various stages of press interactions on any of its defined children.
+`Pressable` is a Core Component wrapper that can detect various stages of press interactions on any of its defined children.
 
 ```tsx
 <Pressable onPress={onPressFunction}>
@@ -260,9 +260,9 @@ Ripple effect configuration for the `android_ripple` property.
 
 **Properties:**
 
-| Name       | Type            | Required | Description                                                                                                                                                                                                                                                  |
-| ---------- | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| color      | [color](colors) | No       | Defines the color of the ripple effect.                                                                                                                                                                                                                      |
-| borderless | boolean         | No       | Defines if ripple effect should not include border.                                                                                                                                                                                                          |
-| radius     | number          | No       | Defines the radius of the ripple effect.                                                                                                                                                                                                                     |
-| foreground | boolean         | No       | Set to true to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them. |
+| Name       | Type            | Description                                                                                                                                                                                                                                                    |
+| ---------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| color      | [color](colors) | Defines the color of the ripple effect.                                                                                                                                                                                                                        |
+| borderless | boolean         | Defines if ripple effect should not include border.                                                                                                                                                                                                            |
+| radius     | number          | Defines the radius of the ripple effect.                                                                                                                                                                                                                       |
+| foreground | boolean         | Set to `true` to add the ripple effect to the foreground of the view, instead of the background. This is useful if one of your child views has a background of its own, or you're e.g. displaying images, and you don't want the ripple to be covered by them. |
diff --git a/docs/refreshcontrol.md b/docs/refreshcontrol.md
@@ -3,7 +3,7 @@ id: refreshcontrol
 title: RefreshControl
 ---
 
-This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at `scrollY: 0`, swiping down triggers an `onRefresh` event.
+This component is used inside a `ScrollView` or `ListView` to add pull to refresh functionality. When the `ScrollView` is at `scrollY: 0`, swiping down triggers an `onRefresh` event.
 
 ## Example
 
diff --git a/docs/scrollview.md b/docs/scrollview.md
@@ -3,13 +3,13 @@ id: scrollview
 title: ScrollView
 ---
 
-Component that wraps platform ScrollView while providing integration with touch locking "responder" system.
+Component that wraps platform `ScrollView` while providing integration with touch locking "responder" system.
 
-Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer `{flex: 1}` down the view stack can lead to errors here, which the element inspector makes quick to debug.
+Keep in mind that scroll views must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a `ScrollView`, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer `{flex: 1}` down the view stack can lead to errors here, which the element inspector makes quick to debug.
 
 Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.
 
-`<ScrollView>` vs [`<FlatList>`](flatlist.md) - which one to use?
+#### `<ScrollView>` vs [`<FlatList>`](flatlist.md) - which one to use?
 
 `ScrollView` renders all its react child components at once, but this has a performance downside.
 
diff --git a/docs/systrace.md b/docs/systrace.md
@@ -7,7 +7,7 @@ title: Systrace
 
 ## Example
 
-`Systrace` allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler.
+`Systrace` allows you to mark JavaScript events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler.
 
 ```SnackPlayer name=Systrace%20Example
 import React from 'react';
diff --git a/docs/text.md b/docs/text.md
@@ -3,9 +3,7 @@ id: text
 title: Text
 ---
 
-A React component for displaying text.
-
-`Text` supports nesting, styling, and touch handling.
+A React component for displaying text. `Text` supports nesting, styling, and touch handling.
 
 In the following example, the nested title and body text will inherit the `fontFamily` from `styles.baseText`, but the title provides its own additional styles. The title and body will stack on top of each other on account of the literal newlines:
 
diff --git a/docs/textinput.md b/docs/textinput.md
@@ -1105,22 +1105,16 @@ The value to show for the text input. `TextInput` is a controlled component, whi
 
 ## Methods
 
-### `.focus()`
-
-```tsx
-focus();
-```
-
-Makes the native input request focus.
-
-### `.blur()`
+### `blur()`
 
 ```tsx
 blur();
 ```
 
 Makes the native input lose focus.
 
+---
+
 ### `clear()`
 
 ```tsx
@@ -1131,6 +1125,16 @@ Removes all text from the `TextInput`.
 
 ---
 
+### `focus()`
+
+```tsx
+focus();
+```
+
+Makes the native input request focus.
+
+---
+
 ### `isFocused()`
 
 ```tsx
diff --git a/docs/toastandroid.md b/docs/toastandroid.md
@@ -5,8 +5,8 @@ title: ToastAndroid
 
 React Native's ToastAndroid API exposes the Android platform's ToastAndroid module as a JS module. It provides the method `show(message, duration)` which takes the following parameters:
 
-- _message_ A string with the text to toast
-- _duration_ The duration of the toast—either `ToastAndroid.SHORT` or `ToastAndroid.LONG`
+- **message** - A string with the text to toast
+- **duration** - The duration of the toast, either `ToastAndroid.SHORT` or `ToastAndroid.LONG`
 
 You can alternatively use `showWithGravity(message, duration, gravity)` to specify where the toast appears in the screen's layout. May be `ToastAndroid.TOP`, `ToastAndroid.BOTTOM` or `ToastAndroid.CENTER`.
 
diff --git a/docs/touchablehighlight.md b/docs/touchablehighlight.md
@@ -140,17 +140,21 @@ The color of the underlay that will show through when the touch is active.
 
 ---
 
-### `hasTVPreferredFocus` <div className="label ios">iOS</div>
+### `hasTVPreferredFocus` <div className="label ios">tvOS</div>
 
-_(Apple TV only)_ TV preferred focus (see documentation for the View component).
+:::warning Deprecated
+Use [`focusable` prop](view#focusable) form `View` instead.
+:::
+
+TV preferred focus.
 
 | Type |
 | ---- |
 | bool |
 
 ---
 
-### `nextFocusDown` <div className="label android">Android</div>
+### `nextFocusDown` <div className="label android">Android TV</div>
 
 TV next focus down (see documentation for the View component).
 
@@ -160,7 +164,7 @@ TV next focus down (see documentation for the View component).
 
 ---
 
-### `nextFocusForward` <div className="label android">Android</div>
+### `nextFocusForward` <div className="label android">Android TV</div>
 
 TV next focus forward (see documentation for the View component).
 
@@ -170,7 +174,7 @@ TV next focus forward (see documentation for the View component).
 
 ---
 
-### `nextFocusLeft` <div className="label android">Android</div>
+### `nextFocusLeft` <div className="label android">Android TV</div>
 
 TV next focus left (see documentation for the View component).
 
@@ -180,7 +184,7 @@ TV next focus left (see documentation for the View component).
 
 ---
 
-### `nextFocusRight` <div className="label android">Android</div>
+### `nextFocusRight` <div className="label android">Android TV</div>
 
 TV next focus right (see documentation for the View component).
 
@@ -190,7 +194,7 @@ TV next focus right (see documentation for the View component).
 
 ---
 
-### `nextFocusUp` <div className="label android">Android</div>
+### `nextFocusUp` <div className="label android">Android TV</div>
 
 TV next focus up (see documentation for the View component).
 
diff --git a/docs/touchablenativefeedback.md b/docs/touchablenativefeedback.md
diff --git a/docs/touchableopacity.md b/docs/touchableopacity.md
diff --git a/docs/view.md b/docs/view.md
diff --git a/website/contributing/how-to-run-and-write-tests.md b/website/contributing/how-to-run-and-write-tests.md
